-
Notifications
You must be signed in to change notification settings - Fork 82
Using Appcache
Tony Arkles edited this page Oct 11, 2013
·
1 revision
Today I'm working on a project that benefits from having AppCache set up (so that it can be used from a mobile browser without an Internet connection). Here's how I set it up:
I added this to the devDependencies section of package.json:
"grunt-manifest": "*",
I added this to config/application.js:
loadNpmTasks: ['grunt-manifest'],
appendTasks: {
common: ['manifest']
},
manifest: {
generate: {
options: {
basePath: 'generated/'
},
src: [
'**/*.js',
'**/*.png',
'**/*.jpg',
'**/*.css'
],
dest: 'generated/manifest.appcache'
}
},
watch: {
manifest: {
files: 'generated/**/!(manifest.appcache)',
tasks: ['manifest']
}
}
Now when files get updated in the generated/ directory, a manifest.appcache gets generated.
Finally, I added this into my index.us:
<html manifest="manifest.appcache">
I also added this little snippet to index.us, courtesy of http://www.html5rocks.com/en/tutorials/appcache/beginner/:
// Check if a new cache is available on page load.
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);