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.
Photo taken from msdn.microsoft
The AppCache API is made by two components:
- Manifest file
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
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:
There are two methods that are available with the AppCache object
If you want to have more control on the caching process these are the events that are available
As a conclusion we can say that the making our site available offline is more a matter of configuration than programming.
See ya offline,