How to force the client to refresh JavaScript files?

Keywords: Javascript PHP Django html5

We're currently working in a private beta, so we're still making fairly rapid changes, although obviously we'll slow down the process as usage increases. That said, one of the problems we encountered was that after the introduction of the new JavaScript file update, the client browser still uses the cached version of the file, and they can't see the update. Obviously, on the technical support phone, we can simply tell them to refresh with ctrl F5 to make sure they get the latest files from the server, but it's better to deal with them before that.

Our current idea is simply to attach the version number to the name of the JavaScript file, and then when making changes, increase the version on the script and update all references. This will certainly do the job, but updating the references on each release can be cumbersome.

Because I'm sure we're not the first to deal with this, I think I'll throw it to the community. When updating code, how do you ensure that clients update their cache? If you use the above method, are you using the process of simplifying changes?

#1 building

Although it is framework specific, Django 1.4 has This function , its working mode and In the above answers Links to the greenfelt site are similar

#2 building

In PHP:

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

In HTML:

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

How does this work

In HTML, write the file filepath and name as before, but only in functions. PHP gets the file of filetime and returns the latest changes of filepath+name+"?"+time

#3 building

For ASP.NET, I think the next solution with advanced options (debug / release mode, version):

Js or Css files included by:

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

Global.JsPostfix and Global.CssPostfix are calculated by the following methods in 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();
    }
    ...
}

#4 building

For ASP.NET pages, I am using the following

before

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

After (forced loading)

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

Adding DateTime.Now.Ticks works well.

#5 building

This usage has been deprecated: https : //developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

It's only six years late, but I can't see it in many places. HTML5 introduces the Application cache . I found that the new server code I was writing crashed the old javascript stored in people's browsers, so I wanted to find a way to expire their javascript. Use the following list file:

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

And generate the file with a new timestamp each time you want the user to update their cache. Incidentally, if this option is added, the browser will not reload until the manifest indicates it (even when the user refreshes the page).

Posted by shashiku on Wed, 08 Jan 2020 02:53:41 -0800