更改路线时更新单页应用程序上的“service-worker.js”答案

【问题标题】：Update "service-worker.js" on Single Page App when changing routes更改路线时更新单页应用程序上的“service-worker.js”
【发布时间】：2018-04-03 00:54:23
【问题描述】：

我有一个 create react app SPA，并且我已使用注册的 service-worker.js 部署它（缓存控制：max-age=0）

一切正常：当我更新代码、重新部署、离开我的站点（或关闭页面）并返回我的站点时，service-worker.js 文件会再次下载.它缓存了我的 index.html 文件，其中包含我的 app.HASH.js 文件的 url。它通知我有新内容可用，我刷新浏览器页面，现在我正在运行最新的应用版本。

不起作用的是：当我导航到 SPA 中的不同部分时，我使用 react-router 来更改 URL。 “url-changes”不会触发我的 service-worker.js 文件的重新加载（它使用 max-age=0 缓存 - 我已经使用 curl -I 确认了这一点）。因此，永远不会下载新的工作人员来最终通知我有新内容可用并且我需要进行刷新。

我不确定预期的行为应该是什么。如果 react-router 更改了 URL - 当它设置为不缓存自身时，这是否应该不会触发 service-woker.js 的重新加载？

【问题讨论】：

标签： reactjs service-worker react-router-v4

【解决方案1】：

为了能够在用户使用您的应用时获得新版本的 SW.js 文件，您必须手动调用 ServiceWorkerRegistration.update()。

你可以这样做：

navigator.serviceWorker.getRegistrations()
  .then(registrationsArray => {
    registrationsArray[0].update();
  })

然后，您可以随时调用此代码！这会强制浏览器检查 SW.js 文件的更新，然后以您配置脚本的任何方式处理这种情况。

应该在您想要检查更新的任何地方进行此 update() 调用。您可以在每次 URL 更改/新路由访问后或每分钟一次或其他任何情况下调用它。由你决定。

查看 MDN 文档。它们还显示了用于存储对已注册软件的引用的参考代码，这使您可以直接调用更新。

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update

【讨论】：

你成功了——它工作得很好，谢谢。我设置了几分钟的间隔来调用以下命令：navigator.serviceWorker.ready.then(registration => { registration.update(); })