Quick Tip: Getting Offline Access with HTML5 Application Cache
videos

Quick Tip: Getting Offline Access with HTML5 Application Cache

on Sep 2nd 2010 with 30 comments
Tutorial Details
  • Topic: HTML5 Application Cache
  • Format: 5 minute screencast
  • Difficulty: Beginner
Download Source Files
This entry is part 11 of 14 in the HTML5 and You Session
« PreviousNext »

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.

Premium Members: Download this Video ( Must be logged in)

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:

  1. The user clears their cache (obviously removing your content).
  2. The manifest file changes.
  3. 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.


Chart from www.findmebyip.com

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

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a Canadian web developer, a staff writer at Nettuts+, and the author of the Rockable Press eBook Getting Good With Git. I prefer JavaScript and Ruby. Soon, I'll be doing some writing on my personal site; of course, you can follow me on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.wordimpressed.com/ Devin Walker

    Great write up! Say no to IE!

  • Damon Bridges

    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!

  • http://laroouse.com esranull

    good post thanks a lot

  • http://ivansotof.com Ivan Soto

    been looking for this for a while. This plus Sencha Mobile framework can be a good combo.

    Thanks

  • http://www.codeforest.net/ Codeforest

    Really interesting stuff. Even work w/o Apache running. Great.

  • http://www.html5laboratory.com Ian

    Nice write-up. For a bit more in-depth detail and also an example, check out using the cache manifest to work offline.

  • A. Ionescu

    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.

    • andrei

      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.

  • http://www.aediscreative.com Christopher

    Cool concept. Are there any examples of something like this working in the wild?

  • Joao Lopes

    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.

  • http://google.de xTx

    Nice tut, you helped me out a lot

  • http://www.websolpk.com imran khan

    hmmm!!! Good Concept….Thanks!!

  • higherzl

    Learned.Thanks!

  • http://www.silverjewelryworld.com Christmas Day Gifts

    I want to learn HTML5. But it seems a little different from HTML4.
    The code just lost it’s weight.

  • http://zackify.net Zach

    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.

  • http://dagho.com/wp tawfekov

    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

  • http://www.thenoisiv.com Jordan

    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.

  • http://codebazaar.blogspot.com/ Matthias Buchner

    Very clear and quick explanation! Thanks!

  • http://drew81.com Drew

    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.

    • Jeremy Haber

      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?

  • Sherlack

    Nice! thanks for sharing.

  • http://whatwhatnow.com dchang

    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!

    • dchang

      sorry – figured it out by just watching the video. Everything makes sense now. Thanks!

  • Marcelo

    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?

  • Thulani Msibi

    Cool bananas, this is extremely awesome.

  • David

    Thanks, lots of help. Great article.

  • karthick

    Hi…Please help.

    Please let me know where I can find the .htaccess file in apache tomcat 6.0. I’m not able to find it in my machine and Can I create one. If so, where should I place it. Can the .htaccess file contain this1 line alone(AddType text/cache-manifest manifest )…..

  • http://www.saeedxpicher.wordpress.com Saeed Spicher

    Thank you Andrew This is Awesome.

  • http://www.facebook.com/mittul.chauhan Mittul Chauhan

    hmm .. nice feature .. but only one problem .. without putting the filename into cache .. it wont work even though you are online .. that should not be happened .. if this fixed in next releases .. it would definitely awesome to use for my future projects .