Question

对于单页应用程序，当部署到服务器的更新时，有哪些方法可以强制重新加载页面和/或JavaScript文件？

一种显而易见的方法是轮询一些服务器资源，以查看当前版本的应用程序是否在浏览器中运行，如果没有，则加载更新的资源。

我想知道是否有更普遍接受的方法可以使用特定的HTTP或DOM功能。

更新

我正在阅读HTML5 Appcache。这似乎更倾向于可以在不需要服务器连接的情况下运行的应用程序。我不认为这可能与从服务器更新SPA的资源（包括页面本身）相关。我是对的吗？

Answer 1

您可以使用long polling请求知道何时有更新而无需在特定时间间隔内执行请求，并且当长轮询请求返回时，您可以更新整个页面，因为旧的javascript文件和事件会绑定到DOM元素，因此重新加载页面会更容易。

修改

我阅读了关于让用户继续使用该页面的评论，同时更新了一些内容，但我认为这非常危险...仅仅显示通知告诉用户有更新是否太糟糕，并建议他/她重新加载页面？

否则，您必须撤消以前的脚本，例如从DOM元素解除绑定事件。

您可以使用jQuery轻松取消绑定事件：how to unbind all event using jquery 这适用于一个DOM元素，您必须为页面中的每个DOM元素执行此操作。

Answer 2

如果您使用的是.NET，则可以使用SignalR通知所有客户端更新，然后在客户端中触发重新加载。

Answer 3

在撰写本文时，

applicationCache将是一个很好的选择，但它已被标记为已弃用且标准正在转移到Service Workers，目前尚未广泛supported。

`applicationCache`

的一般策略

管理您使用所有资源的唯一哈希更新的单个文件
创建包含（假设的）静态资源的唯一缓存文件名PER RELEASE

我倾向于选项＃2，其中部署完全删除先前的缓存文件并将其替换为具有不同名称的缓存文件，这会触发您可以触发页面重新加载的obsolete事件。

的JavaScript

appCache.addEventListener('obsolete', handleCacheEvent, false);

function handleCacheEvent()
{
   // magic here ... prompt user, force reload, etc.
}

HTML

<html manifest="http://yoursite/appinfo.semver-here.mf">

如果您使用选项＃1，那么您将订阅updateready事件：

appCache.addEventListener('updateready', handleCacheEvent, false);

对于初学者，您可以制作通配符条目和/或将大部分资产标记为NETWORK资源，并在您感到舒服时逐渐将它们滚动到CACHE区域。

请参阅：

Answer 4

当long-poll返回时，您可以开始运行计时器，如果是用户：

A。执行ajax请求

B。切换标签

C。在计时器的持续时间内处于非活动状态

您可以触发刷新。

这与更新单个页面应用程序的过程非常接近，但没有按照用户的方式或要求他们刷新页面。

强制单个页面应用程序更新

更新

4 个答案:

`applicationCache`

的JavaScript

HTML