CODEWITHSUNDEEP
c#javascriptasp.net-mvc
Dominic St-Pierre
Dominic St-Pierre

Reputation: 2459

One page javascript app and caching of static resources

I've look at this question and I must say that it does not fit my current problem(s) / interrogation.

Scenario:

After the user successfully login (via an Ajax call) they are redirected (document.location.href) to /app where the basic HTML is sent along with CSS and JS file.

Problems:

I'm currently putting the version number on my minified javascript and css filenames like appname-2.3.3.js and added a querystring version number to make sure it gets refreshed on new version ex:

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

When I push a new version, after a new login, even if the filename and the querystring numbers changes, the browser keep the last version cached. The user need to do a full page refresh CTRL+F5 to get the new static files.

Question:

a) What would be the best way of ensuring each new login user has the right version? My guess is that the /app HTML page is cache and maybe I would need to put a querystring value there when redirecting after the login. But that brings me to the problem that the javascript file that call the login method would have to be the "right" version etc, etc.

Should I indicate an HTTP header in my controller to tell the browser not to cache the /app page? Would that have the implication of having no static file cached from that page?

There is new update almost every week or so, caching is still required.

b) From your point of view, what would be a good user-experience way of alerting already logged-in user that a new version has been updated and that they should refresh their page. Is it something that is "acceptable" from a user's perceptive.

For reference, the app is built on ASP.NET MVC 3.

Thanks for your time / input

Upvotes: 0

Views: 504

Answers (1)

ThinkingStiff
ThinkingStiff

Reputation: 65351

You can use window.applicationCache to do this. Most people think of Application Cache from the opposite side of the problem: How can I cache data on the client? But when the cache manifest file changes, it updates all the files in the CACHE section, completely ignoring any server caching. You'll also get the benefit of client-side caching.

This eliminates the need for version numbers and query strings to try to convince your browser to refresh.

Add manifest="cache.manifest" to <html>. cache.manifest is the name of the file you'll use to define what to cache. It can be named anything, but I actually call mine cache.manifest.

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

Then make sure your web server has the MIME type for .manifest set to:

text/cache-manifest

Then create a file named cache.manifest, put it in your app root. Under the CACHE section, put the files you want cached (or in this case, refreshed). Under the NETWORK section put any files you don't want cached, or simply * for "everything else".

Every time you push a release, change the version number in your cache manifest. Any change in the file will work, but the version number is a perfect mechanism for this.

CACHE MANIFEST
#ver 1.0.0

CACHE:
app.html
app.css
app.js

NETWORK:
*

Then put this at the top of your script inside your onload or equivalent. Note that when you first add this to your code, the refresh won't happen on the first update (since this function isn't available), but on the second. After the initial update, it will work as expected.

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

Upvotes: 1

Related Questions