We are currently working in a private beta and so are still in the process of making fairly rapid changes, although obviously as usage is starting to ramp up, we will be slowing down this process. That being said, one issue we are running into is that after we push out an update with new JavaScript files, the client browsers still use the cached version of the file and they do not see the update. Obviously, on a support call, we can simply inform them to do a ctrlF5 refresh to ensure that they get the up-to-date files from the server, but it would be preferable to handle this before that time.

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

我确信我们不是第一个处理这个问题的人,我想我应该把它扔给社区。当你更新你的代码时,你如何确保客户端更新他们的缓存?如果您正在使用上面描述的方法,那么您使用的是简化更改的过程吗?


当前回答

jQuery函数getScript也可以用来确保每次页面加载时确实加载了js文件。

我是这样做的:

$(document).ready(function(){
    $.getScript("../data/playlist.js", function(data, textStatus, jqxhr){
         startProgram();
    });
});

请登录http://api.jquery.com/jQuery.getScript/查看该功能

默认情况下,$. getscript()将缓存设置设置为false。这将向请求URL附加一个带有时间戳的查询参数,以确保浏览器在每次请求脚本时都会下载脚本。

其他回答

前端的选择

我专门为那些不能更改后端任何设置的人编写了此代码。在这种情况下,防止超长缓存的最佳方法是:

new Date().getTime()

然而,对于大多数程序员来说,缓存可能需要几分钟或几个小时,所以上面的简单代码最终会迫使所有用户下载“所浏览的每个页面”。为了指定这个项目在不重新加载的情况下将保持多长时间,我编写了以下代码,并在下面留下了几个示例:

// cache-expires-after.js v1
function cacheExpiresAfter(delay = 1, prefix = '', suffix = '') { // seconds
    let now = new Date().getTime().toString();
    now = now.substring(now.length - 11, 10); // remove decades and milliseconds
    now = parseInt(now / delay).toString();
    return prefix + now + suffix;
};

// examples (of the delay argument):
// the value changes every 1 second
var cache = cacheExpiresAfter(1);
// see the sync
setInterval(function(){
    console.log(cacheExpiresAfter(1), new Date().getSeconds() + 's');
}, 1000);

// the value changes every 1 minute
var cache = cacheExpiresAfter(60);
// see the sync
setInterval(function(){
    console.log(cacheExpiresAfter(60), new Date().getMinutes() + 'm:' + new Date().getSeconds() + 's');
}, 1000);

// the value changes every 5 minutes
var cache = cacheExpiresAfter(60 * 5); // OR 300

// the value changes every 1 hour
var cache = cacheExpiresAfter(60 * 60); // OR 3600

// the value changes every 3 hours
var cache = cacheExpiresAfter(60 * 60 * 3); // OR 10800

// the value changes every 1 day
var cache = cacheExpiresAfter(60 * 60 * 24); // OR 86400

// usage example:
let head = document.head || document.getElementsByTagName('head')[0];
let script = document.createElement('script');
script.setAttribute('src', '//unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js' + cacheExpiresAfter(60 * 5, '?'));
head.append(script);

// this works?
let waitSwal = setInterval(function() {
    if (window.swal) {
        clearInterval(waitSwal);
        swal('Script successfully injected', script.outerHTML);
    };
}, 100);

这种用法已被弃用: https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

这个答案只晚了6年,但我在很多地方都没有看到这个答案……HTML5引入了应用程序缓存来解决这个问题。我发现我正在编写的新服务器代码正在破坏人们浏览器中存储的旧javascript,所以我想找到一种方法让他们的javascript过期。使用如下所示的清单文件:

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

并在每次您希望用户更新其缓存时,使用新的时间戳生成此文件。作为旁注,如果您添加了这个,浏览器将不会重新加载(即使当用户刷新页面时),直到清单告诉它。

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

Js或Css文件包括如下方式:

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

全球。JsPostfix和Global。在Global.asax中,CssPostfix的计算方法如下:

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();
    }
    ...
}

我的同事刚刚在http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/上发布了这个方法(参考css)。很高兴看到其他人在使用它,而且它似乎很有效。我假设在这一点上,没有更好的方法比查找-替换增量这些“版本号”在所有的脚本标签?

一种解决方案是在获取资源时,将包含时间戳的查询字符串附加到URL。这利用了浏览器不会缓存从包含查询字符串的url中获取的资源这一事实。

你可能不希望浏览器完全不缓存这些资源;更可能的情况是,您希望它们被缓存,但您希望浏览器在文件可用时获取该文件的新版本。

最常见的解决方案似乎是在文件名本身中嵌入时间戳或修订号。这是一个多一点的工作,因为你的代码需要修改请求正确的文件,但这意味着,例如版本7你的snazzy_javascript_file.js(即snazzy_javascript_file_7.js)被缓存在浏览器上,直到你发布版本8,然后你的代码改变获取snazzy_javascript_file_8.js。