HTML5 application cache

What is the Application Cache?


HTML5 introduces application caching, which means web applications can be cached and accessed without an Internet connection.

Application caching brings three advantages to the application:

   1. Offline browsing - users can use them when the app is offline

   2. Speed ​​- cached resources load faster

   3. Reduce server load - The browser will only download updated or changed resources from the server.

HTML5, by creating a cache manifest file, makes it easy to create offline versions of web apps.

Browser support



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

HTML5 Cache Manifest instance

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


Cache Manifest basics
To enable application caching, include the manifest attribute in the document's <html> tag:

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

The suggested file extension for the manifest file is: ".appcache".

Note that the manifest file needs to be configured with the correct MIME-type, which is "text/cache-manifest". Must be configured on the web server.

Manifest file

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

The manifest file can be divided into three parts:

CACHE MANIFEST - Files listed under this heading will be cached after 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 the fallback page (such as a 404 page) when the page is inaccessible.

CACHE MANIFEST
The first line, CACHE MANIFEST, is required:

CACHE MANIFEST 
/theme.css 
/logo.gif 
/main.js

The above manifest file lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file is loaded, the browser will download the three files from the root of the website. These resources are then available regardless of when 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:

NETWORK: 
login.php

An asterisk can be used to indicate that all other resources/files require an internet connection:

NETWORK

FALLBACK

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

FALLBACK: 
/html/ /offline.html

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

Refresh cache

Once the app is cached, it will remain cached until:

User clears browser cache

The manifest file has been modified (see the tips below)

Update the app cache by the program

Instance - complete Manifest file

CACHE MANIFEST 
# 2012-02-21 v1.0.0 
/theme.css 
/logo.gif 
/main.js 

NETWORK: 
login.php 

FALLBACK: 
/html/ /offline.html

Hint : Comments lines begin with "#", but they can also be used for other purposes. The app's cache is updated when its manifest file changes. If you edit an image or modify a JavaScript function, these changes will not be re-cached. Updating the date and version number in the comment line is a way for the browser to re-cache the file.

Description of application caching

Please pay attention to the contents of the cache.

Once the file is cached, the browser will continue to display the cached version, even if you modified the file on the server. In order to ensure that the browser updates the cache, you need to update the manifest file.

Note: Browsers may have different capacity limits for cached data (some browser settings are limited to 5MB per site).



Last Updated: 2018-07-06 12:32:44 By akshay

SHARE THIS

share_facebook share_twitter share_google_plus

Please Comment Here :