Going Offline With The HTML Cache Manifest
All browsers have caching mechanisms, but they are unreliable and do not always work as you might expect. HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface.
Using the cache interface gives your application three advantages:
• Offline browsing - users can navigate your full site when they're offline.
• Speed - cached resources are local, and therefore load faster.
• Reduced server load - the browser will only download resources from the server that have changed.
The Application Cache allows a developer to specify which files the browser should cache and/or make available to offline users.
The Cache Manifest file is a simple text file that lists the resources the browser should cache for offline access. It also has the advantage of suppressing HTTP requests that the browser makes to query if a newer version of a file is required for download. This is an advantage over relying on browser caching alone, because these queries take time.
To enable the Application Cache for an application, include the manifest attribute on the document's html tag:
<html manifest="example.appcache"> ...</html>
The manifest attribute should be included on every page of your web application that you want cached. The browser does not cache a page if it does not contain the manifest attribute (unless it is explicitly listed in the manifest file itself). This means that any page the user navigates to that include a manifest will be implicitly added to the Application Cache. Thus, there is no need to list every page in your manifest.
The manifest attribute can point to an absolute URL or relative path, but an absolute URL must be under the same origin as the web application. A manifest file can have any file extension, but needs to be served with the correct mime-type (see below).
<html manifest="http://www.example.com/ example.mf"> ...</html>
A manifest file must be served with the mime-type text/cache-manifest. You may need to add a custom file type to your web server or .htaccess configuration.
For example, to serve this mime-type in Apache, add this line to your config file:
AddType text/cache-manifest .appcache
A simple manifest may look something like this:
CACHE MANIFEST
#version number – increment to force browser to download new version of application
# Resources that require the user to be online.NETWORK:
index.htmlstylesheet.cssimages/logo.pngscripts/main.js
This example will cache four files on the page that specifies this manifest file. There are a couple of things to note:
The CACHE MANIFEST string is the first line and is required. Some browsers place restrictions on the amount of storage quota available to your application. In Chrome for example, AppCache uses a shared pool of TEMPORARY storage that other offline APIs can share. If you are writing an application for the Chrome Web Store, using the unlimitedStorage removes that restriction.
If the manifest file or a resource specified in it fails to download, the entire cache update process fails. The browser will keep using the old application cache in the event of failure.
Please Note: Using Chrome Developer Tools means that you can easily see what is currently being cached by the browser and what events are being fired for the cache manifest.
• Offline browsing - users can navigate your full site when they're offline.
• Speed - cached resources are local, and therefore load faster.
• Reduced server load - the browser will only download resources from the server that have changed.
The Application Cache allows a developer to specify which files the browser should cache and/or make available to offline users.
The Cache Manifest file is a simple text file that lists the resources the browser should cache for offline access. It also has the advantage of suppressing HTTP requests that the browser makes to query if a newer version of a file is required for download. This is an advantage over relying on browser caching alone, because these queries take time.
To enable the Application Cache for an application, include the manifest attribute on the document's html tag:
<html manifest="example.appcache"> ...</html>
The manifest attribute should be included on every page of your web application that you want cached. The browser does not cache a page if it does not contain the manifest attribute (unless it is explicitly listed in the manifest file itself). This means that any page the user navigates to that include a manifest will be implicitly added to the Application Cache. Thus, there is no need to list every page in your manifest.
The manifest attribute can point to an absolute URL or relative path, but an absolute URL must be under the same origin as the web application. A manifest file can have any file extension, but needs to be served with the correct mime-type (see below).
<html manifest="http://www.example.com/ example.mf"> ...</html>
A manifest file must be served with the mime-type text/cache-manifest. You may need to add a custom file type to your web server or .htaccess configuration.
For example, to serve this mime-type in Apache, add this line to your config file:
AddType text/cache-manifest .appcache
A simple manifest may look something like this:
CACHE MANIFEST
#version number – increment to force browser to download new version of application
# Resources that require the user to be online.NETWORK:
index.htmlstylesheet.cssimages/logo.pngscripts/main.js
This example will cache four files on the page that specifies this manifest file. There are a couple of things to note:
The CACHE MANIFEST string is the first line and is required. Some browsers place restrictions on the amount of storage quota available to your application. In Chrome for example, AppCache uses a shared pool of TEMPORARY storage that other offline APIs can share. If you are writing an application for the Chrome Web Store, using the unlimitedStorage removes that restriction.
If the manifest file or a resource specified in it fails to download, the entire cache update process fails. The browser will keep using the old application cache in the event of failure.
Please Note: Using Chrome Developer Tools means that you can easily see what is currently being cached by the browser and what events are being fired for the cache manifest.
Published on 6 March 2013 in HTML5 Features