Thursday, 9 May 2013

HTML5 - Application Cache


No Internet Connection.. what to do?

Hey, how about users accessing your web application though they are offline? Interesting huh? Okay, how about requests are hitting your server only for a resource which has got changed? You can achieve all these things by using an HTML5 feature called Application Cache and a majority of browser vendors are introducing it.

What is an Offline Web Application?

If you ask this question to a computer student, the answer would be, an offline web application can be defined as a web application which can be accessed offline using a technique called application cache :)

Ohkay.. So what is Application Cache?

An application cache is a collection of resources. The resource can be anything such as HTMLCSS, JavaScript, images or any other kind of resource

Agreed. But how does it enable offline browsing?

Do not expect a magic! Offline web application works only if the user has visited that application at least once.  At its simplest, an offline web application is a collection of resources. An application cache is identified by the URI of a resource manifest which is used to populate the cache.  The Application Cache allows a web developer to specify the resources which are to be cached by the browser and make available to offline users. A cached application will be available to the users even if they refresh the screen when they are offline.

Get started!

Okay. This is what you have to do to allow caching of a page.

appcache.html

<html manifest="test.manifest">
<body>
   <img alt="Image1" src="image/slider/image1.jpg" style="height:100px;width:100px;">
   <img alt="Image2" src="image/slider/image2.jpg" style="height:100px;width:100px;">
</body>
</html>
As you have noticed, above html has 2 images in it. And an attribute named ‘manifest’ is defined in html tag. The value of manifest attribute should actually point to a manifest file from which the browser gets the details on required resources to be cached.

The Cache Manifest File

A manifest file can be located anywhere in the web server. But make sure that is is served using the text/cache-manifest MIME type.
If your  web server is Apache, you can probably put an AddType entry in httpd.conf file.
AddType text/cache-manifest .manifest

test.manifest

CACHE MANIFEST
# 2012-09-02 version : 1.0
image/slider/image1.jpg
NETWORK:
*
FALLBACK:
/test /offlineTest.html
/dummy /offlineDummy.html
The first line of an application cache manifest must consist of the string “CACHE MANIFEST”. And following lines can be any of the following.
  • Comment
         Lines starting with a ‘#’ are comment lines.
  • Section header
         There are 3 possible section headers.

          CACHE: (Explicit section)

Files listed under the header ‘CACHE’ or listed directly under the line ‘CACHE MANIFEST’ will be downloaded and cached locally. Next time onward whenever that particular resource is accessed, browser will fetch it from local cache. This is applicable even when user is offline. So as per my test.manifest file, when appcache.html loads, browser downloads image1.jpg and contacts.html. And unless cache is updated (which I will explain later), the browser will serve these resources from the cache.

          NETWORK: (Online whitelist)

Files listed under this section are white-listed resources which are never cached and not available when user is offline. A wild card (*) in whitelist tells the browser to whitelist all other resources except explicitly defined resources.

          FALLBACK:

As the header name says, here you define the fallback files. The first part is URI pattern and second part is fallback file. In the example, I used 2 different URI patterns  ’test’ and ‘dummy’ and fallback files are defined for each of them. You can easily test fallback files by defining a URI pattern, which is not present in your application, in manifest. Once the manifest file is loaded, simply navigate to that URI pattern. Browser will open the corresponding offline file. 
          Manifests may contain sections more than once. Sections may be empty.

How to update the Cache?

Once an application is cached, it remains unchanged (both online and offline). You can update it by doing any of the following things.
1. Clear browser cache.
  • After loading appcache.html for the first time, remove image1.jpg from webserver and refresh the page. You can still see the image.
  • Now clear the browser cache and refresh. See the result!
2. Update manifest file.
  • After loading appcache.html for the first time, remove image1.jpg from webserver and refresh the page. You can still see the image
  • Now update manifest file. Lets say, add an entry for image2.jpg in CACHE section and refresh the page. See what happens!
3. Programmatically edit application cache.
Let’s take a look at Application Cache API.
interface ApplicationCache {

  // update status
  const unsigned short UNCACHED = 0;
  const unsigned short IDLE = 1;
  const unsigned short CHECKING = 2;
  const unsigned short DOWNLOADING = 3;
  const unsigned short UPDATEREADY = 4;
  readonly attribute unsigned short status;

  // updates
  void update();
  void swapCache();

  // dynamic entries
  readonly attribute unsigned long length;
  DOMString item(in unsigned long index);
  void add(in DOMString uri);
  void remove(in DOMString uri);

  // events
           attribute EventListener onchecking;
           attribute EventListener onerror;
           attribute EventListener onnoupdate;
           attribute EventListener ondownloading;
           attribute EventListener onprogress;
           attribute EventListener onupdateready;
           attribute EventListener oncached;

};
The  ’applicationCache’ attribute of window object will return an object of ApplicationCache that applies to the active document of that window.  In a shared worker (My next blog is about worker!), you can get it by using the statement self.applicationCache.
var cache = window.applicationCache;
var workerCache = self.applicationCache;
cache.status returns the current status of the application cache, as given by the constants defined in the interface.
In order to update the application cache, update() method of cache object can be used. In ideal cases, the programmatic update of application cache is not required, as when the user visits application or refreshes the page, it is automatically taken care of. But for a long lived application, this would be useful.
abort() can be used to stop downloading process.
Once the download is completed, swapCache() can be invoked to switch to most recent application cache. But if you want to see the new resources, you have to either refresh the page manually or through program. If you do not refresh, the new resources will be loaded only during the subsequent requests for the same resources.
swapCache() should be called only when the status is UPDATEREADY. ApplicationCache also provides an event handler for each of the status. So swapCache() can be called inside updateready() event. But as I said earlier, you still have to reload the page after swap.
You can simplify this process by simply reloading the page at the suitable time by using location.reload().

References

  1. http://www.w3.org/TR/2008/WD-html5-20080122/#offline
  2. http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

No comments:

Post a Comment