React应用程序与服务人员-强制更新新版本上的浏览器缓存
我的应用程序是用Reac/Redux编写的，并使用Workbox生成我的服务人员。这是有效的-我可以在运行“workbox inject:manifest”时确认在生成的service worker中更新了修订。
但是，我注意到客户端不会在新版本后更新缓存，新代码只会在几次刷新后加载。对于每个版本，我都确认更新了版本。
到目前为止，我尝试在新版本发布后强制浏览器清除缓存的方法有：
- 在我的ServiceWorker中实现skipWating（）-正确显示更新警报
- 添加了缓存头来禁用serviceWorker.js和css文件的缓存（见下文）
- 将[contenthash]添加到Webpack中的所有捆绑文件中，并相应地更新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>
指数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中缓存。缓存仅在一次或多次重新加载和/或硬重新加载后刷新。
我还验证了bundle文件散列在不同版本之间的更新代码中已经更改。
代码更新和部署前的旧文件示例
5.bundle.aa1824b9ebb0cb931b99.js
代码更新和部署后的新文件示例
5.bundle.cae6d2bb162cbee138bc.js
索引中的引用。捆绑文件的html已使用新哈希更新，但浏览器仍尝试获取旧文件-导致致命错误“ChunkLoadError:加载块[n.oldHash]失败。”
。
我做错了吗？有没有其他方法可以强制浏览器（和PWA）在新版本发布后刷新所有代码？
亲切的问候 /K
共有2个答案
我遵循了本文中提到的类似原则来清除我的缓存。我只是在setInterval上提出请求，而不是将应用程序包装在一个清晰的缓存HOC中。https://dev.to/ammartinwala52/clear-cache-on-build-for-react-apps-1k8j这篇链接到的文章也有一些很好的例子，这两者都值得一看。https://dev.to/flexdinesh/cache-busting-a-react-app-22lk
不确定这是否是最好的方法，但它对我有效
-
有一个问题，我们的一些用户有一个错误的服务工作者坐在他们的Facebook浏览器从我们的网站。 问题：Facebook App用户在访问我们在FB上共享的页面时，会在FB浏览器上看到我们的“您离线页面”。 错误似乎是旧版本的Google Workbox（3.6.1）使用Chrome75自动返回FB应用程序中的您离线页面。更新Workbox修复了它。 对Workbox的引用在service work
-
我试图弄清楚如何从Play商店强制更新最新版本。 由于我的android应用程序的旧版本已经在play store中，我还没有执行检查，以获取应用程序的当前版本，并与链接中指定的play store应用程序版本进行比较，请强制更新android应用程序 当我想上传新版本的代码时，他才可以使用新版本。 你能帮帮我吗？
-
我有一个应用在谷歌Play商店。当一个更新版本可用时，旧版本将变得不可用--也就是说，如果用户不更新app，他们就不在app中进入。当新版本可用时，我如何强制用户更新应用程序？
-
我一直在阅读《html5rocks服务工作者简介》一文，并创建了一个基本的服务工作者，它可以缓存页面、JS和CSS，并按预期工作： 当我对CSS进行更改时，由于服务人员正在从缓存中正确返回CSS，因此不会拾取此更改。 我陷入困境的地方是，如果我要更改HTML、JS或CSS，我如何确保服务人员可以从服务器加载较新版本，而不是从缓存加载？我曾尝试在CSS导入上使用版本戳，但似乎不起作用。
-
我已经实现了Workbox，以使用webpack生成我的服务人员。这非常有效-我可以确认，在运行（package.json:）时，已在生成的服务工作人员中更新了
-
情况： 在我的网站上。com/game，我在 在我的服务器上，的最大值为。 问题： 。 问题是，每当用户访问，它显示空页面，不再执行任何操作。我无法让客户端获取新的。 如何让客户端获取新的？