如何强制客户端刷新JavaScript文件？

Question

我们目前正在进行私人测试,因此仍然在进行相当快速的更改,尽管显然随着使用量开始增加,我们将放慢这一过程.话虽这么说,我们遇到的一个问题是,在我们用新的JavaScript文件推出更新之后,客户端浏览器仍然使用文件的缓存版本,但他们看不到更新.显然,在支持调用上,我们可以简单地通知他们进行ctrlF5刷新以确保他们从服务器获取最新文件,但最好在此之前处理它.

我们当前的想法是简单地将版本号附加到JavaScript文件的名称上,然后在进行更改时,增加脚本上的版本并更新所有引用.这绝对可以完成工作,但更新每个版本的引用可能会变得很麻烦.

我确信我们不是第一个处理这个问题的人,我想我会把它扔给社区.在更新代码时,如何确保客户更新缓存？如果您使用上述方法,您是否正在使用简化更改的流程？

Answer 1

据我所知,一个常见的解决方案是?<version>在脚本的src链接中添加一个.

例如:

<script type="text/javascript" src="myfile.js?1500"></script>

我假设在这一点上,没有比find-replace更好的方法来增加所有脚本标签中的这些"版本号"？

你可能有一个版本控制系统为你做这个吗？大多数版本控制系统都有办法在登记时自动注入修订号.

它看起来像这样:

<script type="text/javascript" src="myfile.js?$$REVISION$$"></script>

当然,总会有像这样的更好的解决方案.

Answer 2

将当前时间附加到URL确实是一种常见的解决方案.但是,如果需要,您还可以在Web服务器级别进行管理.可以将服务器配置为为javascript文件发送不同的HTTP标头.

例如,要强制将文件缓存不超过1天,您将发送:

Cache-Control: max-age=86400, must-revalidate

对于测试版,如果您想强制用户始终获取最新信息,您可以使用:

Cache-Control: no-cache, must-revalidate

Answer 3

Google Page-Speed:不要在URL中包含静态资源的查询字符串.大多数代理,最着名的是Squid从版本3.0开始,不会使用"？"来缓存资源.即使响应中存在Cache-control:public标头,也会在其URL中显示.要为这些资源启用代理缓存,请从对静态资源的引用中删除查询字符串,而是将参数编码为文件名本身.

在这种情况下,你可以包含版本为URL例如:http://abc.com/ V1.2 /script.js和使用Apache的mod_rewrite重定向链接http://abc.com/script.js.更改版本时,客户端浏览器将更新新文件.

Answer 4

此用法已被删除:https: //developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

这个答案仅晚了6年,但我在很多地方都没有看到这个答案...... HTML5引入了用于解决这个问题的Application Cache.我发现我写的新服务器代码正在崩溃存储在人们浏览器中的旧javascript,所以我想找到一种方法来使他们的javascript过期.使用如下所示的清单文件:

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

每次希望用户更新其缓存时,都会生成带有新时间戳的文件.作为旁注,如果你添加它,浏览器将不会重新加载(即使用户刷新页面),直到清单告诉它.

Answer 5

如何将filesize添加为加载参数？

<script type='text/javascript' src='path/to/file/mylibrary.js?filever=<?=filesize('path/to/file/mylibrary.js')?>'></script>

因此,每次更新文件时,"filever"参数都会更改.

更新文件和更新结果的文件大小相同时怎么样？有什么可能性？

Answer 6

并非所有浏览器都使用"？"缓存文件 在里面.我做了什么来确保它尽可能地被缓存,我在文件名中包含了该版本.

所以不是stuff.js?123,我做了stuff_123.js

我用mod_redirect(我认为)在apache have stuff_*.js中去stuff.js

Answer 7

对于ASP.NET页面,我使用以下内容

之前

<script src="/Scripts/pages/common.js" type="text/javascript"></script>

之后(强制重装)

<script src="/Scripts/pages/common.js?ver<%=DateTime.Now.Ticks.ToString()%>" type="text/javascript"></script>

添加DateTime.Now.Ticks非常有效.

Answer 8

现在的普遍做法是生成内容哈希码作为文件名的一部分，以强制浏览器特别是 IE 重新加载 javascript 文件或 css 文件。

例如，

小贩。a7561fb0e9a071baadb9 .js
主。b746e3eb72875af2caa9 .js

它通常是 webpack 等构建工具的工作。如果有人想尝试使用 webpack，这里有更多详细信息。

Answer 9

如果您正在生成链接到 JS 文件的页面，一个简单的解决方案是将文件的最后修改时间戳附加到生成的链接。

这与 Huppie 的答案非常相似，但适用于没有关键字替换的版本控制系统。这也比附加当前时间更好，因为即使文件根本没有更改，也会阻止缓存。

Answer 10

对于ASP.NET,我认为下一个解决方案具有高级选项(调试/发布模式,版本):

通过这种方式包含的Js或Css文件:

<script type="text/javascript" src="Scripts/exampleScript<%=Global.JsPostfix%>" />
<link rel="stylesheet" type="text/css" href="Css/exampleCss<%=Global.CssPostfix%>" />

Global.JsPostfix和Global.CssPostfix在Global.asax中通过以下方式计算:

protected void Application_Start(object sender, EventArgs e)
{
    ...
    string jsVersion = ConfigurationManager.AppSettings["JsVersion"];
    bool updateEveryAppStart = Convert.ToBoolean(ConfigurationManager.AppSettings["UpdateJsEveryAppStart"]);
    int buildNumber = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.Revision;
    JsPostfix = "";
#if !DEBUG
    JsPostfix += ".min";
#endif      
    JsPostfix += ".js?" + jsVersion + "_" + buildNumber;
    if (updateEveryAppStart)
    {
        Random rand = new Random();
        JsPosfix += "_" + rand.Next();
    }
    ...
}

Answer 11

在PHP 中：

function latest_version($file_name){
    echo $file_name."?".filemtime($_SERVER['DOCUMENT_ROOT'] .$file_name);
}

在HTML 中：

<script type="text/javascript" src="<?php latest_version('/a-o/javascript/almanacka.js'); ?>">< /script>

这个怎么运作：

在 HTML 中，filepath按照您的习惯编写和 名称，但仅在函数中。PHP 获取filetime文件的 并返回filepath+name+"?"+time最新更改的

Answer 12

我们一直在为用户创建 SaaS 并为他们提供一个脚本以附加到他们的网站页面中，并且无法附加带有脚本的版本，因为用户会将脚本附加到他们的网站以获得功能，我不能强迫他们每次更新脚本时更改版本

因此，我们找到了一种每次用户调用原始脚本时加载新版本脚本的方法

提供给用户的脚本链接

<script src="https://thesaasdomain.com/somejsfile.js" data-ut="user_token"></script>

脚本文件

if($('script[src^="https://thesaasdomain.com/somejsfile.js?"]').length !== 0) {
   init();
} else {
   loadScript("https://thesaasdomain.com/somejsfile.js?" + guid());
}

var loadscript = function(scriptURL) {
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = scriptURL;
   head.appendChild(script);
}

var guid = function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

var init = function() {
    // our main code
}

解释：

用户已经在他们的网站上附加了提供给他们的脚本，我们检查了脚本附带的唯一令牌是否存在或不使用 jQuery 选择器，如果没有，则使用更新的令牌（或版本）动态加载它

这是两次调用相同的脚本，这可能是一个性能问题，但它确实解决了强制脚本不从缓存加载的问题，而无需将版本放入提供给用户或客户端的实际脚本链接中

免责声明：如果性能对您来说是一个大问题，请不要使用。