WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML5 Application Cache


In this chapter we learn html5 app cache .
we can make offline version of a web application by creating a cache manifest file


Application Cache

By using application cache we can make accessible without an internet connection.

Application cache gives an application following advantages:

    from the server
  1. It helps speed - it can gain web pages cased resoursce load faster
  2. reduce server load- It help browser will only download updated resources from server
  3. Offline browsing - user can browse site in offline no need internet connection

Browser Support

table specify the first browser version that fully supports Application Cache.

API
Application Cache 8.0 27.2 9.5 12.0 35.1

HTML Cache Manifest

The example below shows an HTML document with a cache manifest

Example

<!DOCTYPE HTML>
<html manifest="test.appcache">

<body>
The content of the document......
</body>

</html>

Cache Manifest Basics

Cache Manifest are include application cache in in the document's <html> tag:

<!DOCTYPE HTML>
<html manifest="test.appcache">
...
</html>

Every page with the manifest attribute specified will be cached when the user visits 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 recommended file extension for manifest files is: ".appcache"


Manifest File

Manifest file is a simple text file, which tells the browser what to cache (and what to never cache).

The manifest file has three category :

  • CACHE MANIFEST - It is primary maniefest Files listed under this header will be cached after they are downloaded for the first time
  • NETWORK -It is Files listed under this header require a connection to the server, and will never be cached
  • FALLBACK - It is Files listed under this header specifies fallback pages if a page is inaccessible

CACHE MANIFEST

The first line, CACHE MANIFEST, is required:

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

The manifest file have three: 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 directory of the web site. Then, whenever the user is not connected to the internet, the resources will still be available.

NETWORK

The NETWORK section below specifies that the file "login.asp" should never be cached, and will not be available offline:

NETWORK:
login.asp

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

NETWORK:
*

FALLBACK

The FALLBACK section below specifies that "offline.html" will be served in place of all files in the /html/ catalog, in case an internet connection cannot be established:

FALLBACK:
/html/ /offline.html

Updating the Cache

Once an application is cached, it remains cached until one of the following happens:

  • The user clears the browser's cache
  • The manifest file is modified (see tip below)
  • The application cache is programmatically updated

Example - Complete Cache Manifest File

CACHE MANIFEST
# 2018-05-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html