ServiceWorkerGlobalScope.onfetch
ServiceWorkerGlobalScope
インターフェイスの onfetch
プロパティは、fetch
イベントが発生するたびに(通常、WindowOrWorkerGlobalScope.fetch()
メソッドが呼び出されたときに)発火するイベントハンドラーです。
構文
serviceWorkerGlobalScope.onfetch = function(fetchEvent) { ... };
例
このコードスニペットは、サービスワーカーのプリフェッチの例からのものです(プリフェッチの例をライブで見る)。ServiceWorkerGlobalScope.onfetch
イベントハンドラーは、fetch
イベントをリッスンします。 コードが実行されると、コードは、Cache
オブジェクト内の最初に一致するリクエストに解決するプロミスを返します。 一致が見つからない場合、コードはネットワークからレスポンスをフェッチします。
このコードは、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;
});
})
);
});
仕様
仕様 | 状態 | コメント |
---|---|---|
Service Workers Event Handlers の定義 |
草案 | 初期定義 |
ブラウザーの互換性
No compatibility data found for api.ServiceWorkerGlobalScope.onfetch
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.