HTML5 offline application interface for offline data caching "well-collected"

1. Configuring the cache file caches manifest

MIME Type:text/cache-manifest
File name: Name.appcache
Role: Used to configure files that need to be cached

2. How to use

To add a MIME TYPE on the server
Add in Apache virtual host

1 addtype text/cache-manifest. AppCache

Create name.manifest, the file suffix can be customized, after the definition needs to add the corresponding MIME TYPE on the server

1 CACHE MANIFEST2   3 #VERSION 1.04   5 CACHE:6 index.html7 ./js/jquery.js8 ./css/style.css9   Ten NETWORK: One ./upload/ A    - failback: -./proxy/proxy.html

CACHE MANIFEST: File ID
#VERSION 1.0: Version number, just a line of comments, but changes can update the cache
Cache: Represents the file to be cached
NETWORK: Indicates a file that needs to connect to the server
Failback: Represents an alternative when there is no response

1 <  manifest= "Name.appcache">

3. Update method

1. Automatic Update: The browser accesses the app cache on the first visit, and then only updates the cache when the cache manifest file changes (even if the comment changes are updated, #VERSION 1.0), and the cache Changes to the resource file in the manifest do not trigger the update.

2. Manual update: update the cache programmatically, call Applicationcache.update () first, and this action attempts to update the user's cache (provided the cache manifest file has changed). Then, when Applicationcache.status is in the Updateready state, call Applicationcache.swapcache () to replace the original cache with the new cache.

The code is as follows:

1 var appCache = Window.applicationcache;   2 appcache.update ();//Attempt to update the user's cache.   3 ...   4 if (appcache.status = = Window.applicationCache.UPDATEREADY)  {5     Appcache.swapcache (); The fetch was successful, swap in the new cache.   6

Using update () and SwapCache () will not provide the user with updated resources, but will only let the browser check for a new cache manifest manifest, download the specified updates, and repopulate the application cache. Therefore, two loads are required to provide new content to the user. The first time is to get a new app cache, and the second is to refresh the page content.

To avoid the hassle of reloading two times, you can set up listeners to listen for Updateready events when the page loads.

The code is as follows:

1 //Check If a new cache is available on page load. 2 window.addeventlistener (' Load ', function (e) {3 window.applicationCache.addEventListener (' Updateready ', function (e) {4 if (window.applicationCache.status = = Window.applicationCache.UPDATEREADY) {5 //Browser downloaded a new app cache. 6 //Swap it in and reload the page to get the new hotness. 7 Window.applicationCache.swapCache (); 8 if (Confirm (' A new version of this site is available. Load it? ')) {  9 window.location.reload (); Ten             }   One } else { A //Manifest didn ' t changed.  Nothing new to server.  -         }   - }, False);  the}, False);

4. On-line status detection and monitoring

detection:The Navigator.online property indicates whether the current is online, if true, for online. If False, indicates offline.
monitoring: when the online/offline status switch triggers the Online/offline event, both events are triggered on the BODY element and bubbled up in the order of document.body,document and window.

5. Testing

CHROMW browser's own test tool, console will show the cache situation

1 Document was loaded from application Cache with manifest Http://localhost/fdipzone/test.appcache main.html:31  /c1>2application Cache Checking Event main.html:31  3application cache downloading Event main.html:31  4application Cache Progress event (0 of 1) http://localhost/fdipzone/ main.html main.html:31  5Application Cache Progress Event (1 of 1)  main.html:31  /c13>6 application Cache Updateready Event  

6. Precautions

1. The capacity limit for site offline storage is 5M
2. If the manifest file, or one of the files listed in the file is not properly downloaded, the entire update process will be considered a failure, the browser continues to use the old cache
3. The HTML that references manifest must be the same as the manifest file, under the same domain
4. Relative path used in manifest, relative reference is manifest file
5. The CACHE manifest string should be on the first line and must be
6. The system automatically caches HTML files that reference the manifest file
7. The cache in the manifest file has no relation to the position order of the network,fallback, and if it is implicitly declared it needs to be in the front
8. Resources in fallback must be the same as manifest files
9. When a resource is cached, the browser directly requests that the absolute path also accesses the resources in the cache.
10. Other pages in the site if the manifest property is not set, the requested resource is also accessed from the cache in the cache
11. When the manifest file changes, the resource request itself triggers the update

HTML5 offline application interface for offline data caching "well-collected"