google-chrome - Service worker を使用したオフライン対応

Question

少し前に appcache を使用してオフラインの最初のアプリを作成し、それを service-worker を使用するように変換したいと考えていました (クライアントはすべて最新のクロムを使用しているため、ブラウザーの互換性の問題はありません)。

sw-precache を使用して、ローカル アセット (具体的には、html/css/fonts といくつかの js) をキャッシュするサービス ワーカーを生成しています。サービス ワーカーがインストールされると、すべてのアセットが正常に追加されます。ストレージをキャッシュすると、正常に開始されます（起動と完了の両方をインストールしてアクティブ化します。また、インストールイベントの最後にself.skipWaiting（）を使用して、サービスワーカーを開始します（これも正常に実行されます））。

問題は、「フェッチ」イベントが発生していないように見えることです。そのため、オフラインにするか、ブラウザーを開いて (既にオフラインの状態で) サイトに移動すると、Chrome オフライン恐竜が表示されます。ネットワーク タブを見ると、ブラウザがサーバーにアクセスしてページを取得しようとしているように見えます。何が間違っているのかわからず、sw-precache ユーティリティによって生成されたフェッチ メソッドに触れていないので、何が欠けているのかわかりません。どんな助けでも大歓迎です。私のフェッチイベントは以下の通りです:

self.addEventListener('fetch', function(event) {
  if (event.request.method === 'GET') {
     var urlWithoutIgnoredParameters = stripIgnoredUrlParameters(event.request.url,
  IgnoreUrlParametersMatching);

var cacheName = AbsoluteUrlToCacheName[urlWithoutIgnoredParameters];
var directoryIndex = 'index.html';
if (!cacheName && directoryIndex) {
  urlWithoutIgnoredParameters = addDirectoryIndex(urlWithoutIgnoredParameters, directoryIndex);
  cacheName = AbsoluteUrlToCacheName[urlWithoutIgnoredParameters];
}

var navigateFallback = '';
// Ideally, this would check for event.request.mode === 'navigate', but that is not widely
// supported yet:
// https://code.google.com/p/chromium/issues/detail?id=540967
// https://bugzilla.mozilla.org/show_bug.cgi?id=1209081
if (!cacheName && navigateFallback && event.request.headers.has('accept') &&
    event.request.headers.get('accept').includes('text/html') &&
    /* eslint-disable quotes, comma-spacing */
    isPathWhitelisted([], event.request.url)) {
    /* eslint-enable quotes, comma-spacing */
  var navigateFallbackUrl = new URL(navigateFallback, self.location);
  cacheName = AbsoluteUrlToCacheName[navigateFallbackUrl.toString()];
}

if (cacheName) {
  event.respondWith(
    // Rely on the fact that each cache we manage should only have one entry, and return that.
    caches.open(cacheName).then(function(cache) {
      return cache.keys().then(function(keys) {
        return cache.match(keys[0]).then(function(response) {
          if (response) {
            return response;
          }
          // If for some reason the response was deleted from the cache,
          // raise and exception and fall back to the fetch() triggered in the catch().
          throw Error('The cache ' + cacheName + ' is empty.');
        });
      });
    }).catch(function(e) {
      console.warn('Couldn\'t serve response for "%s" from cache: %O', event.request.url, e);
      return fetch(event.request);
    })
  );
}

} });