Chrome安装Service Worker addAll无法获取 [英] Chrome install Service Worker addAll failed to fetch
问题描述
我正在使用服务人员为网站的资产（HTML，JS，CSS）提供缓存。
I am using a service worker to provide caching for my site's assets (HTML, JS, CSS).
使用Firefox时，我的sw.js正确安装了并缓存所需的文件。如果我进入离线模式，则可以正确设置网站的样式，显示所有内容，但包含数据（由于未缓存数据，因此是正确的）。
When I use Firefox my sw.js is installed correctly and the required files cached. If I go into offline mode I get the site styled correctly with everything present but the data (which is correct as the data is not being cached).
但是，当我使用Chrome浏览器出现 TypeError：无法提取错误。我真的不确定为什么会收到此错误，因为它在Firefox中有效。另外，每当 fetch 事件触发时，如果请求的内容不在缓存中（并且调用了fetch函数），就会引发相同的错误。
However when I use Chrome I'm getting a TypeError: Failed to fetch error. I'm really unsure why I'm getting this error since it works in Firefox. In addition I'm getting the same error thrown whenever the fetch event fires and the request if for an asset that is not in the cache (and the fetch function is being called).
如果我将空数组传递给 cache.addAll 函数，在尝试之前不会出现任何错误来真正处理提取事件。
If I pass an empty array to the cache.addAll function I don't get any errors until attempting to actually handling the fetch event.
也许值得一提的是，我正在缓存的文件都不全都是来自本地主机，而不是其他任何来源，所以我不能看到这是一个跨域问题。
It's maybe worth noting that none of the files I'm caching are all coming from localhost and not any other origin so I can't see this being a cross-domain issue.
这是安装服务工作者时的控制台输出：
This is the console output when installing the service worker:
这是在安装Service Worker之后刷新页面时的控制台输出：
This is the console output when refreshing the page after installing the service worker:
这是我的服务人员的代码：
This is the code for my 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);
})
);
});
任何帮助都会很棒。
推荐答案
cache.addAll(CACHE_FILES)
将在文件的1个不可访问时失败（HTTP 400,401等，有时也为5XX和3XX），以避免全部失败，而当1个文件失败时，在映射循环中使用单独的catch语句，如此处 https://github.com/GrosSacASac/server-in- -browser / blob / master / client / js / service_worker.js＃L168
will fail when 1 of the file is not accessible (HTTP 400,401 etc, also 5XX and 3XX sometimes) to avoid failing all when 1 fail use individual catch statement in a map loop like here https://github.com/GrosSacASac/server-in-the-browser/blob/master/client/js/service_worker.js#L168
使用空数组不会失败的事实可能意味着您已经
the fact that it does not fail with empty array probably means you have an inaccessible resource in CACHE_FILES.
也许firefox的矫正性较差，并缓存了400个响应的正文。
Maybe firefox is less restrective and caches the body of the 400 response.
在您的提取处理程序中，您尝试直接使用caches.match，但是我认为这是不合法的。您必须先打开缓存，然后从打开的缓存中执行cache.match。参见 https：// github .com / GrosSacASac / server-in-the-browser / blob / master / client / js / service_worker.js＃L143
Inside your fetch handler you try to use caches.match directly but I think that is not legal. you must open the caches first and then from an opened cache you can do cache.match. See https://github.com/GrosSacASac/server-in-the-browser/blob/master/client/js/service_worker.js#L143
这篇关于Chrome安装Service Worker addAll无法获取的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
