Quick Tip: Getting Offline Access with HTML5 Application Cache
Tutorial Details
- Topic: HTML5 Application Cache
- Format: 5 minute screencast
- Difficulty: Beginner
Download Source Files
Just when you thought you’d seen all the cool features of HTML5, I’m here to bring you yet another one. The internet is no longer about just websites; it’s about web applications. Often, our users are on portable or mobile devices, and they won’t always have access to a network. With HTML5’s Application Cache, you can provide them with all or some of the functionality they would have online, no matter where they go.
Subscribe to our YouTube page to watch all of the video tutorials!
Step 1: Make the Cache Manifest
The trick here is using a cache manifest file. In its most basic form, it’s incredibly simple:
CACHE MANIFEST # version 0.1 index.html style.css script.js preview.jpg
Step 2: Serve the Manifest Correctly
This file needs to be served with a content-type header of text/cache-manifest; it’s really simple to do this with a .htaccess file:
AddType text/cache-manifest manifest
This will serve all files with an extention of “manifest” with the appropriate content-type header.
Step 3: Hook the Manifest In
To use the cache manifest file, you simply add a property to the html element:
<!DOCTYPE html> <html lang="en" manifest="site.manifest"> <meta charset='utf-8'>
Now, the next time a user visits your site / app, their browser will cache the required files. It’s that easy. If they browse to your URL when they’re offline, they’ll get the cached content.
Caveat: Refreshing the Cache
It’s important to note that even when the user is online, the browser will only go to the server to get new content in three cases:
- The user clears their cache (obviously removing your content).
- The manifest file changes.
- The cache is updated via JavaScript
So, to force all your users to reload their cache, you can change something in the manifest file (not the files linked to, the actual content of the manifest file). Most of the time, you’ll probably just want to change a comment, and that will be enough.
If you want, build cache updating into your app via the JavaScript API; that’s beyond the scope of this quick tip, but if you want to learn more, check out this article at html5rocks.com.
Browser Support
Like a lot of other HTML5 features, the Application Cache is supported by all the modern browsers.
And that’s HTML5′s Application Cache; it’s pretty cool, and I’m sure it will be used by developers, of almost any site, to provide a gracefully degrading experience that keeps their users happy wherever they are. Thanks for reading!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Andrew Burgess
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Great write up! Say no to IE!
Umm Andrew, this is spilling all out over the main page, missed a markup tag or somethin’? ;)
Bookmarked, but I’m reading it now anyways!
good post thanks a lot
been looking for this for a while. This plus Sencha Mobile framework can be a good combo.
Thanks
Really interesting stuff. Even work w/o Apache running. Great.
Nice write-up. For a bit more in-depth detail and also an example, check out using the cache manifest to work offline.
Thank you for the video.
Few questions though:
1. I can’t cache the entire webapplication since it has too much server code, but only a part of it. How to best show the distinction to the user: i.e. what part work and what part does not without making the user to get “not found” pages? E.g. the links that show to those part of the app or to those actions that can’t be cached to be disabled somehow in offline mode?
2. if the offline mode is several minutes long (not just a few seconds), it’s important to show somehow that the webapp is offline – e.g. a message in the corner, but how to achieve this? since there doesn’t seems to be any distinction between offline and online.
You could use jquery to try and get a file from the server that isnt cached and if it fails then its offline, i dont know that was just off the top of my head.
Cool concept. Are there any examples of something like this working in the wild?
I think this is a very nice example http://everytimezone.com/ works like an app on my iPhone
Hi, nice tut.
Any workarounds for the first loading after changes in page have been made?
Anyway to detect if there were changes then reload the page automatically?
Cheerz.
Nice tut, you helped me out a lot
hmmm!!! Good Concept….Thanks!!
Learned.Thanks!
I want to learn HTML5. But it seems a little different from HTML4.
The code just lost it’s weight.
This is a great tutorial,but how can I have it update dynamically? Say, i have a new blog post and want to cache it.
Hi ,
Thanks for the nice quick tip , but i think the idea of forcing the user to refresh the page ” Refreshing the Cache” is not handy
after some searching i had found good idea in an Oreilly HTML5 Up and Running [page 142]
http://oreilly.com/catalog/9780596806033
After all resources listed in the cache manifest have been redownloaded successfully,
the browser will fire one final event, updateready. This is your signal that the
new version of your offline web application is fully cached and ready to be used
offline. The new version is not yet in use. To “hot-swap” to the new version without
forcing the user to reload the page, you can manually call the window.applicationC
ache.swapCache() function
window.applicationCache.swapCache() ;
I hope you found this informative
thanks
tawfekov
Awesome Tut!
What up with IE? Seriously. Do they notice that everyone else is jumping on board with making their browsers exceptionally user friendly, or do they have their heads stuck so far in their own sandbox that they can’t see what is going on? Looks like someone is getting left behind.
I would rather not have to think about whether or not IE supports this feature or that one anymore.
Thanks again for the tutorial. I’m liking where HTML5 is taking us.
Very clear and quick explanation! Thanks!
Lets be honest its not there yet… look at remy’s example http://html5demos.com/offlineapp
When you first hit the page you see the sash image tag at the top left (and if you look at the google analytics _gat variable in console they’re both there)
Reload the page in either Chrome6, or FF3.6/4.0 and all the “online” content has gone. The sash has gone (might need to F5 a few times to get rid of it) and the _gat variable has gone. But my internet connection is still running.
Whats going on? Gracefully degrading prematurely wasn’t what i expected.
I can’t see anyone else mention this…. and i’ve wasted a day wondering why.
I am having the exact same problem. If files aren’t in the cache they wont be loaded unless I remove the cache.
Can anyone make sense of why websites only works off caching even when you are online?
Nice! thanks for sharing.
thanks for the tutorial – undoubtedly a great resource that i haven’t really seen covered in depth in a lot of other places.
2 questions:
1. The manifest attribute for the HTML file – here, it is site.manifest, and I’ve seen cache.manifest. Does it matter? Is there a difference between the two?
2. I’m using XAMPP and currently don’t have an .htaccess file. Is there another place I could go to add the type?
Thanks!
sorry – figured it out by just watching the video. Everything makes sense now. Thanks!
Nice article. It’s great to see it’s possible to access content oflline.
But, is it possible to access video content with the manifest? I’ve read somewhere that it ain’t supported yet?
Cool bananas, this is extremely awesome.
Thanks, lots of help. Great article.