サービスワーカーキャッシュが失敗しました

Question

私はオフラインで使用するすべてのアセットをキャッシュするという目的でプログレッシブWebアプリケーションを開発しています。ここで私は成功を記録していても、私がオンラインかじゃない場合は、私のサービスワーカー

self.addEventListener('install', function(e) { 
     e.waitUntil(
      caches.open('default-cache').then(function(cache) { 
       return cache.addAll([ 
       '/', 
       '/index.html', 
       '/bundle.js', 
       '/libraries/p5.dom.min.js', 
       '/libraries/p5.min.js', 
       '/libraries/p5.sound.min.js', 
       '/sound/spokesm4v.mp3', 
       '/css/flexboxgrid.min.css', 
       '/images/icon-192.png', 
       '/manifest.json', 
      ]) 
     }).then(function() { 
      return self.skipWaiting(); 
     })); 
    }); 

    self.addEventListener('activate', function(e) { 
     e.waitUntil(self.clients.claim()); 
    }); 

    self.addEventListener('fetch', function(e) { 
     e.respondWith(
      caches.match(e.request).then(function(response) { 
       return response || fetch(e.request); 
      }) 
     ); 
    }); 

にかかわらず、サービスの労働者は、いくつかの資産をキャッシュするために失敗した（この場合はbundle.js）と私のキャッシュ最初のシステムを壊すです作業者登録時のメッセージ。

https://postimg.org/gallery/2yo1ig35y/

Answer 1

私はキャッシュがbundle.jsために失敗した問題が表示されていないが、coloursel.ioを開くときに、私はあなたのsw.js「キャッチされないにReferenceErrorでJavaScriptエラーがあることをコンソールで確認できます。イベントはsw.jsで定義されていない：27"

あなたは

self.addEventListener('fetch', function(event) { 
    event.respondWith(
     caches.match(event.request).then(function(response) { 
      return response || fetch(event.request); 
     }) 
    ); 
}); 

へ

self.addEventListener('fetch', function(e) { 
    e.respondWith(
     caches.match(event.request).then(function(response) { 
      return response || fetch(event.request); 
     }) 
    ); 
}); 

を変更した場合3210

サービスワーカーは期待どおりに動作するはずです。

Answer 2

sw-precacheがjustmarkupよう