服务人员问题 [英] Service Worker issues
问题描述
我在
要再次使用它，我必须单击该部分中的取消注册链接，然后单击 F5 。 （再次编辑......在隐身窗口中完美运行...服务工作者在按 F5后不会卡在。）安装上
此代码的另一个问题是缓存存储（服务工作者缓存）部分中的值未正确填充：
所有 Content-Length 信息为零，并且 Time Cached 信息也部分缺失。
事实是，使用此服务工作者示例，这些问题都不明显。
在测试您的网站时，我碰到了一次525对某些资源的响应。这是一个糟糕的SSL握手，这意味着无法通过SSL获取服务工作者，或者无法获取应该缓存的某些内容进行缓存。这似乎是服务器间歇性问题，因为它只是偶尔发生。我的猜测是，有时在安装时它会给您525响应，使服务人员陷入安装模式；而当您取消注册并更新服务器时，它又可以正常工作并且可以正确安装它。
除了您的服务人员似乎工作正常之外，它还会安装并且一切都应从缓存中加载。
尝试将您的站点上载到其他服务器，看看错误是否仍然存在，或者最好运行一台小型localhost服务器来测试您的服务工作者。如果您想要一个非常简单的安装node.js并运行'npm install -g http-server，然后在站点根文件夹中打开终端/命令提示符，然后运行 http-server -o，它将在默认浏览器中运行并打开测试服务器。
最后一点，在注册服务工作者时，请勿检查https，如果您在localhost或127.0.0.1上运行，您的服务工作者仍然可以运行和测试，而无需代表https，如果您的网站是在线的，那么没有https就无法运行，无需检查。检查https本身不是问题，但这不是必须的，这会使您无法在本地测试服务工作者。
添加
您似乎对红色服务栏与黄色服务人员栏感到困惑。您的服务人员仅存储index.html，其大小为3.4 kb。其余红色缓存的内存不是由服务工作者处理的。
示例ServiceWorker.js
此服务工作者将把指定的资源缓存到缓存中，并且如果获取了未在CACHE对象中指定的资源，它将尝试将条目动态添加到缓存中（如果您忘记了使用所有最新内容）。它首先使用缓存，如果不在网络中，则从网络获取缓存，并存储在缓存中以供以后访问。
此脚本经过尝试和测试，用作您自己的基础。
使用严格；
//我们当前的缓存版本及其内容。
var CACHE = {
版本： site-version-number，
资源：[
'/index.html'，//缓存index.html
'/ css /'//缓存/ css文件夹
]
}中的所有内容；
//安装服务工作者，添加所有缓存条目
this.addEventListener（'install'，function（event）{
event.waitUntil（
caches。 open（CACHE.version）.then（function（cache）{
return cache.addAll（CACHE.resources）;
}）
）;
}）;
//处理提取请求。如果未从缓存中获取，请尝试添加到缓存中。
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（函数（错误）{
console.log（'无法添加到缓存！'+错误）;
}）;
返回响应;
}）。catch（function（error）{
console.log（'无法打开缓存！'+错误）;
}）;
}）。catch（function（error ）{
console.log（'找不到资源！'+错误）;
}）;
}）。catch（函数（错误）{
console.log（'在缓存中找不到资源！'+错误）;
}）
）;
}）;
//激活服务工作者
this.addEventListener（'activate'，function（event）{
//删除所有未列入白名单的缓存
var cacheWhitelist = [CACHE.version];
event.waitUntil（
caches.keys（）。then（function（keyList）{
return Promise.all（keyList.map（function（key）{
if（cacheWhitelist.indexOf（key）=== -1）{
返回caches.delete（key）;
}
}））;
}）
）;
}）；
I'm having some issues with the service worker demo I've implemented in the page at this link. I've tried to cut the code down as much as possible for this demo, but it's too long to paste into here.
One problem is that, when the page is fully loaded, and I go to the Application tab of Chrome devtools, and I see rather a lot in the Cache:
It's not apparent why there is so much cached... it may be the fonts I'm loading but still... seems large.
More worryingly, when I click on the Clear Site Data button in that section (with all options ticked), the red Cache Storage part of the pie chart does not drop to zero. (EDIT... observation: although this works flawlessly in an Incognito window... red part does drop to zero on clicking the button.)
Furthermore, when I hit F5 to reload the page after clearing site data, the service worker fails to install properly again... seems to be stuck on installing:
To get it going again, I have to click on the unregister link in that section, and then F5. (EDIT... again... works flawlessly in an Incognito window... service worker doesn't get stuck on installing after hitting F5.)
Another issue I'm having with this code is that the values in the Cache Storage (service worker cache) section are not properly populated:
All the Content-Length info is zero, and the Time Cached info is also partially missing.
Thing is, none of these problems is apparent with this service worker example, so it must be something I'm doing wrong.
Something I ran into once when I was testing your site was that there was a 525 response for some resource. This is a bad SSL handshake, meaning the service worker either couldn't be grabbed over SSL or some content it is supposed to cache can't be fetched for caching. This seems to be an intermittent server side issue since it only happens occasionally. My guess is that when you're installing sometimes it will give you a 525 response to something which makes the service worker get stuck in installing mode, and when you unregister and update it the server is once again working and you can install it properly.
Other than that your service worker seems to work just fine, it installs and everything loads from cache as it should.
Try to upload your site to some other server and see if the error persists, or better yet run a small localhost server to test your service worker in. If you want a really simple one install node.js and run 'npm install -g http-server', then open a terminal/command prompt inside your site root folder and run 'http-server -o' and it will run and open a testing server in your default browser.
Last note, when registering your service worker, don't check for https, if you run on localhost or 127.0.0.1 your service worker can still be run and tested without the need for https, and if your site is live it can't run without https, no need to check for it. Checking for https isn't a problem per se but it isn't necessary and it makes you unable to test your service worker locally.
Addition
You seem to be confusing the red bar for the yellow service worker bar. Your service worker is only storing index.html, which is 3.4 kb in size. The rest of the cached memory in red isn't handled by your service worker.
Example ServiceWorker.js
This service worker will cache specified resources to the cache, and if resources are fetched that aren't specified in the CACHE object it will attempt to add entries dynamically to the cache (good in case you forget to update your service worker with all your latest content). It uses cache first, if not in cache get from network and store in cache for later visits.
This script is tried and tested, use it as a basis for your own project if you like.
'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);
}
}));
})
);
});
这篇关于服务人员问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
