Make your web sites available for offline use with AppCache API

Sometimes it can be useful to make your web site available for offline use, although it’s better to make sure that your web site is always online this could be very handy in some scenarios. In this article I’ll shortly describe how to use one of HTML5 APIs – Application Cache API (AppCache API) so you can make a web application to be available to the users when disconnected.

appCacheDiagram.png
Photo taken from msdn.microsoft 

The AppCache API is made by two components:

  1. Manifest file
  2. JavaScript API to support it

Simple guide to AppCache Manifest

If you want to specify that your page should be available offline you can make that very easy, just by adding a simple attribute to the HTML element in the page.

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

With this we told the browser that we want this page to be available offline. Note that the manifest attribute must point to a manifest file and usually the extension is .appcache. In this manifest file we specify every file and resource that we want to be available for offline usage so the browser will know what should be downloaded locally so it can be used offline later.
The resource file has three sections: CACHE, NETWORK and FALLBACK. Example manifest file could look like this

CACHE MANIFEST
# Sample Web Application Cache Manifest
# v.1.0.0
#
#Cache Section. All Cached items.
CACHE:
/pages/home.html
/pages/offer.html
/pages/contact.html
/pages/about.html
#Required Network resources
NETWORK:
login.html
#Fallback items.
FALLBACK:
login.html fallback-login.html

CACHE MANIFEST – this must be the first line of the manifest file
CACHE – this section lists all the resources that will be available offline
NETWORK – this section declares all resources that MUST be available from the internet and these items can’t be cached. Here we should put everything that the page requires from the internet such as this party components.
FALLBACK – here we are providing fallback instructions to the browser in the event that an item isn’t available in the cache and the browser is in offline mode.

How to use the AppCache API

The Application Cache is available in JavaScript as a global object. This is an example how to get a reference to the AppCache global object:

var appCache = window.applicationCache;

One the first things you will want to do is to check the status of the caching and this can be achieved via the status property of the AppCache object. The status can have one of these properties:

appCacheStatusProperty.png

There are two methods that are available with the AppCache object

appCacheMethods.png

If you want to have more control on the caching process these are the events that are available

appCacheEvents.png

As a conclusion we can say that the making our site available offline is more a matter of configuration than programming.

See ya offline,

Jordan

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s