How to create offline HTML5 web apps in 5 easy steps

by Jean. 49 Comments -

Among all cool new features introduced by HTML5, the possibility of caching web pages for offline use is definitely one of my favorites. Today, I’m glad to show you how you can create a page that will be available for offline browsing.

Getting started

1 – Add HTML5 doctype

The first thing to do is create a valid HTML5 document. The HTML5 doctype is easier to remember than ones used for xhtml:

<!DOCTYPE html>
<html>
  ...

Create a file named index.html, or get the example files from my CSS3 media queries article to use as a basis for this tutorial.
In case you need it, the full HTML5 specs are available on the W3C website.

2 – Add .htaccess support

The file we’re going to create to cache our web page is called a manifest file. Before creating it, we first have to add a directive to the .htaccess file (assuming your server is Apache).

Open the .htaccess file, which is located on your website root, and add the following code:

AddType text/cache-manifest .manifest

This directive makes sure that every .manifest file is served as text/cache-manifest. If the file isn’t, then the whole manifest will have no effect and the page will not be available offline.

3 – Create the manifest file

Now, things are going to be more interesting as we create a manifest file. Create a new file and save it as offline.manifest. Then, paste the following code in it. I’ll explain it later.

CACHE MANIFEST
#This is a comment

CACHE
index.html
style.css
image.jpg
image-med.jpg
image-small.jpg
notre-dame.jpg

Right now, you have a perfectly working manifest file. The way it works is very simple: After the CACHE declaration, you have to list each files you want to make available offline. That’s enough for caching a simple web page like the one from my example, but HTML5 caching has other interesting possibilities.

For example, consider the following manifest file:

CACHE MANIFEST
#This is a comment

CACHE:
index.html
style.css

NETWORK:
search.php
login.php

FALLBACK:
/api offline.html

Like in the example manifest file, we have a CACHE declaration that caches index.html and style.css. But we also have the NETWORK declaration, which is used to specify files that shouldn’t be cached, such as a login page.

The last declaration is FALLBACK. This declaration allows you to redirect the user to a particular file (in this example, offline.html) if a resource (/api) isn’t available offline.

4 – Link your manifest file to the html document

Now, both your manifest file and your main html document are ready. The only thing you still have to do is to link the manifest file to the html document.

Doing this is easy: simply add the manifest attribute to the html element as shown below:

<html manifest="/offline.manifest">

5 – Test it

Once done, you’re ready to go. If you visit your index.html file with Firefox 3.5+, you should see a banner like this one:

Other browser I’ve tested (Chrome, Safari, Android and iPhone) do not warn about the file caching, and the file is automatically cached.

Below you’ll find the browser compatibility of this technique: As usual Internet Explorer does not support it.

  • IE: No support
  • Firefox: 3.5+
  • Safari: 4.0+
  • Chrome: 5.0+
  • Opera: 10.6+
  • iPhone: 2.1+
  • Android: 2.0+
  • http://www.planetmike.com Michael Clark

    So this would be useful for static pages (thinking brochure sites), but any page that requires interactivity wouldn’t work, correct? PHP scripts wouldn’t process, only the output would, the output that was generated at the time of initial browsing? Thanks for the information.

    • http://www.wprecipes.com Jean-Baptiste Jung

      Yes, of course this technique is only useful for static pages. If you use it on a PHP page, it will cache the output as it has been shown to the client at the time of initial browsing.

    • Bachsau

      You can use it with AJAX to create Apps.

      • http://erickribeiro.com.br/ Erick Ribeiro

        How? It don’t works with php? :(

  • http://www.ituts.gr Dimitris

    Im thinking to use it on my wp blog as a caching feature. Is it possible to tell the cache to clear after each post? What do you think?

    • http://wpchannel.com/ Aurélien Denis

      You should use a plugin instead… ;)

  • http://www.tisnado.com Victor T.

    Even IE9 don’t support this feature? Weird

    Nice article by the way.

  • http://HackTik.com HackTik

    Thanx for sharing this. Many google chromebook’s apps also based on html5, I think.

  • http://www.wendycockcroftwebdesign.com Wendy Cockcroft

    IE has been behind Firefox and the others for years because it’s the default browser on most computers.

    It might be an idea to mention the need to use other browsers to make that code work. I love the possibilities offered by HTML5, but IE is limiting its availability to users who won’t try other browsers.

    http://www.nirsoft.net/utils/ie_cache_viewer.htm is free and it might be worth including a link to that for IE users on pages to be made available for perusal offline.

    • http://www.graycelltech.com varinder

      Wendy Cockcroft you are 100% right ———Internet explorer development team need to take traning from firefox team

  • Stephen

    How does this work with cache expiry? What if I have files that when I go back online, can be updated?

    My experience with this is that it will always use the cached file. Not useful if I have javascript that is changing :/

  • http://www.focusfloors.com john

    Let me try this comment again after I have proof read my post:

    I can see some use in offline pages. I’m thinking specifically about products pages and the sort that you may need for offline use. I am also troubled by IE’s lack of support for standards… but that’s been true for a long time… their market share continues to slip… Does HTML 5 mark the end of IE?

    • http://www.wendycockcroftwebdesign.com/ Wendy Cockcroft

      Sadly, no. See this article for details. The bottom line is, because it’s the default browser in most PC’s, many people simply don’t fully understand what a browser is and are therefore unwilling to switch to another, and most people like to stick with what they’re used to, IE will remain the dominant browser.

      • http://www.wendycockcroftwebdesign.com/ Wendy Cockcroft

        Sorry, we can’t link stuff here. Ask me for the link to the article in question.

      • zardoz

        IE is no longer the dominant browser, so people do switch don’t they

    • http://www.wendycockcroftwebdesign.com/ Wendy Cockcroft

      Sorry, we can’t link stuff here. Email me for the link to the article in question.

  • Rickou

    nice article but I got trouble with FF 4: the images are load correctly when I’am online but when I’m offline the images are printed but disappear immediately. I did not find solution to fix this and don’t try with Chrome.

    Note: I use nginx as http server, but I don’t think this is the point

    anyone else with the same problem ?

    Rickou

    • http://www.wprecipes.com Jean-Baptiste Jung

      Sorry to hear that. I never had the problem, but never used nginx as well. Let me know if you ever find a solution!

  • http://www.ngotrung.com Trung

    Would I be able to transfer all my content via a wordpress theme to use html5. I’ve heard many great things about html5, but have yet to try it. Hope for the best.

  • http://webcreationtips.com/ Abe

    Nice article, thanks. As the others have already mentioned, I have problem with IE.

    • http://superdit.com aditia

      you can read comment up there IE still not supported this feature yet

  • http://4praise.com Russ

    I think that you could actually cache static pages with netscape 2.0 and in older browsers the default setting did cache them and they worked offline – but confusion ensued when cached versions prevented people from seeing updated versions on the server so modern browsers are smarter about it and some people put code into the pages to prevent caching.

    What I want to know more about is how html 5 can work the way that Google Gears does – actual database stuff working offline.

  • http://kaidez.com/ kaidez

    Great article, man! I have one quick question:

    Currently, iPhones will only cache files that are 25kb or lower. Will cache manifests override that limit or is the file size still limited to 25kb?

    Thanks in advance,
    kaidez

    • http://www.wprecipes.com Jean-Baptiste Jung

      Not 100% sure, but from my own tests, I’d say yes.

      • http://kaidez.com/ kaidez

        Awesome! thx!

        • http://webcreationtips.com/ Abe

          Thanks aditia, for the info.

  • Pakovski

    Nice article. But could you explain when it makes sense to use the NETWORK section? Any resources that are not listed in the CACHE section (and that don’t reference a manifest themselves) won’t be cached anyway. So in your example even if you did not put the two resources search.php and login.php in the NETWORK section they would not be cached.

  • http://blendwork.com silvi anggraini

    simple but useful, but can i get resource about storing data with database in html 5 web app?

  • paul bautista

    hi, is there another way where I could add mimetype without editing an .htaccess file? Since .htaccess is only available for apache server, what if i’m using a different server?

  • http://www.bestwebdesignkenya.com duncan gatawa

    I always dread the testing part.My main reason is because some times you build something that works great with one browser but bad in another.Sometimes finding the errors is quite a headache

  • http://varemenos.com/ Varemenos

    What i dont like about html5 caching is that firefox always promotes you to allow/deny store data for offline use which makes some members think the site might contain spyware and such

  • http://twitter.com/jitendravyas Jitendra Vyas

    Would it be good to doing for iphone while cache size is very limited on it?

    • http://kaidez.com/ kaidez

      My two cents: 100% yes, but try to keep the file sizes of all the components at 25.6KB or less.

      • http://twitter.com/jitendravyas Jitendra Vyas

        OK. But what to do in a condition when I’m using some files which are not hosted on my server

        In this condition how to make the apps offline

        • http://kaidez.com/ kaidez

          Technically speaking, you CAN list outside-hosted page elements in the CACHE section of cache manifest; however, since your page code is referencing these elements when it loads into a browser, they won’t load when the page is viewed offline.

          In this case, you create a secondary page that works offline and place it under the FALLBACK section of cache manifest. This page should be optimized as much as possible: minified code, CSS sprites, etc.

  • themitchy

    What’s your approach to updating cached resources? Since a cached resource won’t get updated until you update the applicationCache via javascript.

  • anand

    Can we prevent that message in pop like “abc site asking for caching page. do you want to cach page?”

  • http://circlecube.com Evan Mullins

    There’s actually a typo in this example code. I’ve gotten errors in trying to use the exact format, you need to add a colon to the line that states CACHE. It needs to read CACHE:

  • Alessio

    I’ve a problem with my HTC wildfire. I’ ve done a web app with html5 and manifest file that work correctly with Chrome, but when i open the web app with my mobile browser (i’ ve tried more browser) i receive first “checking event” and then “error event”. I checked of the apache server and send all the resoure correctly. How can i find the problem? thanks

  • http://www.wesleybenson.com Wes

    Perhaps a closer look at why it doesn’t work with IE needs to be considered. Is this W3C compliant code, or just a quick fix to get the ball rolling? MS has been working closely with the W3C on HTML5. IE9 should be well-suited for the task.

  • http://www.wesleybenson.com Wes

    *UPDATE* I checked on the IE9 compatability after I was able to get in front of a desktop and IE simply does not support this function. However, according to Stephen Walther (http://stephenwalther.com/archive/2011/01/26/creating-html5-offline-web-applications-with-asp-net.aspx) a website can be cached offline using ASP.NET. Not exactly the route we are looking for if we want to create “one app to rule them all” so to speak.

  • hasan

    Is there any way to cache all files in a folder. İ have too many images in images folder and it is to dificult to write all of them. is there any way to make easy it?

    Thank you.

    • Susan

      There is a script that will load all of the images into the manifest. Can’t find where I read it though…anyone out there?

  • http://www.brianballa.com Brian

    FYI – The “View demo” link isn’t working :)

  • http://www.jontetzlaff.com Jon Tetzlaff

    Can’t view the demo :(

  • http://erickribeiro.com.br/ Erick Ribeiro

    Please fix this article. The demo link is 404

  • http://www.bestcarpetvalue.com Bill

    Argg, After having many pages tiled on my screen I thought I found what I needed. I was looking for this exact solution this morning and now the demo doesn’t work. Hope to come back and see it working.

  • http://e-stonia.co.uk/blog Kaspar

    Next step would be to just have a mobile app that people can install and then it just takes all the info from URL where is mobile version of the website.

  • Reginald

    Hi,so what if i don’t want everything in my web site to operate with offline service , is

    there a way to do that ?