HTML5 creating an offline Web application

Source: Internet
Author: User
Tags deprecated

The Offline application caching feature allows us to specify all the resources required for a Web application.

This allows the browser to download the HTML documents as they are loaded.

1) define browser cache:

Enable offline caching-Create a manifest file and reference it in the manifest attribute of the HTML element;

Specify the resources to be cached in the offline application-lists the resources at the top of the manifest file or in the cache area;

Specify the alternate content to display when the resource is unavailable-the contents are listed in the fallback area of the manifest file;

Point to the resource that is always requested by the server-list the contents in the Betwork area of the manifest file;

Example: Create a Fruit.appcache manifest file first

    CACHE MANIFEST            example.html      banana100.png            FALLBACK:      * 404.html            NETWORK:      Cherries100.png            CACHE:       apple100.png  

then create a 404.html file for the link to the HTML file is not in the offline cache can be used instead of

<! DOCTYPE html>
finally create an H that needs to enable offline cachingtml File
<! DOCTYPE html>2) Detect browser status:

window.navigator.online--returns False if the browser determines to be offline, or True if the browser may be online;

3) Use offline caching:

You can use the offline cache directly by calling the Window.applicationcache property, which returns a Applicationcache object;
Applicationcache Object Members:

Update ()--updates the cache to ensure that the items in the list have been downloaded with the latest version;

SwapCache ()-swaps the current cache with newer caches;

status--returns the state of the cache;

3.1) Applicationcache the Status property value of the object:

0--uncached--This document is not cached, or the cached data has not been downloaded;

1--idle--Cache does not perform any operations;

2--checking--Browser is checking for updates to the items specified in the list or list;

3--downloading--Browser is downloading inventory or content updates;

4--updateready--the updated cache data is available;

The 5--obsolete--cache data is deprecated and should not be used again. This is caused by the return of the HTTP status code 4xx when the manifest file is requested.

(usually indicates that the manifest file has been removed/deleted);

3.2) an event defined by theApplicationcache object that is triggered when the cache state changes:

checking--Browser is getting the initial inventory or checking the inventory update;

noupdate--no updates available, the current list is the latest version;

downloading--Browser is downloading the content specified in the list;

progress--triggered during the download phase;

All content specified in the cached--list has been downloaded and cached;

updateready--new resources have been downloaded and can be used;

obsolete--cache is deprecated;

<! DOCTYPE html>


Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

HTML5 creating an offline Web application

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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