服务人员问题

Question

我在这个链接的页面中实现的service worker演示有一些问题。我试着为这个演示尽可能地减少代码，但是粘贴到这里太长了。

一个问题是，当页面完全加载时，我转到Chrome devtools的“应用程序”选项卡，我在缓存中看到了很多内容：

不清楚为什么有这么多缓存...可能是我正在加载的字体，但仍然...似乎很大。

更令人担忧的是，当我单击该部分中的Clear Site Data按钮（所有选项均已打勾）时，饼图中红色的缓存存储部分不会降为零。（编辑...观察：虽然这在隐姓埋名窗口中完美地工作...点击按钮时，红色部分会下降到零。）

此外，当我在清除站点数据后点击F5重新加载页面时，服务人员无法再次正确安装。。。似乎在安装时卡住了：

为了让它再次运行，我必须单击该部分中的un注册链接，然后单击F5。（编辑...再次...在隐姓埋名窗口中完美工作...服务工作者在点击F5后不会卡在安装上。）

这段代码的另一个问题是缓存存储（服务工作者缓存）部分中的值没有正确填充：

所有内容长度信息都为零，缓存的时间信息也部分缺失。

问题是，这些问题在这个服务人员的例子中都不明显，所以一定是我做错了什么。




Answer 1

这是因为缓存桶中缓存了不透明响应，占用了太多的缓存存储空间。

Answer 2

当我测试你的站点时，我曾经遇到过一个问题，就是某个资源的响应是525。这是一个错误的SSL握手，这意味着服务工作者要么无法通过SSL抓取，要么无法获取它应该缓存的某些内容进行缓存。这似乎是一个间歇性的服务器端问题，因为它只是偶尔发生。我的猜测是，当您安装时，有时它会给您一个525响应，使服务人员陷入安装模式，当您注销并更新它时，服务器再次工作，您可以正确安装它。

除此之外，你的服务工作者似乎工作得很好，它会安装，一切都从缓存加载。

尝试将您的站点上传到其他服务器，看看错误是否仍然存在，或者最好运行一个小型localhost服务器来测试您的服务工作者。如果你想要一个非常简单的安装node.js并运行'npm安装-g超文本传输协议-server'，那么在你的站点根文件夹中打开一个终端/命令提示符，运行'超文本传输协议-server'，它将运行并打开一个测试默认浏览器中的服务器。

最后注意，当注册你的服务工作者时，不要检查https，如果你运行在localhost或127.0.0.1你的服务工作者仍然可以在不需要https的情况下运行和测试，如果你的网站是活的，它就不能没有https运行，不需要检查它。检查https本身不是问题，但它不是必要的，它使你无法在本地测试你的服务工作者。

你似乎把红色的吧台和黄色的服务人员吧台混淆了。您的服务人员只存储索引。html，大小为3.4KB。红色的其余缓存内存不由服务人员处理。

此service worker会将指定的资源缓存到缓存中，如果提取的资源未在缓存对象中指定，则会尝试将条目动态添加到缓存中（以防您忘记使用所有最新内容更新service worker）。它首先使用缓存，如果不在缓存中，则从网络获取并存储在缓存中以供以后访问。

这个脚本是经过尝试和测试的，如果您愿意，可以将它作为您自己项目的基础。

'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);
            }
        }));
    })
            );
});