PWA 缓存问题

Question

我有一个在 ASP.net Core 中开发并托管在 Azure 应用服务 (Linux) 上的 PWA。

新版 PWA 发布时，我发现设备在不清除浏览器缓存的情况下无法更新。

为了解决这个问题，我发现了一个名为 asp-append-version 的标签助手，它可以清除特定文件的缓存。我还发现我可以附加指定文件 URL 的 src 属性的版本，以触发浏览器检索最新文件。例如，src="/scripts/pwa.js?v=1"。每次更新 pwa.js 文件时，我也会更改版本，即 v=2。

我现在发现我的 PWA 正在我的应用程序中缓存其他 JavaScript 文件，这导致该应用程序无法在已更新到新版本的设备上运行，但无法清除特定文件的缓存。

我相信如果我没有指定任何缓存控制标头（例如 Cache-Control），浏览器不会缓存任何文件，但事实并非如此。

要解决此问题，推荐的方法是添加适当的 Cache-Control 标头 （Cache-Control、Pragma 和 Expires） 以防止浏览器缓存，或者我应该只添加标签助手 asp-append-version 例如脚本标签以自动清除该特定文件的缓存？

我希望浏览器存储例如图像，而不是每次都去服务器检索这些图像。我相信设置标题 Cache-Control: no-cache 会起作用，因为这会在检索更新版本之前检查文件是否已更改？

谢谢。

Answer 1

感谢@SteveSandersonMS 的见解，在您的网络服务器返回正确的 HTTP 缓存控制标头时，浏览器将知道不要重用缓存的资源。

请参阅此处link 1 和link 2 以获取Linux app service 上的缓存控制标头

例如，如果您使用 Blazor WebAssembly 模板的“ASP.NET Core 托管”版本，服务器将返回 Cache-Control: no-cache 标头，这意味着浏览器将始终与服务器检查是否存在更新的内容（并且此使用 etags，因此如果自浏览器上次更新其内容以来没有任何变化，服务器将返回 304，意思是“继续使用您的缓存内容”。

如果您使用不同的 Web 服务器或服务，则需要配置 Web 服务器以返回正确的缓存标头。 Blazor WebAssembly 无法控制甚至影响它。

参考here