First, what is the application cache?
HTML5 introduces the application cache (application cache), which means that the Web app can be cached and accessed without an Internet connection.
Second, the advantage
Offline Browsing-users can use them when the app is offline
Speed-cached resources are loaded faster
Reduce server load-The browser will download only updated or changed resources from the server.
Three, the principle
HTML5 offline storage is based on a new. AppCache file's caching mechanism (not the storage technology) that stores resources offline through the parse list on the file, and these resources are stored as cookies. Then, when the network is offline, the browser will display the page with data that is stored offline.
Iv. How to use?
Include the Manifest property in the label of the document.
Write resources for offline storage in the manifest file.
In the offline state, the operation Window.applicationcache the requirement implementation.
1. Include the manifest attribute in the
Demo.html:
<!DOCTYPE HTML><HTMLLang= "en"Manifest= "Demo.appcache"><Head> <MetaCharSet= "UTF-8"> <title>Demo</title></Head><Body> <imgsrc= "Img.jpg"Height= "$"width= "The "alt="">Other content ...</Body></HTML>
2. Write the resources for offline storage in the manifest file.
The manifest file is a simple text file that tells the browser what to cache (as well as what is not cached).
The manifest file can be divided into three parts:
Cache MANIFEST-Files listed under this heading will be cached after the first download
NETWORK-Files listed under this heading require a connection to the server and are not cached, and you can use asterisks to indicate that all other resources/files except the cache manifest require an Internet connection.
FALLBACK-Files listed under this heading provide an alternative page (such as 404 pages) When the page is inaccessible.
Demo.appcache:
CACHE manifest#version 1.0CACHE: img.jpgnetwork: *fallback: /demo//404.html
The code means:
The IMG in demo.html is cached after the first download, the other file content requires an Internet connection, and "404.html" replaces all files in the/demo/directory if an Internet connection cannot be established.
Attention:
If you edit a picture, or modify a JavaScript function, these changes do not make the cache update, and the cache is updated when the manifest file changes. Starting with "#" is the comment line, and updating the date and version number in the comment line is a way to enable the browser to re-cache the file.
The manifest file needs to be configured with the correct mime-type, which is "text/cache-manifest". Must be configured on the Web server.
Add the Conf/web.xml in the Tomcat server:
<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest </mime-type></mime-mapping>
Under the network panel of the developer tools, you can see that the size of the img.jpg is (from disk cache), which means that it is read from the cache.
3. In the offline state, the operation Window.applicationcache the demand .
Five, update the cache
Once the app is cached, it remains cached until the following happens:
User empties browser cache
Manifest file is modified
App Cache updated by program
VI. matters of caution
Browser capacity limits for cached data may be different (some browser settings are limited to 5MB per site).
If the manifest file, or one of the files enumerated in the file is not downloaded properly, the entire update process will fail, the browser continues to use the old cache.
The HTML that references manifest must be the same as the manifest file, under the same domain. The resources in the fallback must be the same as the manifest file.
When the manifest file changes, the update request resource is triggered. The HTML file that references the manifest file is automatically cached.
html5-Application Cache (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
