Offline application that uses an appcache manifest file and localStorage for images and data.
JavaScript CSS PHP
Switch branches/tags
Nothing to show
Latest commit 0bf9a06 Jun 27, 2014 @chovy fix demo link
Failed to load latest commit information.
.htaccess first commit Oct 12, 2011 fix demo link Jun 27, 2014


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