我在the page at this link中实现的服务工作者演示遇到了一些问题。我试图尽可能地减少这个代码的代码,但是要粘贴到这里太长了。
一个问题是,当页面完全加载时,我转到Chrome devtools的Application选项卡,我在Cache中看到了很多:
不明白为什么有那么多缓存...它可能是我正在加载的字体但仍然......看起来很大。
更令人担忧的是,当我点击该部分中的Clear Site Data
按钮(勾选所有选项)时,饼图中的红色Cache Storage
部分不会降至零。 (编辑...观察:虽然这在隐身窗口中完美无瑕...红色部分在点击按钮时会降至零。)
此外,当我在清除网站数据后点击F5
重新加载页面时,服务工作者无法再次正确安装...似乎卡在installing
上:
为了让它再次出现,我必须点击该部分中的unregister
链接,然后点击F5
。 (再次编辑......在Incognito窗口中完美运行......服务人员在击中installing
后不会卡在F5
上。)
我对此代码的另一个问题是缓存存储(服务工作缓存)部分中的值未正确填充:
所有Content-Length
信息都是零,Time Cached
信息也部分缺失。
事实上,this service worker example没有出现这些问题,所以它一定是我做错了。
我在测试你的网站时遇到的一件事就是某些资源有525响应。这是一个糟糕的SSL握手,这意味着无法通过SSL获取服务工作者,或者无法获取缓存的某些内容以进行缓存。这似乎是一个间歇性的服务器端问题,因为它偶尔会发生。我的猜测是,当你有时安装它会给你一个525的响应,使服务工作者陷入安装模式,当你取消注册并更新它时,服务器再次工作,你可以正确安装它。
除了你的服务工作者似乎工作正常,它安装和一切从缓存加载应该。
尝试将您的站点上传到其他服务器并查看错误是否仍然存在,或者更好地运行一个小型本地主机服务器来测试您的服务工作者。如果您想要一个非常简单的安装node.js并运行'npm install -g http -server',然后打开站点根文件夹中的终端/命令提示符并运行'http-server -o',它将运行并在默认浏览器中打开测试服务器。
最后请注意,在注册服务工作者时,请不要检查https,如果您在localhost或127.0.0.1上运行,您的服务工作者仍然可以在不需要https的情况下运行和测试,并且如果您的站点是活动的,则不能没有https运行,无需检查它。检查https本身不是问题,但没有必要,这使您无法在本地测试您的服务工作者。
你似乎把黄色服务工作栏的红色条混淆了。您的服务工作者只存储index.html,其大小为3.4 kb。红色的其余缓存内存不由服务工作者处理。
此服务工作程序将指定的资源缓存到缓存中,如果提取的资源未在CACHE对象中指定,则它将尝试将条目动态添加到缓存中(以防万一您忘记使用所有最新的服务工作者更新服务工作者内容)。它首先使用缓存,如果不是缓存,则从网络获取并存储在缓存中以供以后访问。
该脚本经过试用和测试,如果您愿意,可以将其用作您自己项目的基础。
'use strict';
// Our current cache version and its contents.
var CACHE = {
version: 'site-version-number',
resources: [
'/index.html', // caches index.html
'/css/' // caches all the contents inside the /css folder
]
};
// Install service worker, adding all our cache entries
this.addEventListener('install', function (event) {
event.waitUntil(
caches.open(CACHE.version).then(function (cache) {
return cache.addAll(CACHE.resources);
})
);
});
// Handle a fetch request. If not fetched from cache, attempt to add to cache.
this.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request).then(function (resp) {
return resp || fetch(event.request).then(function (response) {
return caches.open(CACHE.version).then(function (cache) {
cache.put(event.request, response.clone()).catch(function (error) {
console.log('Could not add to cache!' + error);
});
return response;
}).catch(function (error) {
console.log('Could not open cache!' + error);
});
}).catch(function (error) {
console.log('Resource not found!' + error);
});
}).catch(function (error) {
console.log('Resource not found in the cache!' + error);
})
);
});
// Activate service worker
this.addEventListener('activate', function (event) {
// Remove all caches that aren't whitelisted
var cacheWhitelist = [CACHE.version];
event.waitUntil(
caches.keys().then(function (keyList) {
return Promise.all(keyList.map(function (key) {
if (cacheWhitelist.indexOf(key) === -1) {
return caches.delete(key);
}
}));
})
);
});
这是因为您在缓存桶中缓存了不透明的响应,这需要过多的cacheStorage。