Difference Between HTML5 Application Cache And Regular HTML Browser Cache ?

Last Updated : 28 Nov, 2022

Most web applications like accessing a bank website, online shopping store, etc., all need a network connection. Due to several reasons, the network connectivity might be lost and hence users cannot able to understand what is happening, or at least they should get intimated as “server is offline, try after some time/few services like initial level of view are available but not transactions, etc.,”. These features are possible via the HTML5 Application Cache mechanism.

Application CacheThe application	Browser Cache
Application cache is helpful to get the cached resources and assets that are available in the manifest file. Even whole website content also would be got because of retrieving the cached contents.	Browser cache is helpful to get only visited pages and their associated assets of a website.
Prefetching of HTML pages/CSSthe /images/js etc and even a whole web page content retrieval is possible	It is impossible to get
Application Cache helps with Offline browsing, Speed (Instead of accessing the files from the network, they can be accessible from the cache, thus increase in retrieval fastly) Resilience (even for few-second breakups)	Though we do offline browsing, only visited pages are possible to get but not many resources of the website

Let us see how we get cached resources by means of the Application Cache

1. Specify a manifest attribute to the HTML tag of a web page:

In order to enable application caching, we need to add a manifest attribute to the HTML page.
It is automatically cached as the HTML file contains a manifest attribute
Hence it is not mandatorily necessary to add to the manifest file (But it is good also if we add it there)
The manifest attribute should be given as an absolute URL or relative path, For the absolute URL, it must be under the existing web application.

Example:

<html manifest="cacheelements.manifest">
    ...
</html>

Extension of manifest file can be anything but should be given with correct mime-type:

<html manifest="<path of URL>/sample.mf">
      ...
</html>

A manifest file should have mime-type text/cache manifest. Either a custom file type or .htaccess configuration must be added

2. Add a cache manifest file:

It is nothing but a text file that contains what resources need to be cached. When the network is not available and the user goes offline, cached resources are helpful to view the user.
content-type of text/cache-manifest has to be specified in the manifest file,
It can contain multiple resources like below:

#Always CACHE MANIFEST should be the first line

CACHE MANIFEST

#Files will be including local files and external links
#HTML files

#css files

#image files

#js files

Example:

CACHE MANIFEST
index.html
css/stylesheet.css
images/logo.png
scripts/main.js
#external url js files

One important feature that we need to see is if the resources need to be accessed only online means, we need to specify as

3. NETWORK:

Example:

NETWORK 
* #All files
# If we need to specify few files, then they need to be listed down as follows
#File 1
#File 2 etc.,

NOTE: Even if we specify all files with * indication, the files other than those mentioned in the CACHE MANIFEST are available only when there is a network connection. CACHE MANIFEST files can be accessible even offline as well.

One more important feature to provide an alternative file to access, we need to specify as

4. FALLBACK: The browser is hinted out to note the alternative file that need to be served when the application goes offline.

It has two URLs. The first one is the requested one and in case if there is no network connectivity or the resource is unavailable at the mentioned location, second one will be served as an alternative.unavailable.

Example:

FALLBACK
#If there is no network connection, 
#users can see offlineViewFile.html
/ /offlineViewFile.html 
#In few fractions of seconds, if there is no network 
#then below features can be enabled like below
#If sample.java is inaccessible then, 
#users will see  staticPage.html
/sample.java /staticPage.html

#If images/important.jpg is inaccessible then, 
#users will see images/offlineImage.jpg 
images/important.jpg/ images/offlineImage.jpg

Order of Cache, Network, and Fallback can vary but always the first line should be CACHE MANIFEST. Let us combine everything in a single file:

CACHE MANIFEST
index.html
css/stylesheet.css
images/logo.png
scripts/main.js
#external url js files

NETWORK 
* #All files
# If we need to specify few files, then they need to be listed down as follows
#File 1
#File 2 etc.,

FALLBACK
#If there is no network connection, users can see offlineViewFile.html
/ /offlineViewFile.html 
#In few fractions of seconds, if there is no network then below features can be enabled like below
#If sample.java is inaccessible then, users will see  staticPage.html
/sample.java /staticPage.html

#If images/important.jpg is inaccessible then, users will see images/offlineImage.jpg 
images/important.jpg/ images/offlineImage.jpg

# Additional resources to cache can be specified again like below
CACHE:
images/welcome.gif
css/important.css
js/eventInformation.js

#HTML files that references the manifest is automatically cached. 
#But still it is good to indicate that as well.

Conclusion: As a difference between application cache and regular browser cache, application cache is more advantageous as it helps to serve the website

offline
speed of retrieval of the data is faster than accessing it from the cache instead of the network
Application manifest helps to cache the required files and using Fallback, always there will not be accidental unavailability of files. Instead, users will be noted with user-friendly error pages
Users get the view pages and they will get provided the option of saving the data once the network is back, saved data is synced with the original data

But a regular browser cache cannot able to do the above. It just helps to get the user to visit pages.

Suggest improvement

Difference between HTML and HTML5

Share your thoughts in the comments