【发布时间】：2018-04-02 14:18:43
【问题描述】：
我正在使用服务人员为我的网站资产（HTML、JS、CSS）提供缓存。
当我使用 Firefox 时，我的 sw.js 已正确安装并缓存了所需的文件。如果我进入离线模式，我会正确设置网站样式，除了数据之外的所有内容（这是正确的，因为数据没有被缓存）。
但是，当我使用 Chrome 时，我收到了 TypeError: Failed to fetch 错误。我真的不确定为什么会收到此错误，因为它在 Firefox 中有效。此外，每当fetch 事件触发并且请求不在缓存中的资产（并且正在调用 fetch 函数）时，我都会收到相同的错误。
如果我将一个空数组传递给 cache.addAll 函数，在尝试实际处理 fetch 事件之前我不会收到任何错误。
值得注意的是，我缓存的所有文件都不是来自本地主机，也不是来自任何其他来源，所以我看不出这是一个跨域问题。
这是安装 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);
})
);
});
任何帮助都会很棒。
【问题讨论】：
标签： javascript google-chrome caching service-worker