如何防止 index.html 在 Angular 10 中缓存和显示 old.js 文件？

Question

虽然有很多类似的问题，但没有一个能解决我的问题。 我有一个 web 服务器正在运行，它需要每天进行新的构建，因此许多内容都会定期更改。 但是每当我部署任何新的构建版本时，浏览器都会缓存旧的 index.html 和旧的 js、css 文件。 因此，尽管添加到代码中，但客户端甚至看不到更新的更改，这非常令人沮丧。 我已经添加了http-equiv="cache-control" content="no-cache, no-store, must-revalidate"但对我不起作用注意- 只有一种解决方法，即如果我从浏览器手动禁用缓存，即使如果我多次刷新页面，浏览器会显示较旧的 index.html 文件

请让我知道我是否需要做任何事情-

索引.html

 <,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular</title> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1"> <base href="/"> <link rel="stylesheet" href="styles.13f59921f8d74cebb499.css"></head> <body> <script src="assets/js/moment.js"></script> <script src="assets/js/moment-timezone.js"></script> <app-root></app-root> <script src="runtime.7d4733d55376630cf00a.js" defer></script><script src="polyfills-es5.950ea5f001d77cff122d.js" nomodule defer></script><script src="polyfills.05dd00906ab9ae4ef80e.js" defer></script><script src="main.3490618dde062e2d93a4.js" defer></script></body> </html>

Angular 版本 - Angular 版本

Answer 1

您将需要更新缓存 - 对于Service Worker来说是一项好工作。 在您的项目中实施一个。 https://blog.angular-university.io/angular-service-worker/实现它之后，您可以访问SwUpdate以及实现一个（PWA 的东西）附带的所有其他好东西。

一旦您获得更新，就会发生新的构建，并且新的 ngsw.json 在部署新版本后首次应用程序重新加载可用 - Angular Service Worker 检测到新的 ngsw.Z466DEEC76ECDF5FCA6D38571F6324D 在后台重新加载任何新文件后重新加载任何新文件版本部署 - 用户看到新版本，此行为将始终如一地工作，与用户打开了多少选项卡无关（与标准 Service Worker 生命周期发生的情况不同）。

发布新版本时也不要忘记更新package.json版本号。