Browser cache mechanism (2)-Application cache and Cache Mechanism

Browser cache mechanism (2)-Application cache and Cache Mechanism

This article introduces the link browser cache mechanism in the simplified book 2-Application Cache

Browser cache mechanism (2)-Application Cache

In the company's projects, some mobile Web pages use the application cache, so I wrote an article to summarize the content of the application cache.

1. Application cache Overview

Application cache is a cache mechanism provided by html5. it allows WEB applications to run offline. In addition to earlier versions of IE, modern browsers such as firefox, chrome, and safari mostly support HTML5 standards. Application cache has the following advantages:

• Offline browsing: You can browse the webpage content offline.
• Faster: because the data is stored in the browser cache, the browser only downloads resources changed by the server (onlyThe. appcache file will be downloaded again only when its status changes.The cache resource specified by the. appcache file) to reduce the server load.

2. Application cache Configuration

To enable application storage, add manifest to the HTML tag of the Web page. For example, the test.html code of the test page is as follows:

The test. appcache file is the cache manifest file, and the cached resources are all specified in this list file. After the application cache is used, the process for loading resources is as follows (from reference 1 ):

• 1) when the browser accesses a document containing the manifest attribute, if the application cache does not exist, the browser loads the document and obtains the list of files to be cached in the list, generate the first version of the application cache.

• 2) Subsequent accesses to this document and the cache resources listed in the list file will directly load the browser from the application cache.At the same time, the browser will send a checking event to the window. applicationCache object to obtain the list file while following the classic cache. For more information about the HTTP classic cache mechanism, see the previous article..

• 3) if the current cache list file is the latest copy, the browser will send a noupdate event to the applicationCache object, and the update process ends.Therefore, if you modify any cache resources on the server, you need to modify the configuration file at the same time so that the browser can know your modifications..

• 4) if the list file is cachedModified, The cache resources listed in the list file (also including the cache through applicationCache. files Added to the cache by the add method will be put into a temporary cache. For each file added to the temporary cache, the browser will send a progress event to applicationCache. If any error occurs, the browser sends an error and suspends the update.

• 5) once all files are obtained successfully, they are automatically transferred to the real offline cache and a cached event is sent to the applicationCache object. Since the document has been loaded from the cache to the browser, the updated document will not be re-rendered until the page is reloaded (you can manually or through a program ).That is to say, if your cache resource is updated, the cache list file is also updated. The document will not be updated when the page is loaded for the first time. It will only be updated when the page is reloaded.

To facilitate the test, if you need to clear the offline cache, chrome can clear the browser data or directly access chrome: // appcache-internals/in settings. For other browsers, refer to reference 1.

3. cache List Files

A typical cache list file test. appcache is as follows:

CACHE MANIFEST# v1 - 2015-03-14 23:23# This is a comment.CACHE:test.htmlnomanifest.htmlNETWORK:*FALLBACK:/fallback fallback.html

The first line of the cache list file must beCACHE MANIFESTAnd add a comment (starting ). There are also three paragraph headers with the following meanings:

Paragraph title	Description
CACHE	Display records. The following lists the resources that need to be switched to the application cache.
NETWORK	Network record, whitelist from network access
FALLBACK	Backup record, used when the request resource fails

An application cache contains at least one resource, specified by the URI. In addition to the display records, network records, and backup records mentioned above, all resources also have a category called primary record. Let's take a look:

1) display records

Each row is a valid URI associated with a resource to be cached (Wildcards are not allowed in this section ). White spaces are allowed before and after the Uris of each row. . However, all text files are added with manifest. For example, the nomanifest.html file in my document does not have the manifest attribute, but the file containing the manifest attribute is automatically added to the application cache after being accessed.

2) network records

Each row is a valid URI. This section can contain wildcards. For example, the preceding * indicates that resources other than the application cache need to be obtained through the network. If this parameter is not set, no resources in the application cache will be accessible. For example, if I do not specify the network, the image test.gif cannot be accessed.

3) backup records

Each row is a valid URI (associated with a resource). When the specified resource cannot be accessed, access the associated resource. For example, when you access/fallback or its sub-path, such as/fallback/child, if there is no corresponding resource, fallback.html will be created.

4) Master Record

The main record indicates that the HTML Tag contains the document of manifest.pdf, such as main.html.The primary record is added to the application Cache during access even if it is not listed in the display record. For example, if main.html is not in the CACHE list as the master record, it will also be added to the application CACHE during access.

#main.html

4. cache status (from reference 1)

• UNCACHED (UNCACHED): a special value used to indicate that an application cache object has not been fully initialized.

• IDLE (IDLE): The application cache is not in the update process.

• Check: the list has been obtained and updates have been checked.

• DOWNLOADING: download resources and add them to the cache. This is caused by configuration changes.

• UPDATEREADY (Update ready): a new version of application cache can be used. There is a corresponding event updateready. When an update is downloaded and the swapCache () method is not used to activate the update, this event is triggered instead of a cached event.

• OBSOLETE (OBSOLETE): The application cache is now deprecated.
  You can use the following code to test the Update Status of the cache list:

function onUpdateReady() {  alert('found new version!');}window.applicationCache.addEventListener('updateready', onUpdateReady);if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {  onUpdateReady();}

5. Summary

• Resources in the display records are added to the application cache. The resource document in the display record does not have to add the manifest attribute to the html Tag, as long as the application cache is added to the list.
• A master record is a document whose html Tag contains the manifest attribute. Even if it is not in the list of display records, it will be added to the application cache.
• After the cached resources are updated, the cache list files must be updated synchronously. Otherwise, the browser cannot know the changes of the cached resources.
• The NETWORK section must be set. Otherwise, other resources cannot be accessed.
• The cache list file should not be in the display record, nor be cached by the server in any way. For example, apache can set that the cache list file is not cached.
  ExpiresByType text/cache-manifest "access plus 0 seconds"
• If a parameter is added to the cache file, for example,/test.html? In this case, the application cache is directly accessed and added to the application cache. The following figure shows the access to chrome: // appcache-internals/. You can view various types of records:

Flags   URL Size (headers and data)Fallback,   http://localhost/fallback.html  295 BMaster, http://localhost/main.html  703 BExplicit,   http://localhost/nomanifest.html    305 BManifest,   http://localhost/test.appcache  419 BExplicit,   http://localhost/test.html  732 BMaster, http://localhost/test.html?name=test    732 B

6. References

Use application cache (I have extracted a lot of content from most of the content and I would like to express my gratitude to the original author)