Skip to content
mklabs edited this page Sep 29, 2011 · 7 revisions

Offline

There are a couple of interesting techniques that can be used to create web sites and applications that continue to work even if your internet connection goes offline. Making use of these techniques may also result in performance improvements. H5BP is in a great position to help you out with these..

The HTML5 Rocks Offline Tutorial lists the following technologies:

  • Application Cache
  • localStorage and sessionStorage
  • Web SQL Database (deprecated) & Indexed Database API
  • Online/Offline Events

Application Cache

Application Cache is probably the most useful one of these, since it can easily be applied to existing websites without much hassle.

As mentioned in A Beginner’s Guide to Using the Application Cache, using the appcache interface gives your application three advantages:

  • Offline browsing: users can navigate your full site when they’re offline;
  • Speed: cached resources are local, and therefore load faster;
  • Reduced server load: the browser will only download resources from the server that have changed.

The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they’re offline.

To enable appcache on a web page, all you need to do is reference a manifest file, like so:

<html manifest="manifest.appcache"></html>

However, H5BP's Build script can automate this for you. :)

Automated Offline Support via the Build Script

To enable the appcache, just uncomment the file.manifest line in the project.properties file. It'll create a manifest.appcache file and wire it all up.

Clone this wiki locally