HTML5 Application Cache

HTML5 Application Cache

HTML5 application cache allows you to access the website despite being offline. All you need to do is to create a cache manifest file.

Advantages of HTML5 Application Cache

HTML5 introduces a new feature that was not available in its predecessors, which is application cache. With HTML5 application cache, the web application can be cached and accessible without an internet connection.

There are three main benefits of HTML5 application cache:

  • Offline browsing: It allows users to access the application when their internet connection goes down.
  • Speed: Cached resources significantly reduces the website load time. Thus, we’ll end up with fast loading website.
  • Low server load: If application cache is enabled in your HTML document, your browser will only have to download updated/ changed resources from the server. Therefore, there will be a low load on the server.

Browser Support for HTML5 Application Cache

Below is the list of browsers and their versions that supports HTML5 application cache:

  • Google Chrome 4.0 HTML5 Application Cache
  • Microsoft Edge 12.0  HTML5 Application Cache
  • Firefox 3.5
  • Safari 4.0 HTML5 Application Cache
  • Opera 11.5  HTML5 Application Cache

Basics of Cache Manifest

To enable the application cache, all you need to do is to include manifest attribute in the <html> tag.

<!DOCTYPE HTML>
<html manifest=”test.appache”>
…………………
</html>

 

Every webpage wherein the manifest attribute is defined will be cached when the user visits it. If the manifest attribute is not defined appropriately, the webpage will not be cached.

We strongly recommend you attach “.appache” as a file extension with manifest files.

It is imperative to know that manifest files must have the right media type. Otherwise, it won’t work. The correct media type for manifest files is “text/cache-manifest,” which must be configured on the webserver.

The Manifest File

The manifest files contain plain text instructing the browser what to cache and what should not be cached.

The manifest file has three sections:

  • CACHE MANIFEST: files that fall under this header will be cached once they are downloaded for the first time.
  • NETWORK: files that lie in this header will only be cached when a connection with the server exists.
  • FALLBACK: files that fall in this header define fallback pages if the pages are not accessible.

 

CACHE MANIFEST

The code listed below is required in the first line of CACHE MANIFEST:

CACHE MANIFEST

/theme.css

/logo.gif

/main.js

The manifest file displayed above has three main resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file is first downloaded, the browser will extract and download all three files from the website’s root directory.

Eventually, when there is no internet connection, the resources are still available for the users.

NETWORK

The NETWORK section below tells the browser that the file’s login. asp’ should not be cached and cannot be accessible offline.

NETWORK:

login.asp

An asterisk listed below shows that all the resources/files won’t work without an internet connection.

NETWORK:

*

FALLBACK

The OFFLINE section below tell us that the file ‘offline.html’ can be served as a substitute for all the files in the /HTML/catalog in case of no internet connection.

FALLBACK:

/html/ / offline.html

 

In the above code snippet, the first URL represents the source, and the second is FALLBACK.

Updating the Cache

Once an application is cached, it remains cached for a prolonged period until one of the following conditions exists:

  • The user of the website clears the cache
  • The manifest file has been modified.
  • W3C programmatically updates the application cache.

Key Takeaways

It would be best if you were extra cautious while caching something. Once a particular file is cached, the browser keeps showing you the cached version of that file. In case you change that file on the server, it will remain cached.

To make sure that the browser keeps updating the cache, you have to modify the manifest file.

Browsers have varying size limits for cache data. Generally, most of the browsers allow a 5MB cached size limit per website.

To widen your understanding of this topic, read more.

 

Next Lesson » « Previous Lesson