如何缓存胸围sw-toolbox？

Question

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

我的项目开始使用谷歌的服务工作者方法(链接).我看到的方式是你必须手动更新缓存清除的版本号.我也错了,但我不认为用户访问过的网页不会被缓存.

与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事件中.这是一些带有示例的文档.

您可以从Jake Arichbald的这篇文章中了解您需要了解的有关服务工作者生命周期的所有信息.

就缓存和缓存管理而言,像sw-toolbox这样的工具将为您处理缓存清除.实际上,Workbox是一种新工具,旨在取代sw-toolbox和sw-precache.它还将处理缓存清除和缓存管理(通过比较文件哈希和设置/跟踪资源到期日期).

一般来说,您应该始终使用像Workbox这样的工具来编写服务工作者.手写它们很容易出错,你可能会错过角落案例.

希望有所帮助.

PS如果您最终没有使用skipWaiting而只是在用户关闭并重新打开页面时进行更新,您仍然可以启用自动更新以进行开发.在Chrome的开发工具中," 应用程序">"服务工作者"具有"重新加载更新"选项,可自动更新服务工作者.