HTML5 Application Cache

Key Takeaways

HTML5 Application Cache enables offline browsing, faster retrieval of resources stored in cache, and reduced server load. It works by specifying a manifest file in the HTML document, which lists the resources that the browser should cache for offline access.
The manifest file is divided into sections: CACHE MANIFEST, which lists resources to be cached; FALLBACK, which informs the browser what to display when trying to access an uncached file during offline; and NETWORK, which lists resources that can only be accessed online and should never be cached.
The cache can be accessed and updated programmatically, and its status can be tracked through a number of cache events. Changes to the cache occur when the browser cache is cleared by the user, resources are updated, there are changes in the manifest file, or the cache is updated programmatically.

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.

Frequently Asked Questions (FAQs) about HTML5 Application Cache

What is the main purpose of HTML5 Application Cache?

The HTML5 Application Cache is a powerful feature that allows a web application to cache some or all of its resources locally. This means that the application can still function even when the user is offline. It also improves the speed and performance of the application as it reduces the load on the server and saves bandwidth.

How does HTML5 Application Cache work?

HTML5 Application Cache works by specifying a manifest file in the HTML document using the manifest attribute. This manifest file lists the resources that the browser should cache for offline access. When the user visits the webpage, the browser downloads the resources listed in the manifest file and stores them in the application cache.

What are the benefits of using HTML5 Application Cache?

The main benefits of using HTML5 Application Cache include improved performance, reduced server load, and the ability to use web applications offline. It also provides a better user experience as the application loads faster and is more responsive.

What are the limitations of HTML5 Application Cache?

While HTML5 Application Cache has many benefits, it also has some limitations. For instance, it can only cache resources that are listed in the manifest file. Also, if a single resource listed in the manifest file fails to download, the entire cache update process fails.

How can I update the cache in HTML5 Application Cache?

To update the cache in HTML5 Application Cache, you need to make a change to the manifest file. This could be as simple as adding a comment or changing a version number. When the browser detects a change in the manifest file, it triggers the cache update process.

Can I use HTML5 Application Cache for all types of web applications?

While HTML5 Application Cache can be used for many types of web applications, it may not be suitable for all. For instance, it may not be ideal for applications that require real-time data or have frequently changing content.

How can I debug issues with HTML5 Application Cache?

Most modern browsers provide tools for debugging issues with HTML5 Application Cache. These tools allow you to view the contents of the cache, update the cache manually, and clear the cache.

What is the future of HTML5 Application Cache?

The HTML5 Application Cache is being deprecated in favor of service workers, a more powerful and flexible technology for offline caching. However, it will still be supported in many browsers for some time.

How does HTML5 Application Cache compare to other caching techniques?

HTML5 Application Cache provides more control over caching compared to traditional browser caching. It allows you to specify exactly which resources should be cached and when they should be updated.

What are some best practices for using HTML5 Application Cache?

Some best practices for using HTML5 Application Cache include specifying a fallback page for when the application is offline, regularly updating the manifest file to ensure the cache is up-to-date, and testing the application in different network conditions to ensure it works correctly offline.