HTML5 Application Cache

Previous Page Next Page

What is Application Cache?

Application Cache, introduced in HTML5, enables web-based applications to function offline by automatically saving the HTML file and all associated resources on the user's local machine. This means that even without an internet connection, the browser can still access the web page and its resources.

Here are some key advantages of using HTML5 application cache:

Offline browsing: Users can continue using the application even when they are offline or experiencing network disruptions.
Performance improvement: Cached resources load directly from the user's machine, leading to faster loading times and better performance compared to fetching resources from remote servers.
Reduced HTTP requests and server load: By storing resources locally, the browser only needs to download updated or changed resources from the remote server, minimizing HTTP requests, conserving bandwidth, and reducing server load.

Tip: Application Cache is supported in all major modern web browsers, including Firefox, Chrome, Opera, Safari, and Internet Explorer 10 and above.

Caching Files with a Manifest

To enable caching of files for offline use, follow these steps:

Step 1: Create a Cache Manifest File

A manifest is a special text file that instructs the browser on which files to cache, which to exclude, and what to do in case of network failures. The manifest file always begins with the words CACHE MANIFEST. Here's a basic example:

Example

Download

CACHE MANIFEST
# v1.0 : 10-08-2014

CACHE:
# pages
index.html

# styles & scripts
css/theme.css
js/jquery.min.js
js/default.js

# images
/favicon.ico
images/logo.png

NETWORK:
login.php

FALLBACK:
/ /offline.html

Understanding the Code

Let's dive into what this code means. A manifest file has three main sections: CACHE, NETWORK, and FALLBACK.

In the CACHE section, files listed after CACHE MANIFEST are saved after the first download, ensuring they're available offline.
Files listed under NETWORK are resources that aren't cached and can only be accessed online. For instance, the login.php page is one such resource.
The FALLBACK section specifies alternative pages to use if the server connection fails. Each entry includes a primary and fallback URI. For example, if the user is offline, the offline.html page will be displayed.
Lines starting with a hash symbol (#) are comments.

Note: When an application cache exists, the browser loads documents and resources directly from it, bypassing the network. If the manifest file is updated on the server, the browser downloads the new version and the resources it lists.

Warning: Avoid specifying the manifest file itself in the cache manifest, as it can make it difficult for the browser to know when a new manifest is available.

Step 2: Using Your Cache Manifest File

Once you've created it, upload your cache manifest file to the web server. Ensure the server is set up to serve manifest files with the MIME type text/cache-manifest.

To activate your cache manifest, add the manifest attribute to the root <html> element in your web pages:

Example

Try this code »

<!DOCTYPE html>
<html lang="en" manifest="example.appcache">
<head>
<title>Using the Application Cache</title>
</head>
<body>
<!--The document content will be inserted here-->
</body>
</html>

Note: If you're using Apache web servers, you can configure the MIME type for manifest files (.appcache) by adding AddType text/cache-manifest .appcache to a .htaccess file located in either the root directory of your application or the same directory as the application itself.

Previous Page Next Page