javascript - 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-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