HTML5 Application Cache

Kanya Srinisavan

Caching comes in two flavors: Data Caching and Application Caching.

In HTML5, data caching can be done with the help of Web storage, indexedDB, etc.

Application caching enables the web application to store its resources like HTML, CSS, Images, JavaScript pages etc. in the browser, so that the application can be made fully or partially accessible during offline or when the internet connection is not available.

Manifest file

Application caching can be done with the help of the cache manifest file. The manifest file specifies the list of resources that are to be cached in the browser.

Sections in the Manifest File

CACHE MANIFEST: The first line of the manifest file should start with the keyword CACHE MANIFEST.

CACHE MANIFEST
# 2010-02-08:v2
index.html
images/profile.JPG
css/main.css

The list of resources to be cached should be mentioned underneath the CACHE MANIFEST section.

Remember to cache the images and the CSS files associated with a particular web page.

In the above example, index.html, profile image and main.css file are the resources that should be cached by the browser.

The line starting with # symbol indicates a comment.

FALLBACK: This section informs the browser what to display when the browser tries to access an uncached file during offline.

FALLBACK
/html /offline.html

The above sample indicates that the browser should display offline.html whenever it tries to access the uncached files under the html folder during offline.

/index.html /offline.html

Specifies that the browser should display offline.html instead of index.html during offline if index.html is not cached

/ /offline.html

Indicates that whenever the user is offline, all the uncached files under the root folder will be replaced by offline.html.

NETWORK: Resources that can be accessed only during online and should never be cached are listed under this section

NETWORK
/sample.php

The above example specifies that sample.php can be accessed only during online

NETWORK
*

An asterisk in the network section indicates that all the resources except for those mentioned in the CACHE MANIFEST section can be accessed only while online.

Sample File

CACHE MANIFEST
# 2010-02-08:v12

CACHE:
index.html
images/IMG_1713.JPG
css/main.css

# Require the user to be online.
NETWORK:

*

# offline.html will be served in place of all other .html files
FALLBACK:
/index.html /offline.html

Referencing the Manifest file

Once the manifest file is prepared, it should be referenced from the web page that you would like to cache using the manifest attribute in the html tag as given below.

<!DOCTYPE html>
<html manifest="developer.appcache">
Page to be cached goes here

</html>

The page where the reference is made will be cached automatically even when it is not listed in the manifest file.

Cache clearance

The cache will remain intact until any one of the following happens
• Browser cache is cleared by the user.
• Resources that are cached are updated. Please note that updating resources in the manifest file will not enable the browser to re-cache the file automatically. The manifest file should be changed. Wondering what to change in the manifest file when there is no change in the list of resources to be cached? Just add a comment for version and keep changing the version number as and when there is a change in the resources. This should suffice.
• Change in the manifest file.
• App cache is updated programmatically.

Cache events

The application cache can be accessed programmatically using the window object.

The process through which the browser interacts with the manifest file and builds the cache involves a number of cache events. The status of the application cache during the caching process can be tracked programmatically using the status property of the application cache object.

window.applicationCache.status.

When the browser visits a webpage containing the manifest attribute for the first time, the following events occur.
• Checking: Occurs when the browser visits a webpage and reads the manifest attribute on the element.
• Downloading: Occurs when the browser starts downloading the resources in the manifest file.
• Progress: Provides information on how many files are downloaded and how many files are yet to be downloaded.
• Cached: Occurs when all the resources in the manifest file are downloaded and the application is ready to be used offline.

If the browser has visited a web page already and is able to recognize the manifest file, the following events may occur
• No update: Occurs when there is no change in the manifest file
• Downloading: Occurs when the cache manifest file and the resources listed in the file are changed. The browser starts downloading the resources.
• Progress: Provides information on how many files are downloaded and how many files are yet to be downloaded
• Update Ready – Occurs when the resources in the manifest file are downloaded again for changes and the new application if ready to be used for offline

Error event occurs in the following scenarios
• The manifest file was a 404 or 410 page, so caching is aborted
• The cache manifest file is changed while the update is being run.
• An error occurred while downloading the resources listed in the manifest file.
• The manifest file did not change but the page referencing the manifest failed to download properly

If an application’s manifest file is removed from the server, the browser removes all the cached resources that use that manifest and sends an “obsolete” event to the applicationCache object.

Cache Update:

You can programmatically check if an application has an updated cache manifest file by listening to updateready event of the application cache object. When the application cache is in updatedready state, use swap cache function to swap the older manifest file with the newer one and reload the window to reload the resources that are changed in the manifest file.

function onUpdateReady() {
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
        		window.applicationCache.swapCache();
        		location.reload();

}
}
window.applicationCache.addEventListener('updateready', onUpdateReady);

Conclusion:

Application cache feature has revealed the real potential of HTML5 by enabling offline browsing, faster retrieval of resources stored in cache and by reducing server load.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Anonymous

    Well written article, I was looking for ways to make an app available offline, this post goes through the process step by step, Thanks for sharing

  • Steve R.

    Thank you Rathnakanya! I assume there’s a limit on the amount (MB) that a given site can cache on the client. What is that limit? Is it different for different browsers? Can the developer or user control or influence it? Is there an event that’s fired when it’s reached?

  • kanya

    Steve,

    The appcache size varies for different browsers.
    Safari desktop browser have no limit
    Mobile Safari -10MB limit
    Chrome – 5MB limit
    Android browser has no limit
    Firefox desktop has no limit
    Opera’s appcache limit can be managed by the user, but has a default size of 50MB

    If the application cache quota exceeds, the error event occurs and the following error will be thrown

    Application Cache Error event: Failed to commit new cache to storage as it would exceed the quota.

  • Steve R.

    Thank you Kanya! These are valuable details.