My small HTML5 app needs to be re-deployed on a server. I understood I only had to touch the .appcache file to have every browser update to the last version of the files upon next visit.
The manifest looks like this:
CACHE MANIFEST
#Version: 201209251353
index.html
apple-touch-icon.png
css/styles.css
data/dump.bin
img/background.png
img/sprites.png
js/core.js
js/jquery-1.8.1.min.js
vid/walkthrough.mov
To "touch", I added a comment (#Version:) which I mean to be updated any time the content changes.
Strangely, some files are updated. Not all, for isntance, a colleague gets the latest core.js, but still displays an old walkthrough.mov.
Is there a simple mechanism to force update all files from the cache?
I found the following code on SO and included it in the scripts, expecting it to help. Not sure how needful it is :(
// Application cache refresh
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
What expiry headers are you setting on your manifest and content?
If you've set (for example) the expiry on vid/walkthrough.mov to be one month in the future and that file is small enough to go in the browser cache (note: not the application cache) then the browser will refresh the application cache from the version in the browser cache rather than requesting it across the network again (if it's less than a month since it fetched the file).
If you've set a future expiry date on the manifest file then in some versions of some browsers this can cause an updated manifest not to be detected.