What is HTML5 offline cache Manifest_html5 tutorial skills-H5 Tutorial-php.cn

What is HTML5 offline cache Manifest_html5 tutorial skills

WBOY

Release： 2016-05-16 15:51:34

Original

1944 people have browsed it

Web apps are no better than PCs. There are performance and traffic considerations. Offline applications are becoming more and more important. Although browsers have caching mechanisms, they are often unreliable. What’s more, HTML files cannot be cached under normal circumstances. Everything is over after the Internet.

What is manifest?

To put it simply, manifest allows your application to be accessed even without a network connection.

It has three major advantages :

1. Offline browsing, normal access even without network;

2. Faster loading speed, cached local access speed is naturally faster;

3. Reduce the service request pressure. After the file is cached, there is no need to request it again, only the files that need to be updated.

How to use?

XML/HTML CodeCopy content to clipboard

>
<html manifest="demo. appcache">
...
html>

You need to include the manifest attribute on every page of the web app you want to cache. If a page does not have a 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 visited by the user contains the manifest attribute, it will be added to the application cache. In this way, there is no need to specify which pages need to be cached in the manifest file.

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

in Apache

"AddType text/cache-manifest .appcache".

Manifest file

Manifest files are simple text files that tell the browser what is cached (and what is not cached).

Manifest files can be divided into three parts:

CACHE MANIFEST - Files listed under this heading will be cached after the first download
NETWORK - in The files listed under this heading require a connection to the server and are not cached
FALLBACK - The files listed under this heading specify a fallback when the page is unreachable Page (such as 404 page)

A complete manifest file:

XML/HTML CodeCopy content to clipboard

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html

CACHE MANIFEST is required. # is followed by a comment. Below are the files that need to be cached and require a relative path. NETWORK is a file that needs to be loaded with each request.
An asterisk can be used to indicate that all other resources/files require an Internet connection:
NETWORK:
*
FALLBACK is if an Internet connection cannot be established , then use "404.html" to replace all files in the /html5/ directory.

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

Cache status
You can view the cache status in the program through the window.applicationCache property.

C/C CodeCopy content to clipboard

var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return ‘UNCACHED’;
break;
case appCache.IDLE: // IDLE == 1
return ‘IDLE’;
break;
case appCache.CHECKING: // CHECKING == 2
return ‘CHECKING’;
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return ‘DOWNLOADING’;
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return ‘UPDATEREADY’;
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return ‘OBSOLETE’;
break;
default:
return ‘UKNOWN CACHE STATUS’;
break;
};

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

C/C CodeCopy content to clipboard

var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user’s cache.
…
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // The fetch was successful, swap in the new cache.
}

Note: Using update() and swapCache() like this will not present the updated resource to the user. This simply lets the browser check whether the manifest file has been updated, then download the specified update content and repopulate the app cache. Therefore, for users to see the updated content, two page downloads are required, one to update the app cache and one to update the page content.

To allow users to see the latest version of your site, set up a listener to listen for the updateready event when the page loads.

C/C CodeCopy content to clipboard

// Check if a new cache is available on page load.
window.addEventListener(‘load’, function(e) {
window.applicationCache.addEventListener(‘updateready’, function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
window.location.reload();
} else {
// Manifest didn’t changed. Nothing new to server.
}
}, false);
}, false);

Listen to events and handle different states accordingly:

C/C CodeCopy content to clipboard

var appCache = window.applicationCache;
// Fired after the first cache of the manifest.
appCache.addEventListener(‘cached’, handleCacheEvent, false);
// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener(‘checking’, handleCacheEvent, false);
// An update was found. The browser is fetching resources.
appCache.addEventListener(‘downloading’, handleCacheEvent, false);
// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener(‘error’, handleCacheError, false);
// Fired after the first download of the manifest.
appCache.addEventListener(‘noupdate’, handleCacheEvent, false);
// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener(‘obsolete’, handleCacheEvent, false);
// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener(‘progress’, handleCacheEvent, false);
// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener(‘updateready’, handleCacheEvent, false);

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

Note:

1. The capacity limit of the site's offline storage is 5M
2. If the manifest file or a file listed internally cannot be downloaded normally, the entire update process will be regarded as a failure, and the browser will continue to use the old cache
3. The html that references the manifest must have the same origin as the manifest file and be in the same domain
4. The relative path used in the manifest, the relative reference is the manifest file
5. The CACHE MANIFEST string should be in The first line, and essential
6. The system will automatically cache the HTML file that references the manifest file
7. The CACHE in the manifest file has nothing to do with the position order of NETWORK and FALLBACK. If it is an implicit declaration, it needs to be in Front
8. The resources in FALLBACK must have the same origin as the manifest file
9. When a resource is cached, the browser directly requests the absolute path and will also access the resource in the cache.
10. Even if the manifest attribute is not set for other pages in the site, the requested resource will be accessed from the cache if it is in the cache
11. When the manifest file changes, the resource request itself will trigger an update

The above is an introduction to the relevant content of HTML5 offline caching Manifest. I hope it will be helpful to everyone's learning.

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