Web アプリにオフライン サポートを追加するために sw-precache を使用しています。
私のセットアップ：
- CSS/JS/HTML を使用した静的 Web サイト 動的コンテンツは、カスタムの indexedDB ソリューションを介して処理されます。
- 使用される Grunt タスクは、Service-Worker を生成します。
- すべての静的アセットをキャッシュするために使用される sw-precache (4.0.0)。
- 次のように、Apache で設定された service-worker.js のヘッダーをキャッシュします。
<LocationMatch "service-worker\.js.*"> Header set Cache-Control "max-age=0, no-cache" </LocationMatch>
通常の場合、問題なく動作しているようです。しかし、何らかの理由でユーザーがキャッシュをクリアした場合 (例: chrome dev ツールで -> アプリケーション -> ストレージをクリア (すべてを選択) -> [選択をクリア] をクリック)、オンラインになっていてもWebページが読み込まれません。コンソールに次のエラーが表示されます。
「 https://my.somedomain.com/somepath/somepage.html 」の FetchEventにより、ネットワーク エラー応答が発生しました。応答ではないオブジェクトが、respondWith() に渡されました。
生成された service-worker.js を見ると、次のコードに気付きます。
// If shouldRespond was set to true at any point, then call
// event.respondWith(), using the appropriate cache key.
if (shouldRespond) {
event.respondWith(
caches.open(cacheName).then(function(cache) {
return cache.match(urlsToCacheKeys.get(url));
}).catch(function(e) {
// Fall back to just fetch()ing the request if some unexpected error
// prevented the cached response from being valid.
console.warn('Couldn\'t serve response for "%s" from cache: %O', event.request.url, e);
return fetch(event.request);
})
);
デバッグ時に、catch ブロックが実行されていません。また、respondWith() に渡された catch.match が返されたオブジェクトの添付のデバッグ出力も参照してください。
だから私の質問：
- キャッシュ内にエントリが見つからない場合、sw-precache がネットワークにフォールバックしないのはなぜですか?
- リクエストエントリがキャッシュに見つからない場合にネットワークリクエストを強制する方法はありますか?