渐进式网络应用程序：更新 sw.js 单页应用程序

Question

所以我们正在构建一个渐进式 Web 应用程序，当然我们正在使用很棒的服务工作者。

每当我们发布新版本的应用程序时，我们都会更新 sw.js 文件中的版本号。在页面加载时，浏览器检测到 sw.js 已更改并触发 "install" 和 "activate" 事件，这反过来缓存正确的资源以供离线使用。

效果很好。但据我了解，它只会在 页面加载 时触发。因此，如果用户将应用程序添加到他们的主屏幕并始终使用此快捷方式访问该应用程序，则 "refresh" 事件不会经常触发，因此这些用户不会像他们那样经常看到更新使用非 SPA 网络应用程序。

所以我的问题是您将如何更新使用 sw.js 作为更新过程的单页渐进式 Web 应用程序？

我想到了几个解决方案，其中包括超时查询服务器以搜索新版本并将其与本地等进行比较。但这似乎有点奇怪..

Answer 1

检查 sw.js 的新版本发生在 every navigation request 服务工作者范围内的页面上。所以你是对的，如果 SPA 无限期保持打开状态，并且没有 "real" 导航发生，则不会检查 sw.js 更新。

由于大多数浏览器最终会从内存中卸载后台页面然后重新加载它们这一事实在一定程度上缓解了这一点 if/when 您将它们带回前台。但这不是您可以指望的确定性事情。

您可以使用 ServiceWorkerRegistration.update() 方法强制浏览器检查 sw.js 的更新，就像有导航时一样。

由您决定调用该方法的频率。如果您想匹配 "real" 导航的行为，您可以执行以下操作：

function spaNavigate(url) {
  // Do what you'd normally do to update page content,
  // use the History API to change the location to `url`, etc.

  // Then, force a service worker update check:
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(function(registration) {
      registration.update();
    });
  }
}

渐进式网络应用程序：更新 sw.js 单页应用程序

Progressive web apps: Update sw.js on Single Page Applications

service-worker

progressive-web-apps