DHTML：イベント・インターフェース　 編集：2017.06.23 20:14 by T.A.
→MS

FetchEventインターフェース

これは実験段階の機能です。
　この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性表をチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
　ServiceWorkerGlobalScope.onfetch ハンドラに渡されたパラメータは、FetchEvent は、ServiceWorker の ServiceWorkerGlobalScope にディスパッチされるフェッチ・アクションを表します。これには、要求とその結果の応答に関する情報が含まれています。FetchEvent.respondWith() メソッドを提供し、制御されたページに任意の応答を戻すことができます。
コンストラクター
FetchEvent.FetchEvent()
新しい FetchEvent オブジェクトを作ります。
プロパティ
　その祖先からプロパティを継承し、Event。
FetchEvent.isReload
読取専用。ユーザーがページをリロードする意図でイベントが送出された場合はtrue、それ以外の場合はfalseです。典型的には、ブラウザでリフレッシュボタンを押すとリロードされますが、リンクをクリックして戻るボタンを押しても、リンクがクリックされません。
FetchEvent.request
読取専用。イベントハンドラをトリガーした リクエストを返します。
FetchEvent.clientId
読取専用。現在のサービス・ワーカーが制御しているクライアントのIDを返します。
非推奨のプロパティ
FetchEvent.client 読取専用。現在のサービス・ワーカーが制御しているクライアントを返します。
メソッド
　その親であるExtendableEventからメソッドを継承します。
FetchEvent.respondWith()
レスポンスまたはネットワーク・エラーをFetchに返すことで解決します。
ExtendableEvent.waitUntil()
イベントの存続期間を延長します。これは、インストール・ワーカーとアクティブなワーカーのアクティブなEventHandlerに設定のためのインストール EventHandlerで呼び出されることを意図しています。
例
　このコード・スニペットは、サービス・ワーカーのフェッチサンプル（フェッチ・サンプルをライブで実行します）からのものです。コードの初期の部分では、InstallEvent は、多数のリソースのキャッシングを制御します。ServiceWorkerGlobalScope.onfetch イベント・ハンドラは、フェッチ・イベントを聞きます。発せられると、FetchEvent.respondWith() は、制御されたページに約束を返します。この約束は、Cache オブジェクト内で最初に一致する URL 要求に解決されます。一致するものが見つからない場合（つまり、そのリソースはインストール・フェーズでキャッシュされませんでした）、コードはネットワークからの応答を取得します。

　コードは、ServiceWorkerGlobalScope.fetch() 操作から投げられた例外も処理します。HTTP エラー応答（例えば、404）は例外をトリガしないことに留意されたい。適切なエラー・コードが設定された通常の応答オブジェクトを返します。
self.addEventListener('fetch', function(event) { console.log('Handling fetch event for', event.request.url); event.respondWith( caches.match(event.request).then(function(response) { if (response) { console.log('Found response in cache:', response); return response; } console.log('No response found in cache. About to fetch from network...'); return fetch(event.request).then(function(response) { console.log('Response from network is:', response); return response; }).catch(function(error) { console.error('Fetching failed:', error); throw error; }); }) ); });
ブラウザの互換性
PC モバイル
特徴 Chrome Firefox (Gecko) IE Opera Safari (WebKit)
基本サポート 40.0 44.0 (44.0) 未サポート 24 未サポート
特徴 Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート ? 44.0 (44.0) (有) 未サポート ? 未サポート 44.0
関連項目