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.
# This is a comment
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
A list of explicit URLs to request and store.
What to do when an offline user attempts to access an uncached file.
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.
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
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.
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:
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.
You can explicitly define resources not to cache by providing a list of URIs - essentially a whitelist of online-only assets.
NOTE : It's doesn't make any difference either you use relative or absolute path like below