Chrome安装Service Worker addAll提取失败

Question

我正在使用服务工作人员为我的网站的资产（HTML，JS，CSS）提供缓存。

当我使用Firefox时，我的sw.js安装正确并且缓存了所需的文件。如果我进入离线模式，我可以正确地设置网站的样式，但是数据（数据没有被缓存时正确）。

但是，当我使用Chrome时，出现TypeError: Failed to fetch错误。我真的不确定为什么我得到这个错误，因为它在Firefox中工作。另外，当fetch事件触发时，我会得到相同的错误，并且请求的资源不在缓存中（并且正在调用获取函数）。

如果我将一个空数组传递给cache.addAll函数，在尝试实际处理提取事件之前，我不会收到任何错误。

也许值得注意的是，我缓存的所有文件都来自本地主机，而不是任何其他来源，所以我不能看到这是一个跨域问题。

---

这是控制台输出安装服务人员时：

这是在安装服务人员后刷新页面时的控制台输出：

---

这是我的服务人员的代码：

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); 
     }) 
    ); 
}); 

任何帮助将是伟大的。当文件1是不能访问

Answer 1

cache.addAll(CACHE_FILES) 

将失败（HTTP 400,401等，也5XX和3XX有时），以避免失败的所有时1失败使用单独的catch语句在地图环路喜欢这里https://github.com/GrosSacASac/server-in-the-browser/blob/master/client/js/service_worker.js#L168

它不会因为空数组而失败的事实可能意味着您在CACHE_FILES中拥有无法访问的资源。

也许firefox没有那么复杂，缓存了400响应的主体。

在您的提取处理程序中，您尝试直接使用caches.match，但我认为这不合法。您必须首先打开缓存，然后从打开的缓存中打开cache.match。请参阅https://github.com/GrosSacASac/server-in-the-browser/blob/master/client/js/service_worker.js#L143