What is HTML5 offline cache Manifest? _ html5 tutorial skills-

This article mainly introduces what the HTML5 offline cache Manifest is, and explains what the HTML5 offline cache Manifest is for you. If you are interested, you can refer to the web app which is no better than PC, in terms of performance and traffic, offline applications are becoming more and more important. Although the browser has a caching mechanism, it is often unreliable. What's more, html files cannot be cached in general cases, and everything goes over after the network is disconnected.

What is manifest?

In short, manifest allows your application to be accessible without a network.

It hasThree Advantages:

1. offline browsing and normal access without a network;

2. faster loading speed, and faster cache access locally;

3. Reduce the service request pressure. After the file is cached, you only need to request the file to be updated.

How to use it?

Copy XML/HTML Code to clipboard

3. ...

You need to include the manifest attribute on every page of the web app you want to cache. If a page does not have the manifest attribute, it will not be cached (unless the page is explicitly specified in the manifest file ). This means that as long as the page accessed by the user contains the manifest attribute, it will be added to the application cache. In this way, you do not need to specify the pages to be cached in the manifest file.

The Manifest attribute can specify an absolute URL or a relative path. However, an absolute URL must be of the same source as the web app. A manifest file can be any extension file type, but must have the correct mime-type, such as adding

"AddType text/cache-manifest. appcache ".

Manifest File

A manifest file is a simple text file that informs the browser of cached content (and non-cached content ).

The manifest file can be divided into three parts:

Cache manifest-Files listed under this title will be cached after the first download
NETWORK-Files listed under this title need to be connected to the server and will not be cached
FALLBACK-The files listed under this title specify the rollback page (such as the 404 page) when the page cannot be accessed)

A complete manifest file:

Copy XML/HTML Code to clipboard

1. CACHE MANIFEST
2. #2012-02-21 v1.0.0
3. /Theme.css
4. /Logo.gif
5. /Main. js
7. NETWORK:
8. Login. asp
10. FALLBACK:
11. /Html5 // 404.html

Cache manifest is required. # It is followed by a comment. below is the file to be cached, which requires a relative path. NETWORK is the file to be loaded every time a request is sent.
You can use asterisks to indicate that all other resources/files require Internet connection:
NETWORK:
*
FALLBACK is used to replace all files in the/html5/directory with "404.html" if you cannot establish an Internet connection.

Update mechanism
There are three ways to update the manifest cache:
1. Clear the browser cache;
2. The manifest file is modified, even if it is a comment (so you can update the file by modifying the comment)
3. Update by program

Cache status
In the program, you can view the cache status through the window. applicationCache attribute.

C/C ++ Code: copy the content to the clipboard.

1. Var appCache = window. applicationCache;
3. Switch (appCache. status ){
5. Case appCache. UNCACHED: // UNCACHED = 0
7. Return 'uncached ';
9. Break;
11. Case appCache. IDLE: // IDLE = 1
13. Return 'idle ';
15. Break;
17. Case appCache. CHECKING: // CHECKING = 2
19. Return 'checking ';
21. Break;
23. Case appCache. DOWNLOADING: // DOWNLOADING = 3
25. Return 'downloading ';
27. Break;
29. Case appCache. UPDATEREADY: // UPDATEREADY = 4
31. Return 'updateready ';
33. Break;
35. Case appCache. OBSOLETE: // OBSOLETE = 5
37. Return 'obsolete ';
39. Break;
41. Default:
43. Return 'uknown CACHE status ';
45. Break;
47. };

To update the cache programmatically, you must first call applicationCache. update (). This will attempt to update the user's cache (the manifest file must be changed ). Finally, when applicationCache. status is in the UPDATEREADY status, call applicationCache. swapCache () to replace the old cache with the new one.

C/C ++ Code: copy the content to the clipboard.

1. Var appCache = window. applicationCache;
3. AppCache. update (); // Attempt to update the user's cache.
5. ...
7. If (appCache. status = window. applicationCache. UPDATEREADY ){
9. AppCache. swapCache (); // The fetch was successful, swap in the new cache.
11. }

Note: Using update () and swapCache () in this way will not present the updated resources to users. This only allows the browser to check whether the manifest file has been updated, download the specified update content, and re-fill the app cache. Therefore, to let the user see the updated content, two page downloads are required, one is to update the app cache and the other is to update the page content.

To enable users to see the latest version of your website, set a listener to listen to the updateready event during page loading.

C/C ++ Code: copy the content to the clipboard.

1. // Check if a new cache is available on page load.
3. Window. addEventListener ('load', function (e ){
5. Window. applicationCache. addEventListener ('updateready', function (e ){
7. If (window. applicationCache. status = window. applicationCache. UPDATEREADY ){
9. // Browser downloaded a new app cache.
11. // Swap it in and reload the page to get the new hotness.
13. Window. applicationCache. swapCache ();
14. Window. location. reload ();
16. } Else {
18. // Manifest didn't changed. Nothing new to server.
20. }
22. }, False );
24. }, False );

Listen to events and handle different statuses accordingly:

C/C ++ Code: copy the content to the clipboard.

1. Var appCache = window. applicationCache;
3. // Fired after the first cache of the manifest.
5. AppCache. addEventListener ('cached', handleCacheEvent, false );
7. // Checking for an update. Always the first event fired in the sequence.
9. AppCache. addEventListener ('checking', handleCacheEvent, false );
11. // An update was found. The browser is fetching resources.
13. AppCache. addEventListener ('downloading', handleCacheEvent, false );
15. // The manifest returns 404 or 410, the download failed,
17. // Or the manifest changed while the download was in progress.
19. AppCache. addEventListener ('error', handleCacheError, false );
21. // Fired after the first download of the manifest.
23. AppCache. addEventListener ('noupdate', handleCacheEvent, false );
25. // Fired if the manifest file returns a 404/410.
27. // This results in the application cache being deleted.
29. AppCache. addEventListener ('obsolete', handleCacheEvent, false );
31. // Fired for each resource listed in the manifest as it is being fetched.
33. AppCache. addEventListener ('progress', handleCacheEvent, false );
35. // Fired when the manifest resources have been newly redownloaded.
37. AppCache. addEventListener ('updateready', handleCacheEvent, false );

If the downloading of the manifest file or a specified resource in the file fails, the entire update will fail. In this case, the browser will continue to use the old application cache.

Note:

1. The capacity limit for offline site storage is 5 MB.
2. If the manifest file or an internal file cannot be downloaded normally, the entire update process will be deemed as failed, and the browser will continue to use the old cache.
3. the html that references manifest must be the same as the manifest file.
4. The relative path used in manifest. The relative reference object is the manifest file.
5. the cache manifest string should be in the first line and must be
6. the system automatically caches the HTML file that references the list file.
7. The CACHE in the manifest file has no relationship with the location sequence of NETWORK and FALLBACK. If it is an implicit declaration, it must be at the beginning.
8. The resources in FALLBACK must be the same as the manifest file.
9. When a resource is cached, the browser directly requests this absolute path to access the resources in the cache.
10. Even if the manifest attribute is not set for other pages on the site, the requested resources are also accessed from the cache.
11. When the manifest file changes, the resource request itself also triggers an update.

The above is an introduction to HTML5 offline cache Manifest, and I hope it will be helpful for you to learn.

Original article: http://www.cnblogs.com/hutuzhu/p/4871666.html