javascript - Service Worker 问题

Question

我在 the page at this link 中实现的服务 worker 演示存在一些问题.我已尝试尽可能减少此演示的代码，但它太长而无法粘贴到此处。

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

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

更令人担忧的是，当我单击该部分中的 Clear Site Data 按钮(所有选项均已勾选)时，饼图的红色 Cache Storage 部分会 < em>不 降为零。 (编辑...观察:尽管这在隐身窗口中完美运行...红色部分确实在单击按钮时降为零。)

此外，当我在清除站点数据后按 F5 重新加载页面时，service worker 无法再次正确安装...似乎卡在了 installing 上:

要让它再次运行，我必须单击该部分中的 unregister 链接，然后单击 F5。 (编辑...再次...在隐身窗口中完美运行...服务人员在点击 F5 后不会卡在 installing 上。)

我在使用此代码时遇到的另一个问题是缓存存储(服务 worker 缓存)部分中的值未正确填充:

Content-Length 信息全部为零，Time Cached 信息也部分缺失。

事实是，this service worker example 这些问题都不明显，所以这一定是我做错了什么。

Answer 1

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

除此之外，您的 service worker 似乎工作正常，它会安装并从缓存中加载所有内容。

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

最后要注意的是，在注册你的 service worker 时，不要检查 https，如果你在 localhost 或 127.0.0.1 上运行，你的 service worker 仍然可以在不需要 https 的情况下运行和测试，如果你的站点是实时的没有https就不能运行，不用查。检查 https 本身不是问题，但这不是必需的，它使您无法在本地测试您的 service worker。

加法

您似乎混淆了黄色服务 worker 栏的红色栏。您的 service worker 仅存储 index.html，大小为 3.4 kb。剩余的红色缓存内存不由您的 Service Worker 处理。

示例 ServiceWorker.js

此 service worker 会将指定的资源缓存到缓存中，如果获取的资源未在 CACHE 对象中指定，它将尝试将条目动态添加到缓存中(以防你忘记更新你的 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);
            }
        }));
    })
            );
});