Question

我一直在与服务工作者和sw-toolbox一起玩弄。两者都是很好的方法，但似乎有它们的弱点。

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

与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应用到我的项目之后，旧的服务工作者不会被新的服务工作者清除或替换，除非我去开发工具清除它。

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

Answer 1

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

每次请求服务工作者作用域中的资源时，浏览器都会检查服务工作文件的更新。如果服务工作程序文件中存在字节差异，则浏览器将安装新的服务工作程序。您只需要在开发工具中手动更新服务工作者，因为该应用程序仍在运行，并且浏览器不希望在旧服务工作者仍在使用时激活它。

如果您关闭与服务工作者关联的所有页面（就像用户离开您的应用程序时那样），浏览器将能够在您下次打开页面时激活新的服务工作者。

如果要强制新服务工作人员接管，可以将self.skipWaiting();添加到install事件中。 Here is some documentation with an example

您可以从this post by Jake Arichbald了解有关服务工作者生命周期的所有信息。

就缓存而言缓存管理，sw-toolbox等工具将为您处理缓存清理。实际上，Workbox是一种新工具，旨在取代sw-toolbox＆amp; SW-预缓存。它还将处理缓存清除和缓存管理（通过比较文件哈希和设置/跟踪资源到期日期）。

一般来说，您应该始终使用Workbox之类的工具来编写服务工作者。手写它们很容易出错，你很可能会错过角落的情况。

希望有所帮助。

P.S。如果您最终没有使用skipWaiting，而只是在页面关闭时更新＆amp;由用户重新打开，您仍然可以启用自动更新以进行开发。在Chrome的开发工具中，应用程序＆gt;服务工作者有重新加载更新选项，以自动更新服务工作者。

Answer 2

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

此处的最佳做法是为包含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;

    })
);

}）;

如何缓存胸围sw-toolbox？

2 个答案: