HTML5 offline article

Home >> HTML5 offline >>

  Introduction of HTML5 offline application cache manifest.

Introduction
It's becoming increasingly important for web-based applications to be accessible offline. Yes, all browsers can cache pages and resources for long periods if told to do so, but the browser can kick individual items out of the cache at any point to make room for other things.

Using the cache interface gives your application three advantages:

Offline browsing:- Users can navigate your full site when they're offline
Speed:- Resources come straight from disk, no trip to the network.
Resilience:- If your site goes down for maintenance your users will get the offline experience

The Application Cache allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they're offline.

The cache manifest file

Let's start with an example of a full manifest file.

CACHE MANIFEST

# This is a comment

CACHE:

#css files
/root-folder/style.css
http://your-domain-name.com/root-folder/abc.css

FALLBACK:
//offline.html

NETWORK:
*

Each directive is placed on a new line, with comments prefixed by a hash (#). The first line, CACHE MANIFEST, tells the browser that this is a manifest file. The uppercase lines with trailing colons are section headings.

There are three different sections in a manifest file

CACHE
A list of explicit URLs to request and store.

FALLBACK
What to do when an offline user attempts to access an uncached file.

NETWORK
Which resources are available only while online.

Each section serves a specific purpose that you must understand in order to successfully and effectively cache your resources.

Let's explain each and every section of the manifest file.

CACHE

The CACHE section is considered the default - i.e., if no section heading has been defined, the browser will assume this is the CACHE section

CACHE MANIFEST

/root-folder/style.css
http://your-domain-name.com/root-folder/abc.css

FALLBACK

The FALLBACK section tells the browser what to serve when the user tries to access an uncached resource while offline. Because of this, it looks a bit different than CACHE and NETWORK. It contains two values per line, separated by a space. The first value is the request URI to match, and the second is the resource sent upon matching. It caches the resource on the right for offline use, so this should be an explicit path.

CACHE MANIFEST

FALLBACK:
/status.html /offline.html

On the line below FALLBACK we have the URI “/status.html” followed by a second URI, “/offline.html”. We’re telling the browser that when an offline user requests a URI is matching “/status.html”, it should serve the cached file “offline.html”.

However, the FALLBACK section can be far more powerful:

CACHE MANIFEST

FALLBACK:
//offline.html

NETWORK

Finally, we have the NETWORK section, used to tell the browser explicitly which resources are only available while online. By default, this uses the asterisk * symbol, meaning all resources that are not cached will require a connection. Alternatively, we can whitelist specific url prefixes, like all the avatars if we wish.

CACHE MANIFEST


NETWORK:
*

You can explicitly define resources not to cache by providing a list of URIs - essentially a whitelist of online-only assets.

CACHE MANIFEST

NETWORK:
register.php
login.php

NOTE : It's doesn't make any difference either you use relative or absolute path like below

/root-folder/style.css
http://your-domain-name.com/root-folder/style.css

 

Write your comment now