使用 Service Worker 反应应用程序 - 在新版本上强制更新浏览器缓存答案

【问题标题】：React application with Service Worker - Force update of browser cache on new version使用 Service Worker 反应应用程序 - 在新版本上强制更新浏览器缓存
【发布时间】：2020-12-01 11:22:45
【问题描述】：

我的应用程序是用 Reac / Redux 编写的，并使用 Workbox 来生成我的 Service Worker。这行得通 - 我可以在运行“workbox injection:manifest”时确认在生成的服务工作者中更新了修订版。

但是，我注意到客户端在新版本后不会更新缓存，新代码只会在几次刷新后加载。对于每个版本，我已确认修订版本已更新。

到目前为止，我尝试强制浏览器在新版本发布后清除缓存的方法是：

在我的 ServiceWorker 中实现了 skipWaiting() - 正确显示更新警报
添加了缓存标头以禁用 serviceWorker.js 和 css 文件的缓存（见下文）
为我在 Webpack 中的所有捆绑文件添加了 [contenthash]，并为每个版本相应地更新了 index.html

缓存头

<IfModule mod_headers.c>
  Header unset ETag
    
  <IfModule mod_alias.c>
    # disable browser cache for serviceWorker.js file
    <FilesMatch "^(serviceWorker.js)$">
      Header unset Expires
      Header set Cache-Control "max-age=0"
    </FilesMatch>
    
    <FilesMatch "\.(js|css)$">
      # cache for 24 hours = 86400 seconds
      Header set Cache-Control "max-age=86400, public, no-transform, must-revalidate"
    </FilesMatch>
  </IfModule>
</IfModule>

index.html

...
<body style="overflow: hidden">
    <div id="app"></div>
    <script src="/dist/main.bundle.aae6d2bb162cbee13899.js"></script>
    <script src="/dist/0.bundle.aaa837f16bb646266d99.js"></script>
    <script src="/dist/1.bundle.aa653fe9abbe232be599.js"></script>
    <script src="/dist/2.bundle.aa3096daabb2d428a899.js"></script>
    <script src="/dist/3.bundle.aa1650fc5bb4e1f1ea99.js"></script>
    <script src="/dist/4.bundle.aae80e50cbb06d5e5599.js"></script>
    <script src="/dist/5.bundle.aa1824b9ebb0cb931b99.js"></script>
    <noscript>
        Sorry, this page requires javascript!
     </noscript>
</body>
</html>

尽管有所有这些解决方案，该应用仍会缓存在所有经过测试的浏览器（FF、Chrome、Safari）和中的 PWA 中。缓存只会在一次或多次重新加载和/或硬重新加载后刷新。

我还验证了捆绑文件哈希已更改以在版本之间更新代码。

旧文件之前代码更新和部署示例

5.bundle.aa1824b9ebb0cb931b99.js

在代码更新和部署后的新文件示例

5.bundle.cae6d2bb162cbee138bc.js

index.html 中对捆绑文件的引用已使用新哈希更新，但浏览器仍尝试获取旧文件 - 导致致命错误 "ChunkLoadError: Loading chunk [n.oldHash] failed."。

我做错了吗？有没有其他方法可以强制浏览器（和 PWA）在新版本发布后刷新所有代码？

亲切的问候 /K

【问题讨论】：

标签： javascript reactjs caching service-worker workbox

【解决方案1】：

我遵循本文中提到的类似原则来清除我的缓存。我只是在 setInterval 上发出请求，而不是将应用程序包装在一个清晰的缓存 HOC 中。 https://dev.to/ammartinwala52/clear-cache-on-build-for-react-apps-1k8j 这个链接的文章也有一些很好的例子，值得一看。 https://dev.to/flexdinesh/cache-busting-a-react-app-22lk

不确定这是否是最好的方法，但它对我有用

【讨论】：

感谢您的回复！我将测试文章中描述的 HOC 方法！ (^___^)/

【解决方案2】：

有一个技巧可以集中现金，通过为每个新版本添加一个 get 参数，如下所示：

<script src="/dist/5.bundle.aa1824b9ebb0cb931b99.js?v=2"></script>

并不是每次部署都必须更改 v 的值（您可以自动化它）

【讨论】：

嗨！谢谢你的提示。 (^__^)/ 但是，即使文件哈希更改，浏览器也不会获取新文件。（？）我已经澄清了我的问题以反映这一点。亲切的问候/K