html5--Application Cache

With HTML5, creating a cache manifest file makes it easy to create an offline version of your Web app.

What is the application cache (application cache)?

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

Application caching brings three benefits to your app:

• Offline Browsing -users can use them when the app is offline
• Speed-cached resources are loaded faster
• Reduce server load-The browser will download only updated or changed resources from the server.

Browser support

All major browsers support application caching, in addition to Internet Explorer.

HTML5 Cache Manifest Instance

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

Cache Manifest Basics

To enable application caching , include the manifest attribute in the of the document:

<! DOCTYPE html>
Each page that specifies a manifest is cached when the user accesses it. If the manifest property is not specified, the page is not cached ( unless the page is specified directly in the manifest file ).
The recommended file name extension for the manifest file is: ". AppCache".
Please note that the manifest file needs to be configured with the correct mime-type, "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 to cache (as well as what is not cached).
The manifest file can be divided into three parts :

 
  
 
   
 
    
Cache MANIFEST-Files listed under this heading will be cached after the first download
 
    
NETWORK-Files listed under this heading require a connection to the server and are not cached
 
    
FALLBACK-Files listed under this heading provide a fallback page when the page is inaccessible (e.g. 404 pages)
 
   
 
  
CACHE MANIFEST
The first line, CACHE MANIFEST, is required :
CACHE Manifest/theme.css/logo.gif/main.js
The manifest file above lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file is loaded, the browser downloads the three files from the root directory of the Web site. These resources are then available, regardless of when the user disconnects from the Internet.
NETWORK
The following NETWORK section stipulates that the file "Login.asp" is never cached and is not available offline:
NETWORK:login.asp
You can use an asterisk to indicate that all other resources/files require an Internet connection:
NETWORK:*
FALLBACK
The FALLBACK section below specifies that if an Internet connection cannot be established, replace all files in the/html5/directory with "offline.html" :
fallback:/html5//404.html
Note: The first URI is a resource and the second is a substitute.
Update cache
Once the app is cached, it remains cached until the following happens:

 
  
 
   
 
    
User empties browser cache
 
    
The manifest file is modified (see tips below)
 
    
App Cache updated by program
 
   
 
  
Instance-Full Manifest file
CACHE manifest# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsnetwork:login.aspfallback:/html5//404.html
Important NOTE: "#" begins with a comment line, but can also be used for other purposes. The app's cache is updated when its manifest file changes . If you edit a picture, or modify a JavaScript function, these changes are not re-cached. updating the date and version number in the comment line is a way to enable the browser to re-cache the file .
 For example , when a resource file whose URL begins with "online/" cannot be accessed, the missing.html is displayed in place ofFALLBACK:online/missing.htmlThe missing.html content is displayed when the content is accessed offline, only onlineNotes about the application cache
Keep an eye out for cached content.
Once the file is cached, the browser continues to show the cached version, even if you modified the file on the server. To ensure that the browser updates the cache, you need to update the manifest file.
Note: Browsers may have a different capacity limit for cached data (some browser settings are limited to 5MB per site).
html5--Application Cache