How to create offline HTML5 web apps in 5 easy steps

by Jean. 48 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+

Comments (48) - Leave yours

  1. Michael Clark said:

    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.

  2. Wendy Cockcroft said:

    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.

  3. Stephen said:

    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 :/

  4. john said:

    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?

  5. Rickou said:

    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

  6. Trung said:

    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.

  7. Russ said:

    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.

  8. kaidez said:

    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

  9. Pakovski said:

    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.

  10. paul bautista said:

    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?

  11. duncan gatawa said:

    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

  12. Varemenos said:

    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

        • kaidez said:

          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.

  13. themitchy said:

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

  14. Evan Mullins said:

    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:

  15. Alessio said:

    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

  16. Wes said:

    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.

  17. Wes said:

    *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.

  18. hasan said:

    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 said:

      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?

  19. Bill said:

    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.

  20. Kaspar said:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!