Skip to content
mathiasbynens edited this page Aug 10, 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.

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>

This is included by default in the HTML5 Boilerplate.

Clone this wiki locally