一页JavaScript应用程序和静态资源的缓存



我看过这个问题,我必须说它不适合我目前的问题/审讯。

场景:

用户成功登录(通过Ajax调用)后,他们被重定向(document.location.href)到/app,在那里基本HTML与CSS和JS文件一起发送。

问题:

目前正在将版本号放在我缩小的 javascript 和 css 文件名(如 appname-2.3.3)上.js并添加了一个查询字符串版本号以确保它在新版本上刷新,例如:

<script src="/js/app/appname-2.3.3-min.js?1207040740" language="javascript" type="text/javascript"></script>

当我推送新版本时,在新登录后,即使文件名和查询字符串编号发生变化,浏览器也会缓存最后一个版本。用户需要执行整页刷新 CTRL+F5 才能获取新的静态文件。

问题:

a) 确保每个新登录用户拥有正确版本的最佳方法是什么?我的猜测是/app HTML 页面是缓存的,也许我需要在登录后重定向时在那里放置一个查询字符串值。但这给我带来了一个问题,即调用登录方法的 javascript 文件必须是"正确"的版本等。

我是否应该在我的控制器中指示一个 HTTP 标头以告诉浏览器不要缓存/app 页面?这是否意味着没有从该页面缓存静态文件?

几乎每周左右都有新的更新,仍然需要缓存。

b) 从您的角度来看,提醒已经登录的用户新版本已更新并且他们应该刷新页面的良好用户体验方式是什么。从用户的感知来看,它是"可以接受"的吗?

作为参考,该应用基于 MVC 3 ASP.NET 构建。

感谢您的时间/投入

您可以使用

window.applicationCache来执行此操作。大多数人从问题的另一面想到应用程序缓存:如何在客户端上缓存数据?但是,当缓存清单文件更改时,它会更新CACHE部分中的所有文件,完全忽略任何服务器缓存。您还将获得客户端缓存的好处。

这样就无需版本号和查询字符串来尝试说服浏览器刷新。

manifest="cache.manifest"添加到<html>cache.manifest是用于定义要缓存的内容的文件的名称。它可以命名为任何东西,但我实际上称我的cache.manifest.

<html lang="en" manifest="cache.manifest">

然后,确保您的 Web 服务器将 MIME 类型设置为 .manifest

文本/缓存清单

然后创建一个名为 cache.manifest 的文件,将其放入您的应用程序根目录中。在"CACHE"部分下,放置要缓存(或在本例中为刷新)的文件。在NETWORK部分下放置您不想缓存的任何文件,或者只是*"其他所有内容"。

每次推送版本时,请更改缓存清单中的版本号。文件中的任何更改都可以,但版本号是完美的机制。

CACHE MANIFEST
#ver 1.0.0
CACHE:
app.html
app.css
app.js
NETWORK:
*

然后将其放在脚本的顶部,放入onload或等效项中。请注意,首次将其添加到代码中时,刷新不会在第一次更新时发生(因为此函数不可用),而是在第二次更新时发生。初始更新后,它将按预期工作。

function updateVersion( event ) {
    window.applicationCache.removeEventListener( 'updateready', updateVersion, false );
    if ( window.applicationCache.status == window.applicationCache.UPDATEREADY ) {
        //perhaps notify user here
        window.applicationCache.swapCache();
        window.location.reload();
    };
};
if ( window.applicationCache ) { 
    window.applicationCache.addEventListener( 'updateready', updateVersion, false ); 
};

最新更新