1. Introduction to App CacheIn the company project, some mobile version of the Web page just use the application cache, so by the way to write an article to summarize the application of cache content.
The application cache (application cache) is a set of caching mechanisms provided by HTML5, allowing Web applications to run offline. In addition to some older versions of IE, modern browsers such as Firefox,chrome,safari mostly support the HTML5 standard. The main benefits of using the app cache are:
To open the app cache, you need to add the manifest attribute to the HTML markup of the Web page, as shown in my test page test.html code:
<html manifest = "Test.appcache" ; <head ; < title ; appcache</ Title , </head ; <body ; test Appcache<img src = "/test.gif" </img ; body ; </html ; Where the Test.appcache file is a cached manifest file (cache manifest), the cached resource is specified in this manifest file. Once the application cache is used, the process of loading the resources is as follows (excerpt from reference 1):
1) When the browser accesses a document containing the manifest attribute, if the app cache does not exist, the browser loads the document, gets the list of files that need to be cached in the manifest, and generates the first version of the application cache.
2) Subsequent access to the document and the cached resources listed in the manifest file will cause the browser to load directly from the app cache. at the same time, the browser will also send a checking event to the Window.applicationcache object, in accordance with the classic cache to obtain the manifest file, about the HTTP classic caching mechanism , see the previous article.
3) If the current cache manifest file is a copy that is up to date, the browser sends a Noupdate event to the Applicationcache object, at which point the update process ends. Therefore, if you modify any of the cache resources on the server, you need to modify the manifest file at the same time, so that the browser will know your changes, in addition, also .
4) If the cache manifest file has been modified , The cache resources listed in the manifest file (which also includes files added to the cache through the Applicationcache.add method) are placed in a temporary cache, and for each file that is added to the temporary cache, the browser sends a progress event to the Applicationcache. If any errors occur, the browser sends an error event and pauses the update.
5) Once the files are successful, they are automatically transferred to the real offline cache, and a cached event is sent to the Applicationcache object. Since the document has already been loaded from the cache into the browser, the updated document will not be re-rendered until the page reloads (either manually or through the program). that is, if your cache resource is updated and the cache manifest file is updated, the first time the page is loaded, the document will not be updated until the page reloads.
To facilitate testing, if you need to clear the offline cache, chrome can be cleared by clearing the browser data in settings or by accessing chrome://appcache-internals/directly, other browsers reference reference 1.
3. Cache the manifest fileA typical cache manifest 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 manifest file must be CACHE MANIFEST , and then you can add comments (beginning with #). There are also three paragraph headings, meaning the following:
| paragraph title | Description |
|---|---|
| CACHE | Display records, the following list is a display resource that needs to be switched to the app cache |
| NETWORK | Network record, need to access the whitelist list from the network |
| FALLBACK | Fallback record, using when request resource fails |
An application cache will contain at least one resource, specified by the URI. All resources in addition to the above mentioned display records, network Records, backup records, there is a category called Master record. Here's a look at hit:
1) Display recordEach row is a valid URI associated with a resource to be cached (wildcard characters are not allowed in this paragraph). Whitespace characters are allowed before and after each line's URI. The display record shows the specified list of resources that need to be added to the app cache, such as the Test.appcache file in the above example that needs to display the cache as test.html,nomanifest.html. Note that not all document HTML attributes have to be manifest attributes, such as the nomanifest.html document in my list has no manifest property, but once the document containing the manifest attribute is accessed, it is automatically added to the application cache.
2) Network recordEach line is a valid URI that can be used with wildcards, such as the * above, to indicate that resources other than the application cache need to be fetched over the network. If this is not set, then no resources in the app cache will be accessible. For example, if I do not specify the network, then test.gif this image can not be accessed.
3) Backup recordEach row is a legitimate URI (associated with a resource) that accesses the associated resource later when the specified resource is inaccessible. For example, when accessing/fallback or its sub-paths such as the/fallback/child path, if there is no corresponding resource, the fallback.html will be accessed.
4) Master RecordThe master record refers to the document that contains the manifest attribute in the HTML tag, such as the following main.html. master records are added to the app cache when they are accessed, even if they are not listed in the display record. such as main.html as the master record, although not in the cache list, but at the time of access, will also be added to the application cache.
4. Cache status (from reference 1)#main.html<html manifest="test.appcache"> <head><title>main</title></head> <body>main html</body></html>
Uncached (not cached): A special value that indicates that an application cache object has not been fully initialized.
Idle (idle): The app cache is not in the process of being updated at this time.
CHECKING (check): The list has been completed and checked for updates.
Downloading (download): Download the resource and prepare to add it to the cache, due to changes in the manifest.
Updateready (update Ready): A new version of the app cache can be used. There is a corresponding event updateready that fires when an update is downloaded and the update is not activated using the SwapCache () method, not the cached event.
OBSOLETE (deprecated): The app cache is now deprecated.
The following code can be used to test the cache inventory Update situation:
5. Summaryfunction onUpdateReady() { alert(‘found new version!‘);}window.applicationCache.addEventListener(‘updateready‘, onUpdateReady);if(windowwindow.applicationCache.UPDATEREADY) { onUpdateReady();}
expiresbytype text/cache-manifest "Access plus 0 seconds" 6. ReferencesFlags URLand data)Fallback, http://localhost/fallback.html 295http://localhost/main.html 703 BExplicit, http://localhost/nomanifest.html 305 BManifest, http://localhost/test.appcache 419 BExplicit, http://localhost/test.html 732http://localhost/test.html?name=test 732 B
Use the app cache (refer to most of the content and extract a lot of content, thank the original author)
Browser caching mechanism (2)-Application cache
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
