5

我一直在玩弄服务人员和 sw-toolbox。两者都是很好的方法，但似乎都有自己的弱点。

我的项目开始使用 Google 的服务工作者方法（链接）。我看到的方式是您必须手动更新缓存清除的版本号。我也可能是错的，但我认为用户访问过的页面不会被缓存。

与 sw-toolbox 方法相比，我只需要添加以下代码：

self.toolbox.router.default = self.toolbox.networkFirst;

self.toolbox.router.get('/(.*)', function (req, vals, opts) {
    return self.toolbox.networkFirst(req, vals, opts)
        .catch(function (error) {
            if (req.method === 'GET' && req.headers.get('accept').includes('text/html')) {
                return self.toolbox.cacheOnly(new Request(OFFLINE_URL), vals, opts);
            }
            throw error;
        });
});

那么缓存页面的问题就迎刃而解了。这是我的问题：在将 sw-toolbox 应用到我的项目后，旧的服务人员不会被清除或替换为新的，除非我去开发工具清除它。

任何想法如何解决这个问题？

4

2 回答 2

7

这是我的问题：在将 sw-toolbox 应用到我的项目后，旧的服务人员不会被清除或替换为新的，除非我去开发工具清除它。

浏览器每次请求 Service Worker 范围内的资源时都会检查 Service Worker 文件的更新。如果 service worker 文件存在字节差异，浏览器将安装新的 service worker。您只需要在开发工具中手动更新 Service Worker，因为该应用程序仍在运行，并且浏览器不想在旧的 Service Worker 仍在使用时激活新的 Service Worker。

如果你关闭所有与 service worker 相关的页面（就像用户在离开你的应用时那样），浏览器将能够在下次打开你的页面时激活新的 service worker。

如果你想强制新的 service worker 接管，你可以添加self.skipWaiting();到install事件中。这是一些带有示例的文档。

您可以从Jake Arichbald 的这篇文章中了解有关服务人员生命周期的所有信息。

就缓存和缓存管理而言，sw-toolbox 之类的工具将为您处理缓存破坏。实际上，Workbox是一个新工具，旨在取代 sw-toolbox 和 sw-precache。它还将处理缓存破坏和缓存管理（通过比较文件哈希和设置/跟踪资源到期日期）。

一般来说，你应该总是使用像Workbox这样的工具来编写你的 service worker。手工编写它们很容易出错，并且您可能会错过极端情况。

希望有帮助。

PS 如果您最终不使用skipWaiting，而是仅在用户关闭和重新打开页面时更新，您仍然可以启用自动更新以进行开发。在 Chrome 的开发工具中，Application > Service Workers有一个Update on reload选项来自动更新 service worker。

于 2017-06-21T17:11:22.360 回答
1

我不知道 sw_toolbox 是否内置了缓存清除功能。通常，当您更改服务工作者并需要清除以前版本的缓存时，您应该在激活事件处理程序中执行此操作。

此处的最佳做法是使用包含的 sw 版本号来命名您的缓存。以下是我在服务工作者缓存方面的在线课程中的一些示例代码，可以帮助您入门：

self.addEventListener("activate", event => {

console.log("service worker activated");

//on activate
event.waitUntil(caches.keys()
    .then(function (cacheNames) {

        cacheNames.forEach(function (value) {

            if (value.indexOf(config.version) < 0) {

                caches.delete(value);

            }

        });

        return;

    })
);

});

于 2017-06-21T12:51:04.150 回答