HTML5 application cache

HTML5 application cache

---

With HTML5, you can easily create an offline version of your web app by creating a cache file. This means that you can access it without a network connection.

---

What is Application Cache?

HTML5 introduces application caching, which means that web apps can be cached and accessible when there is no Internet connection.

Application caching brings three benefits to your app:

1. Offline browsing - Users can use apps when they're offline
2. Speed - Cached resources load faster
3. Reduce server load - The browser will only download updated or changed resources from the server.

---

Browser support

Internet Explorer 10, Firefox, Chrome, Safari and Opera support app caching.

---

HTML5 Cache Manifest instance

The following example shows an HTML document with cache manifest (for offline browsing):

---

Cache Manifest Foundation

To enable application caching, include the manifest property in the document's label:

Each page that specifies manifest is cached when the user accesses it. If the manifest property is not specified, the page is not cached (unless the page is specified directly in the manifest file).

The recommended file extension for the manifest file is :.appcache.

Note that the manifest file needs to be configured correctly for MIME-type, which is "text/cache-manifest". It must be configured on a web server.

---

Manifest file

A manifest file is a simple text file that tells the browser what is cached (and what is not cached).

The manifest file can be divided into three parts:

• CACHE MANIFEST - The files listed under this heading will be cached after the first download
• NETWORK - The files listed under this heading need to be connected to the server and will not be cached
• FALLBACK - The files listed under this heading specify fallback pages (e.g. 404 pages) when the page is ind accessible

CACHE MANIFEST

The first line, MANIFEST, is required:

The manifest file above lists three resources: a CSS file, a GIF image, and a JavaScript file. W hen the manifest file is loaded, the browser downloads the three files from the root of the web site. These resources are then available whenever the user is disconnected from the Internet.

NETWORK

The following NETWORK section states that the file "login .php" is never cached and is not available when offline:

You can use an asterisk to indicate that all other resources/files require an Internet connection:

FALLBACK

The following FALLBACK section provides that if an Internet connection cannot be established, replace all files in the /html5/directory with "offline .html" instead:

Note: The first URI is a resource and the second is a substitute.

---

Update the cache

Once the app is cached, it remains cached until:

• The user emptys the browser cache
• Manifest file is modified (see tips below)
• It is up to the program to update the app cache

Instance - Full Manifest file

Tip: The comment line starts with a " but can be used for other purposes. T he app's cache is updated when its manifest file changes. I f you edit a picture, or modify a JavaScript function, none of these changes will be re cached. Updating the date and version number in the comment line is a way for the browser to recach the file.

---

A description of the application cache

Please pay attention to the cached content.

Once the files are cached, the browser continues to display the cached version, even if you modify the files on the server. To ensure that the browser updates the cache, you need to update the manifest file.

Note: Browser capacity limits on cached data may not be the same (some browsers set limits of 5MB per site).

---

Related tutorials

CSS tutorial