Chrome 安装 Service Worker addAll 无法获取

Question

我正在使用 Service Worker 为我网站的资产（HTML、JS、CSS）提供缓存。

当我使用 Firefox 时，我的 sw.js 已正确安装并缓存了所需的文件。如果我进入离线模式，我会正确地设置网站样式，除了数据之外的所有内容（这是正确的，因为数据没有被缓存）。

但是，当我使用 Chrome 时，出现TypeError: Failed to fetch错误。我真的不确定为什么会收到此错误，因为它在 Firefox 中有效。此外，每当fetch事件触发和请求不在缓存中的资产（并且正在调用 fetch 函数）时，我都会抛出相同的错误。

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

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

---

这是安装 Service Worker 时的控制台输出：

这是安装 Service Worker 后刷新页面时的控制台输出：

---

这是我的服务工作者的代码：

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 400,401 等，有时也是 5XX 和 3XX）以避免在 1 失败时全部失败，在地图循环中使用单独的 catch 语句，如这里https://github.com/GrosSacASac/server-在浏览器中/blob/master/client/js/service_worker.js#L168

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

也许 firefox 不那么容易恢复并缓存 400 响应的正文。

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