Question

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

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

但是，当我使用Chrome时，我收到TypeError: Failed to fetch错误。我真的不确定为什么我会收到此错误，因为它适用于Firefox。另外，每当fetch事件触发时，我都会得到相同的错误，而对于不在缓存中的资产（以及正在调用fetch函数）的请求，我会得到同样的错误。

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

可能值得注意的是，我所缓存的文件都不是来自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 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响应的主体。

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

Chrome安装Service Worker addAll无法获取

1 个答案: