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

This article mainly introduces "how beginners use Application Cache". In daily operation, I believe many people have doubts about how beginners use Application Cache. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "beginners how to use Application Cache"! Next, please follow the editor to study!

For web app, offline application function has become more and more important. Admittedly, browsers have caching mechanisms themselves, but these caching mechanisms are not reliable enough and may not work the way you want them to. HTML5 deals with some problems in offline applications through ApplicationCache interface.

Using this interface gives your application three advantages:

◆ offline browsing-users can still browse the entire site when they can't connect to the Internet.

◆ Speed-cached resources are stored locally, so they can be loaded more quickly.

◆ less server load-browsers only need to carry changed resources from the server side, and the same resources do not need to be downloaded repeatedly.

Application Cache (or AppCache) allows a developer to specify which file the browser needs to save. When users are offline, even if they press the refresh button, your application will load and work correctly.

CACHE MANIFEST file

The cache manifest file is a simple text file that lists the resources that the browser needs to cache.

Reference a MANIFEST file

In order for an application to enable application cache, you need to include the manifest attribute in the html tag of the document, as shown below:

...

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. An manifest file can be any extended file type, but it must have the correct mime-type. As follows:

...

A manifest file needs the correct mime-type, text/cache-manifest. You can add a custom file type (a custom file type) to your web server, or add an .htaccess configuration.

For example, to be able to parse this mime-type in Apache, add the following code to your configuration file:

AddType text/cache-manifest .appcache

Or, if your application is in Google App Engine, add code to the app.yaml file:

-url: / mystaticdir/ (. *\ .appcache) static_files: mystaticdir/\ 1 mime_type: text/cache-manifest upload: mystaticdir/ (.*\ .appcache)

The structure of MANIFEST FILE

A simple manifest file might look like this:

CACHE MANIFEST

Index.html

Stylesheet.css

Images/logo.png

Scripts/main.js

This example will cache four files in the page specified to use this manifest.

There are a few points to pay attention to:

The ◆ must include the CACHE MANIFEST string in the * line.

The maximum amount of data that a ◆ site can cache is 5MB. However, if you are developing for Chrome Web Store, you can use unlimitedStorage to remove this limitation.

◆ if the download of the manifest file or one of the resources specified in it fails, the update of the entire cache will fail. In this case, the browser will use the old application cache.

Let's look at a more complex example:

CACHE MANIFEST # 2010-06-18:v2 # Explicitly cached 'master entries'. CACHE: / favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Resources that require the user to be online. NETWORK: login.php / myapi http://api.twitter.com # static.html will be served if main.py is inaccessible # offline.jpg will be served in place of all images in images/large/ # offline.html will be served in place of all other .html files FALLBACK: / main.py / static.html images/large/ images/offline.jpg * .html / offline.html

Comments that start with "#" can also be used for other purposes. An application updates cache only when the manifest file changes. For example, if you edit an image or overwrite a Javascript function, cache will not be updated. You must rewrite the manifest file itself to inform the browser that the cache file needs to be updated. You can make sure that the user has a * version of your software by adding a comment in the manifest file with a version number, or a file hash value, or a timestamp. If a new version appears, you can also update cache programmatically, as discussed in Updating the cache.

A manifest file may consist of three parts: CACHE, NETWORK, and FALLBACK.

CACHE:

This is the default section, and files listed under this entry (or immediately after the CACHE MANIFEST string) will enter cache after * downloads.

NETWORK:

The resources listed in this section are resources that need to be used online. None of them will enter the cache, even if the user is offline. Wildcards may be used in this section.

FALLBACK:

The optional section specifies what kind of page will be rendered if the resource acquisition fails. * the URL is the resource, and the second is the fallback page. Both URL must be relative addresses and specified by the same manifest file. You can use Wildcards.

Note: these three parts can appear in any order in a manifest file, and each part can appear multiple times in a manifest file.

The following manifest file defines a "catch-all" page (offline.html) that will be displayed when a user tries to access the root node of the site offline. It also indicates other resources that need to be used online (such as resources on remote sites).

CACHE MANIFEST # 2010-06-18:v3 # Explicitly cached entries index.html css/style.css # offline.html will be displayed if the user is offline FALLBACK: / / offline.html # All other resources (e.g. Sites) require the user to be online. NETWORK: * # Additional resources to cache CACHE: images/logo1.png images/logo2.png images/logo3.png

Note: HTML files that reference your manifest file are automatically cached, so there is no need to specify this file in your manifest file, but it is better to specify this file in the manifest file.

Note: both SSL-based HTTP cache headers and caching restrictions on the page will be rewritten by cache manifests. As a result, https-based pages can also work offline.

Update cache (CACHE)

If an application is offline, it maintains its cached state unless the following events occur:

◆ users erase the data stored on your site in the browser.

◆ manifest file has been modified. Note: modifying a file listed in the manifest file does not cause the browser to re-cache the resource. The manifest file itself must have changed before it can be re-cached.

◆ app cache has been updated programmatically.

Cache status CACHE STATUS

In the program, you can access the browser's app cache through the window.applicationCache object. You can check the status property to get the current status of cache:

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). * * when applicationCache.status is in UPDATEREADY state, call applicationCache.swapCache (), and the old cache will be replaced with the new one.

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.

The good news is that you can avoid the hassle of downloading two pages. To allow users to see the * * version of your site, set up a listener to listen for updateready events when the page loads.

/ / 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 (); if (confirm ('A new version of this site is available.) Load it?') {_ window.location.reload ();}} else {/ / Manifest didn't changed. Nothing new to server. }, false);}, false)

APPCACHE event (APPCACHE EVENTS)

As you may have thought, there are more events that reflect the state of cache. Events such as downloads, app cache updates, errors, and so on, cause the browser to trigger the event. The following code snippet sets listeners for each type of cache event:

Function handleCacheEvent (e) {/ / … } function handleCacheError (e) {alert ('Error: Cache failed to updated');}; / / 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.

At this point, the study of "how beginners use Application Cache" 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.