Question

我在the page at this link中实施的服务工作者演示中遇到了一些问题。我已经尝试尽可能地减少这个代码的代码，但要粘贴到这里太长了。

一个问题是，当页面完全加载时，我会转到Chrome devtools的Application选项卡，而且我在Cache中看到了很多：

不明白为什么有这么多缓存...它可能是我加载的字体但仍然......似乎很大。

更令人担忧的是，当我点击该部分中的Clear Site Data按钮（勾选所有选项）时，饼图的红色Cache Storage部分不会降至零。（编辑... 观察：虽然这在隐身窗口中完美运行...红色部分在点击按钮时会降至零。）

此外，当我在清除网站数据后点击F5重新加载页面时，服务工作者无法再次正确安装...似乎卡在installing上：

要重新开始，我必须点击该部分中的unregister链接，然后点击F5。（编辑......再次...在隐身窗口中完美运行......服务人员在点击installing后不会卡在F5上。）

我对此代码的另一个问题是缓存存储（服务工作缓存）部分中的值未正确填充：

所有Content-Length信息均为零，Time Cached信息也部分丢失。

事实是，this service worker example没有出现这些问题，所以它一定是我做错了。

Answer 1

我在测试您的网站时遇到的一件事是某些资源有525响应。这是一个糟糕的SSL握手，这意味着服务工作者要么无法通过SSL获取，要么缓存的某些内容无法获取用于缓存。这似乎是一个间歇性的服务器端问题，因为它偶尔会发生。我的猜测是，当你有时进行安装时，它会给你一个525的响应，使服务工作者陷入安装模式，当你取消注册并更新它时，服务器再次工作，你可以安装它正常。

除了你的服务工作者似乎工作得很好之外，它安装并且所有东西都从缓存中加载。

尝试将您的站点上传到其他服务器并查看错误是否仍然存在，或者更好地运行一个小型本地主机服务器来测试您的服务工作者。如果您想要一个非常简单的安装node.js并运行＆＃39 ; npm install -g http-server＆＃39;，然后在你的站点根文件夹中打开一个终端/命令提示符并运行＆＃39; http-server -o＆＃39;它将在您的默认浏览器中运行并打开测试服务器。

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

加成

你似乎把黄色服务工作栏的红色条混淆了。您的服务工作者只存储index.html，其大小为3.4 kb。红色的其余缓存不是由服务工作者处理的。

示例ServiceWorker.js

此服务工作者将指定的资源缓存到缓存中，如果提取的资源未在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);
            }
        }));
    })
            );
});

Answer 2

这是由于您在缓存存储区中缓存了不透明的响应，这会占用太多的cacheStorage。

服务工作者问题

2 个答案:

加成

示例ServiceWorker.js