首页 文章

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

提问于
浏览
17

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

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

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

更新

我认为这可能与从服务器更新SPA的资源(包括页面本身)有关 . 我对么?

4 回答

  • 1

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

    EDIT

    我阅读了关于让用户继续使用该页面的评论,同时更新了一些内容,但我认为这非常危险...仅仅显示通知告诉用户有更新,并且推荐他/她重新加载页面?

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

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

  • 0

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

  • 1

    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 区域 .

    看到:

  • 1

    当长轮询返回时,您可以开始运行 timer ,如果用户:

    A. 执行ajax请求

    B. 切换标签

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

    您可以触发刷新 .

    这与更新单个页面应用程序的过程非常接近,无需用户的方式或要求他们刷新页面 .

相关问题