HTML 5 Application Cache

Introduction to the HTML 5 application cache

Http://www.w3school.com.cn/html5/html_5_app_cache.asp

This is followed by an introduction to the HTML5 application cache in a practical case.

An application server

The application server uses Tomcat.

Add the following configuration to the Tomcat Web. XML because the manifest file returns Mime-type must be text/cache-manifest

<mime-mapping> <extension>appcache</extension> <mime-type>text/cache-manifest</ Mime-type> </mime-mapping>

Two pages

Manifest file Default.appcache

Cache staticpage.html, do not cache * that is all files. If the page does not exist or cannot be connected to the network, jump to errorpage.html

CACHE MANIFEST staticpage.html NETWORK: * fallback:/errorpage.html

Index.html Introducing Default.appcache Cache files

<! DOCTYPE html>
Staticpage.html
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Randompage.html
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Errorpage.html
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
All of the above HTML and cache files (Default.appcache) are in the same directory.
Now let's see what the test results are.
Visit http://localhost:8080/webapp/index.html
The results are as follows
650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/6F/C5/wKiom1WnkmXAMwV0AAE3tKxAg6k407.jpg "title=" 1.jpg " alt= "Wkiom1wnkmxamwv0aae3tkxag6k407.jpg"/>
From the information on the console, it is known that staticpage.html,errorpage.html has been cached.
Stop the server .
Access to http://localhost:8080/webapp/staticPage.html is normal. Cache efficiency
Access http://localhost:8080/webapp/randomPage.html returns errorpage.html content. Yes,fallback configuration is effective.
Access to http://localhost:8080/webapp/index.html is normal. No, this is not what we want because we do not set this page to be cached. From the W3cshcool introduction, each page that specifies manifest is cached when the user accesses it .

One of the following scenarios is addressed.
Add cachepage.html
<!  DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Modify the index.html body inside add as follows.
<iframe src= "cachepage.html" style= "Display:none;" ></iframe>
Tested, not OK .

Summary
If the app has a a,b,c,d page.
A page introduces a manifest file, the manifest file, the cache B file, and the C file as the error page.
When a page is requested, the browser caches the A,b,c page, and the manifest file.
If the A, B, C page has a new, to refresh the file, the server side of the manifest file to make any modification (or delete the server-side manifest file, if the user accesses any cached page, the browser will try to synchronize the manifest file, The discovery file does not exist, and then all client caches are removed.

Each time you access the A,b,c (Cache page), the browser synchronizes the manifest file once.
When you access a non-cached file, the manifest file is not synchronized.

That is, every time the cache file is accessed, the browser synchronizes the manifest file,
If the manifest file is followed by a new one, refresh the cache file list (update the cache file, delete the cache file, add the cache file).
Then you can see the updated content again when you access the cache file.

These are all tested in Chrome version 41.0.2272.118. 



HTML 5 Application Cache