更改路线时在单页应用程序上更新 "service-worker.js"

Question

我有一个 create react app SPA，我已经用注册的 service-worker.js (Cache-Control: max-age=0)[=15 部署了它=]

一切正常：当我更新我的代码并重新部署时，离开我的站点（或关闭页面），然后 return 到我的站点, 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 的重新加载吗？

Answer 1

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

你可以这样做：

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

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

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

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

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

更改路线时在单页应用程序上更新 "service-worker.js"

Update "service-worker.js" on Single Page App when changing routes

reactjs

service-worker

react-router-v4