Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what is the offline cache Manifest of HTML5". In the daily operation, I believe that many people have doubts about what the offline cache Manifest of HTML5 is. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "what is the offline cache Manifest of HTML5?" Next, please follow the editor to study!

What is manifest?

To put it simply, manifest allows your application to be accessed without a net.

It has three major advantages:

1. Offline browsing, which can be accessed normally without Internet.

2. Faster loading speed, faster local access speed of cache

3. Reduce the pressure of service request. There is no need to request again after the file is cached, only the file that needs to be updated.

How to use it?

XML/HTML Code copies content to the clipboard

...

You need to include the manifest attribute in 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. This eliminates the need to specify which pages need to be cached in the manifest file.

The Manifest attribute can specify either an absolute URL or a relative path, but an absolute URL needs to be homologous to web app. A manifest file can be any extended file type, but it must have the correct mime-type, such as adding to Apache

"AddType text/cache-manifest .appcache".

Manifest file

A manifest file is a simple text file that tells the browser what is cached (and what is not cached).

The manifest file can be divided into three parts:

CACHE MANIFEST-the files listed under this heading will be cached after the first download

NETWORK-the files listed under this heading require a connection to the server and will not be cached

FALLBACK-the file listed under this heading specifies the fallback page (such as 404 page) if the page is inaccessible.

A complete manifest file:

XML/HTML Code copies content to the 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, and # is followed by comments. Here are the files that need cache. Relative paths are needed. NETWORK is the file that needs to be loaded for each request.

You can use an asterisk to indicate that all other resources / files require an Internet connection:

NETWORK:

*

FALLBACK means that if an Internet connection cannot be established, replace all files in the / html5/ directory with "404.html".

Update mechanism

There are three ways to update the manifest cache:

1. User empties 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 the program

Cache statu

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

Copy the content to the clipboard with Candlestick + Code

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 cache programmatically, first call applicationCache.update (). This will attempt to update the user's cache (requires that the manifest file has been changed). Finally, when applicationCache.status is in the UPDATEREADY state, call applicationCache.swapCache (), and the old cache will be replaced with the new one.

Copy the content to the clipboard with Candlestick + Code

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 does not present the updated resource to the user. This simply asks the browser to check if the manifest file has been updated, then download the specified update and repopulate the app cache. Therefore, in order for the user to see the updated content, you need to download the page twice, once to update the app cache and once to update the page content.

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

Copy the content to the clipboard with Candlestick + Code

/ / 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 for events and handle different states accordingly:

Copy the content to the clipboard with Candlestick + Code

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 download of the manifest file or one of the resources specified in the file fails, the entire update fails. In this case, the browser will continue to try out the old application cache.

Note:

1. The capacity limit for offline storage at the site is 5m

two。 If the manifest file, or one of the files listed internally, cannot be downloaded properly, the entire update process will be considered a failure, and the browser will continue to use all the old cache.

3. The html that references manifest must have the same origin as the manifest file and be in the same domain

4. The relative path used in manifest, and the relative reference is the 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 manifest files

7. The CACHE in the manifest file has nothing to do with the location order of the NETWORK,FALLBACK. If it is implicitly declared, it needs to be at the front.

8. The resources in FALLBACK must be of the same origin as the manifest file

9. When a resource is cached, the browser directly requests this absolute path to also access the resource in the cache.

10. Even if the manifest property 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 triggers the update

At this point, the study on "what is the offline cache Manifest of HTML5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.