单页应用程序发布/更新后如何回发到服务器

Question

我有一个 SPA Angular 网站。每当我们发布对网站的更改时，用户的浏览器都不会返回服务器来获取新的 javascript 文件。该应用程序愉快地继续在用户的浏览器中运行，虽然它会对数据进行 ajax 调用，但 javascript 文件不会更改。如果调用的后端 API 的签名发生更改等，这可能会导致错误。如果用户刷新页面，他们会获得更新的 javascript 文件，之后一切正常。

有没有办法告诉浏览器网站已经更新并获取新的 javascript 文件，而不是仅仅使用相同的文件运行应用程序？

我使用 Angular CLI 来构建应用程序，因此当网站发布时，javascript 文件在末尾有哈希值等。这不是文件被缓存而不是更新的问题......这是一个问题浏览器知道它需要请求文件或刷新页面。

Answer 1

您可以使用web workers 轮询服务器以获取更改并在发现更改时刷新浏览器。

Web Worker 的替代方法是使用 setInteterval，在给定时间后刷新。

另一种选择是在您的 API 响应中包含一个版本号，当版本号不同步时，JavaScript 处理程序会刷新页面。

Answer 2

你可以用你的 Angular 代码编写一个程序：

1. 定期检查 api 的版本是否进行了更改
2. 定期检查以确定用户何时空闲以及用户何时不在带有脏字段的编辑页面中。
3. 满足第 2 步条件时刷新页面

使用这个库来观察空闲 https://github.com/shawnmclean/Idle.js

Answer 3

如果更新的文件具有接缝名称，请在“？”之后添加此文本像“?ver1.1”这样的假设是告诉浏览器有一个新版本的文件。

你可以使用清单文件 https://html.spec.whatwg.org/multipage/offline.html#manifests

另一种方法是使用

CacheStorage,clear()