Question

我有创建反应应用 SPA，我已使用已注册的service-worker.js（Cache-Control：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？

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”

1 个答案: