Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Offline application that uses an appcache manifest file and localStorage for images and data.
JavaScript CSS PHP
Branch: master
Failed to load latest commit information.
a relative ping path
.htaccess first commit fix demo link
ping.php first commit
stuff.htm add note about switch to offline mode
stuff.manifest update readme text


offline-app is an example offline web application. It uses an HTML5 manifest file for storing static files in the application cache along with localStorage.

There is an example cross-domain ajax request for image data (canvas does not support cross domain image loading) for loading images from a CDN for example. The image data string (base64 encoded) can then be stored in localStorage for offline use.

Because the navigator.onLine is not consistently supported and its behavior varies from browser to browser, there is a ping function that continuously polls a server side ping.php file to check if the connection has been lost.


You can unplug your network cable or turn off Airport (mac os) to simulate offline mode, and you should see the images and data being loaded from localStorage.


There are two functions doOffline() and doOnline() which get triggered whenever the user comes back online or goes offline. This can be used to read and write from localStorage or update a central server once they come back online.

You can switch to offline mode in Firefox, or simply unplug your network cable or turn off Airport (mac wifi). This will cause the static ping to fail and run the doOffline() function.


Modern browser (chrome, firefox, safari). Apache w/ PHP processing for .manifest files (see .htaccess)


To fully test the offline ping.php request, the site cannot be ran on localhost since it will not traverse the network and will always respond even if the network connection is take down.

In order for cross-domain image requests to work, the images need to be served with the following headers (see .htaccess):

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Something went wrong with that request. Please try again.