ChromeインストールService Worker addAllが取得できませんでした

Question

私はサービスワーカーを使用して自分のサイトの資産（HTML、JS、CSS）のキャッシュを提供しています。

Firefoxを使用すると、sw.jsが正しくインストールされ、必要なファイルがキャッシュされます。私がオフラインモードに入ると、私は、存在するすべてのもの（データがキャッシュされていないので正しい）でサイトスタイルを正しく取得します。

しかし、私がChromeを使用すると、私はTypeError: Failed to fetchエラーが発生しています。なぜFirefoxで動作するので、私はこのエラーが出ているのか分かりません。さらに、fetchイベントが発生するたびに同じエラーがスローされ、キャッシュにないアセット（およびフェッチ機能が呼び出されている）の場合はリクエストが発生します。

cache.addAll関数に空の配列を渡すと、フェッチイベントを実際に処理しようとするまでエラーは発生しません。

私がキャッシュしているファイルはすべてlocalhostから来たもので、他の起源ではないので、クロスドメインの問題であるとは思われません。

---

サービスワーカーをインストールするとき、これはコンソール出力です：

サービスワーカーをインストールした後にページを更新するとき。これは、コンソール出力です：

---

これがされ私のサービスワーカーのコード：

const CACHE_NAME = 'webapp-v1'; 
const CACHE_FILES = [ 
    '/', 
    '/public/app.css', 
    '/public/img/_sprites.png', 
    '/public/js/app.min.js', 
    '/public/js/polyfills.min.js' 
]; 

self.addEventListener('install', event => { 
    console.log("[sw.js] Install event."); 
    event.waitUntil(
     caches.open(CACHE_NAME) 
      .then(cache => cache.addAll(CACHE_FILES)) 
      .then(self.skipWaiting()) 
      .catch(err => console.error("[sw.js] Error trying to pre-fetch cache files:", err)) 
    ); 
}); 

self.addEventListener('activate', event => { 
    console.log("[sw.js] Activate event."); 
    event.waitUntil(
     self.clients.claim() 
    ); 
}); 

self.addEventListener('fetch', event => { 
    if (!event.request.url.startsWith(self.location.origin)) return; 
    console.log("[sw.js] Fetch event on", event.request.url); 
    event.respondWith(
     caches.match(event.request).then(response => { 
      console.info("[sw.js] Responded to ", event.request.url, "with", response ? "cache hit." : "fetch."); 
      return response || fetch(event.request); 
     }).catch(err => { 
      console.error("[sw.js] Error with match or fetch:", err); 
     }) 
    ); 
}); 

どのような助けも素晴らしいでしょう。

Answer 1

cache.addAll(CACHE_FILES) 

ファイルの1がアクセス（HTTP 400401など、時には5XXと3XX）1はここhttps://github.com/GrosSacASac/server-in-the-browser/blob/master/client/js/service_worker.js#L168

のようなマップのループ内の個々のcatchステートメントを使用し失敗したときに、すべての失敗を避けるためにはない場合は失敗します空の配列で失敗しないという事実は、おそらくCACHE_FILESにアクセスできないリソースがあることを意味します。

多分、firefoxはあまり矯正されず、400応答の本体をキャッシュします。

フェッチハンドラの中では、caches.matchを直接使用しようとしていますが、それは合法ではないと思います。最初にキャッシュを開いてから、開かれたキャッシュからcache.matchを実行する必要があります。 https://github.com/GrosSacASac/server-in-the-browser/blob/master/client/js/service_worker.js#L143