How to Create Offline Application with HTML5 App Cache

We will discover in this lesson how to use the HTML5 cache feature to construct offline applications.

What is Application Cache?

The majority of web-based apps often require Internet access to function. However, HTML5 adds an application data mechanism that enables the search engine to instantly save a Html page and all other resources needed to show the website correctly on the local computer, allowing the search engine to still obtain the website and its assets even when there is no internet service.

The following are a few benefits of making use of the HTML5 app cache function:

Offline browsing — The programme may be used by customers even when they are not connected to the internet or when their communication link is unexpectedly disrupted.
Improve performance — Web sites load more quickly and function better when users have access to cached information since they do not need to go through a distant server.
Reduce HTTP request and server load — Just the updated or modified materials will need to be downloaded by the browser from the distant server, which minimises Web applications, conserves valuable bandwidth, and eases the burden on the web application.

Tip: All of the most popular current webpages, including Firefox, Chrome, Opera, Safari, and Browser 10 and higher, enable the HTML5 app cache functionality.

Caching Files with a Manifest

A following actions must be taken in order to caches the documents for offline usages:

Step 1: Create a Cache Manifest File

The manifest is a unique file format that provides instructions to websites on which documents to save, which files not to keep, and which files to overwrite. The phrase CACHE MANIFEST are always the first phrases in the manifest file (in uppercase). An instance of a basic manifest file is shown below:

CACHE MANIFEST
# v1.0 : 10-08-2014
 
CACHE:
# pages
index.htm
 
# styles & scripts
css/style.css
js/jquery.min.js
 
# images
/favicon.ico
images/logo.png
 
NETWORK:
login.aspx
 
FALLBACK:
/ /offline.htm

Explanation of code

You could wonder what the purpose of that program was. Let's start right now, then. A manifest file can contain three unique segments: CACHE, NETWORK, and FALLBACK.

Files listed in the CACHE section, indicated either under the CACHE MANIFEST line or right after it, are explicitly stored in the cache after their initial download.
Resources listed under the NETWORK section are considered white-listed items, avoiding caching altogether, and are not accessible offline. This implies that users can only access the login.aspx page when their device is connected to the internet.
In the FALLBACK section, you define fallback pages that the browser should utilize in instances where a connection to the server cannot be established. Each entry contains two URIs: the primary resource and its corresponding fallback. For instance, in our context, if the user loses connectivity, the browser will display the offline.htm page. Notably, both URIs must originate from the same source as the manifest file.
Lines beginning with a hash symbol (#) denote comment lines, providing explanatory context without affecting the functionality of the manifest file.

Note: In the event that an applications cache is present, the viewer loads the page and any related resources straight from of the cache without using the internet. The website then checks to see if the manifest file has been modified on the site, and if so, it uploads the updated manifest file along with any resources indicated in it.

Warning: You won't be able to tell the browsers that a fresh manifest is ready if you mention a file itself within the cache manifest file.

Step 2: Using Your Cache Manifest File

Create the cache manifest file and submit it to the webpage, making that the web host is set up to serve documents with the MIME format text/cache-manifest.

As demonstrated following, you must add the manifest property to the base <html> tag in order to activate the caching manifest in your web sites:

<!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: For Apache web servers, configuring the MIME type for manifest files (.appcache) involves adding the directive AddType text/cache-manifest .appcache to a .htaccess file located in either the root directory of the application or the same directory as the application itself.

FAQ

What is HTML Application Cache?

HTML Application Cache, also known as AppCache, is a web browser feature that allows web applications to be cached locally on the user's device, enabling offline access and faster loading times.

How does HTML Application Cache work?

HTML Application Cache works by specifying a cache manifest file in the HTML code. This manifest file contains a list of resources that should be cached, such as HTML files, CSS stylesheets, JavaScript files, images, and other assets. Once the manifest is defined, the browser downloads and stores these resources locally, allowing the web application to be accessed offline.

How do you define the cache manifest file in HTML?

To define the cache manifest file, you need to include the manifest attribute in the <html> tag and provide the path to the manifest file. For example: <html manifest="cache.manifest">.

What types of resources can be cached using HTML Application Cache?

HTML Application Cache allows you to cache various types of resources, including HTML files, CSS stylesheets, JavaScript files, images, fonts, audio, video, and other static assets required by your web application.

Can HTML Application Cache be used for caching dynamic content?

No, HTML Application Cache is primarily designed for caching static resources. It does not cache dynamic content that relies on server-side processing or user-specific data.

How does HTML Application Cache handle updates to cached resources?

When an update is made to the cache manifest file or any of the cached resources, the browser detects the changes and downloads the updated resources. However, the updated resources are not immediately available to the application until the next time the application is loaded.

Can HTML Application Cache be disabled or cleared by the user?

Yes, users can clear the application cache through the browser settings or disable HTML Application Cache entirely. Additionally, developers can programmatically request the browser to update the cache by modifying the cache manifest file.

Are there any limitations or considerations when using HTML Application Cache?

Yes, there are some considerations when using HTML Application Cache. It is important to properly handle cache updates, handle cache errors, handle fallback scenarios for offline access, and be mindful of the cache size limitations imposed by different browsers.

Is HTML Application Cache supported by all web browsers?

HTML Application Cache is supported by most modern web browsers, including Chrome, Firefox, Safari, and Internet Explorer. However, it is always recommended to test and ensure compatibility across different browsers and versions.

Are there any alternatives to HTML Application Cache for offline access?

Yes, there are alternative approaches for offline access, such as using Service Workers, which provide more advanced caching and offline capabilities. Service Workers offer greater control and flexibility compared to HTML Application Cache and are becoming the preferred method for offline access in modern web development.

Conclusion

HTML5 introduces application cache, which allows a web application to be cached and accessible without an Internet connection. To use AppCache, one needs to create a cache manifest file, which is a text file defined by the web application indicating to an HTML5 complaint browser resources to cache in “application cache”.

Ben Nadel explores the Cache Manifest part of the specification for creating offline web applications. The limit of applicationCache size is only 5MB, but the “FALLBACK:” section of the cache manifest file can solve this problem.

All Tutorials