Home > Developer > Mobile Develop

HTML5 offline data caching using the application cache interface

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. Configuring the cache file caches manifest

MIME Type:text/cache-manifest
File name: Name.appcache
Role: Used to configure files that need to be cached

2. How to use

To add a MIME TYPE on the server
Add in Apache virtual host

    1. AddType text/cache-manifest. AppCache

Create name.manifest, the file suffix can be customized, after the definition needs to add the corresponding MIME TYPE on the server

    1. CACHE MANIFEST
    3. #VERSION 1.0
    5. CACHE:
    6. Index.html
    7. ./js/jquery.js
    8. ./css/style.css
    10. NETWORK:
    11. ./upload/
    13. Failback:
    14. ./proxy/proxy.html

CACHE MANIFEST: File ID
#VERSION 1.0: Version number, just a line of comments, but changes can update the cache
Cache: Represents the file to be cached
NETWORK: Indicates a file that needs to connect to the server
Failback: Represents an alternative when there is no response


<HTML manifest="Name.appcache">

3. Update method

1. Automatic Update: The browser accesses the app cache on the first visit, and then only updates the cache when the cache manifest file changes (even if the comment changes are updated, #VERSION 1.0), and the cache Changes to the resource file in the manifest do not trigger the update.

2. Manual update: update the cache programmatically, call Applicationcache.update () first, and this action attempts to update the user's cache (provided the cache manifest file has changed). Then, when Applicationcache.status is in the Updateready state, call Applicationcache.swapcache () to replace the original cache with the new cache.

    1. Ar appCache = Window.applicationcache;
    2. Appcache.update ();  //Attempt to update the user ' s cache.
    3. ...
    4. if (Appcache.status = = Window.applicationCache.UPDATEREADY) {
    5. Appcache.swapcache ();  //The fetch is successful, swap in the new cache.
    6. }

Using update () and SwapCache () will not provide the user with updated resources, but will only let the browser check for a new cache manifest manifest, download the specified updates, and repopulate the application cache. Therefore, two loads are required to provide new content to the user. The first time is to get a new app cache, and the second is to refresh the page content.

To avoid the hassle of reloading two times, you can set up listeners to listen for Updateready events when the page loads.

  2. Check If a new cache is available on page load.
  4. Window.addeventlistener (' load ', function (e) {
  6. Window.applicationCache.addEventListener (' updateready ', function (e) {
  8. if (window.applicationCache.status = = Window.applicationCache.UPDATEREADY) {
  10. //Browser downloaded a new app cache.
  12. //Swap it in and reload the page to get the new hotness.
  14. Window.applicationCache.swapCache ();
  16. if (Confirm (' A new version of this site is available. Load it? ')) {  
  18. Window.location.reload ();
  20. }
  22. } Else {
  24. //Manifest didn ' t changed.  Nothing new to server.
  26. }
  28. }, false);
  30. }, false);

4. On-line status detection and monitoring

detection:The Navigator.online property indicates whether the current is online, if true, for online. If False, indicates offline.
monitoring: when the online/offline status switch triggers the Online/offline event, both events are triggered on the BODY element and bubbled up in the order of document.body,document and window.

6. Precautions

1. The capacity limit for site offline storage is 5M
2. If the manifest file, or one of the files listed in the file is not properly downloaded, the entire update process will be considered a failure, the browser continues to use the old cache
3. The HTML that references manifest must be the same as the manifest file, under the same domain
4. Relative path used in manifest, relative reference is 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 the manifest file
7. The cache in the manifest file has no relation to the position order of the network,fallback, and if it is implicitly declared it needs to be in the front
8. Resources in fallback must be the same as manifest files
9. When a resource is cached, the browser directly requests that the absolute path also accesses the resources in the cache.
10. Other pages in the site if the manifest property is not set, the requested resource is also accessed from the cache in the cache
11. When the manifest file changes, the resource request itself triggers the update

HTML5 offline data caching using the application cache interface

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
using chromebook offline offline speech recognition data epg data offline offline speech recognition data telephony application programming interface api application programming interface multiple inheritance using interface

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More