我在我的网站上安装了一个服务工作者,一切正常,除非我将更新推送到缓存文件,实际上;他们永远被 grab 了,除非我从`chrome:// serviceworker-internals /取消订阅工作人员,否则我似乎无法使缓存无效
const STATIC_CACHE_NAME = 'static-cache-v1';
const APP_CACHE_NAME = 'app-cache-#VERSION';
const CACHE_APP = [
'/',
'/app/app.js'
]
const CACHE_STATIC = [
'https://fonts.googleapis.com/css?family=Roboto:400,300,500,700',
'https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css'
]
self.addEventListener('install',function(e){
e.waitUntil(
Promise.all([caches.open(STATIC_CACHE_NAME),caches.open(APP_CACHE_NAME)]).then(function(storage){
var static_cache = storage[0];
var app_cache = storage[1];
return Promise.all([static_cache.addAll(CACHE_STATIC),app_cache.addAll(CACHE_APP)]);
})
);
});
self.addEventListener('activate', function(e) {
e.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheName !== APP_CACHE_NAME && cacheName !== STATIC_CACHE_NAME) {
console.log('deleting',cacheName);
return caches.delete(cacheName);
}
})
);
})
);
});
self.addEventListener('fetch',function(e){
const url = new URL(e.request.url);
if (url.hostname === 'static.mysite.co' || url.hostname === 'cdnjs.cloudflare.com' || url.hostname === 'fonts.googleapis.com'){
e.respondWith(
caches.match(e.request).then(function(response){
if (response) {
return response;
}
var fetchRequest = e.request.clone();
return fetch(fetchRequest).then(function(response) {
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
var responseToCache = response.clone();
caches.open(STATIC_CACHE_NAME).then(function(cache) {
cache.put(e.request, responseToCache);
});
return response;
});
})
);
} else if (CACHE_APP.indexOf(url.pathname) !== -1){
e.respondWith(caches.match(e.request));
}
});
其中#VERSION是在编译时附加到缓存名称的版本;请注意,STATIC_CACHE_NAME永远不会更改,因为文件被认为是永久静态的 .
此外,行为是不稳定的,我一直在检查删除功能(它记录的部分),并一直记录已删除的删除缓存(据称) . 当我运行 caches.keys().then(function(k){console.log(k)})
时,我得到了一大堆应该被删除的旧缓存 .
2 回答
在谷歌搜索并观看一些关于udacity的视频后,我发现工作人员的预期行为是留在它控制的页面关闭,并在新服务工作者可以控制时再次重新打开 .
解决方案是强制它控制基于https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting以下解决了问题,即使需要2次重新加载以便新工作人员反映更改(这是有道理的,因为应用程序在新 Worker 替换之前加载) .
作为“服务工作者新手”,我遇到了相关的情况,即使在Chrome Canary上启用了“JavaScript控制台>应用程序>重新加载更新”,服务工作人员也无法刷新 .
问题是我在
/sw/index.js
中有工作代码,然后我向/sw/index.js
引入了一个错误 . 当我介绍错误时,浏览器拒绝加载更新的代码并继续加载早期工作的服务工作者 . 当我更正index.js
中的代码并刷新页面时,服务工作者的新代码出现了 . 我本以为错误填充代码会抛出错误,但事实并非如此 . 浏览器刚加载了早期的无错版本 .