javascript

Question

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

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

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

我正在阅读有关 HTML5 Appcache 的信息。这似乎更适合无需服务器连接即可运行的应用程序。我认为这与从服务器更新 SPA 的资源（包括页面本身）无关。我对么？

score 1 · Accepted Answer

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

编辑

我阅读了您关于让用户在更新内容时继续使用该页面的评论，但我认为这非常危险......只显示通知告诉用户有更新会不会太糟糕，并推荐他/她重新加载页面？

否则，您将不得不撤消以前的脚本，例如从 DOM 元素中取消绑定事件。

您可以使用 jQuery 轻松取消绑定事件：如何使用 jquery 取消绑定所有事件这适用于一个 DOM 元素，您必须为页面中的每个 DOM 元素执行此操作。

score 1 · Accepted Answer

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

score 1 · Accepted Answer

当长轮询返回并且用户：

A.执行 ajax 请求

B.切换标签

C.在计时器期间处于非活动状态

您可以触发刷新。

这与在不妨碍用户或要求他们刷新页面的情况下更新单页应用程序一样接近。

score 1 · Accepted Answer

applicationCache在撰写本文时将是一个很好的选择，但它已被标记为已弃用，并且标准正在转向Service Workers，目前尚未得到广泛支持。

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

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

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

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

如果您选择选项 #1，那么您将订阅该updateready事件：

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

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

看：

javascript - 强制单页应用程序更新