Service Worker 更新延迟

Question

我有一个正在运行的网络应用程序，它依靠服务工作者来检查所有缓存的文件并确保用户使用正确版本的应用程序。

我们的客户目前希望设备在特定时间点（重新打开应用程序时）等检查更新，因为目前当您打开应用程序时，设备可能需要长达 5 分钟的时间才能实现其过时的版本。

我是否可以强制设备检查 Service Worker 是否有任何新更改，而不是等待应用程序检查我？

谢谢！

Answer 1

为了即时更新您的软件，您应该改进两个要点。

不久

1. 也可以从比您的应用程序的索引页面更常访问的页面调用您的sw.js
2. 利用skipWaiting()方法立即激活您的软件。

详细

1) navigator.serviceWorker.register方法调用

您应该注意，更新版本的软件只能通过navigator.serviceWorker.register()调用进行检查。

通常register()方法只会在您的页面之一中调用。 如果是这种情况，您应该将该命令添加到您的所有页面。 因为如果用户只是在没有关闭 PWA 的情况下打开另一个应用程序，然后在 2 小时后返回到您的应用程序，他们将避开您的register()调用可能所在的应用程序的索引页面。

所以，我的建议是把它放在很多页上，如果不是每页的话。 缺点是客户会更多地调用sw.js 。 好处是客户端可以在不浪费时间的情况下检索最新版本的软件。

2) 激活 service worker

当 SW 不再有任何活动客户端时，将调用 Service Worker 的activate事件。 因此，只有在应用程序的每个实例关闭后才会激活新版本，并且刷新剩余的选项卡/重新打开一个选项卡。 请参阅MDN关于此事的引用：

..新版本已在后台安装，但尚未激活。 它仅在不再加载任何仍在使用旧服务工作者的页面时激活。 一旦不再加载此类页面，新的 Service Worker 就会激活。

解决这个问题的方法是将skipWaiting()方法与Clients.claim()结合使用

取自 MDN 的用法示例。 单击以在该页面上查看有关它的更多信息：

self.addEventListener('install', function(event) {
  event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', function(event) {
  event.waitUntil(self.clients.claim());
});

Answer 2

资产服务器上.htaccess到期指令

确保由资产服务器上的.htaccess文件设置的浏览器缓存到期指令设置为非常短的持续时间，甚至设置为无，如此处所述。 如果不这样做，将导致浏览器在一段时间内看不到manifest.json和service-worker.js中的任何更改。