HTML5 offline Application Details

HTML5 offline Application details

In the HTML file, configure the following:

">

In the Name.manifest file, configure the following:

CACHE MANIFEST

#2014 -07-27 v1.0

Index.html

Index.css

Index.js

Images/self.jpg

NETWORK

*

①cache manifest all uppercase.

The line that begins with ② "#" is a comment.

③ cache file path corresponds explicitly.

④ file suffix can be used casually, recommended to use. manifest or. AppCache. But the most important depends on the configuration of the Web server, so that it can recognize the two extensions. If you are not your own server, ask your hosting company what extensions are configured to support the profile. Different Server configuration MIME type method is not the same, the following I use the simulation server Software Wampserver, the fields written under Apache->httpd.conf are as follows: AddType text/cache-manifest. Manifest (can be placed anywhere, it is recommended to place in the same type field).

⑤ different browsers have a very different limit on the offline app cache, the mobile ipad and iphone in the safari limit of 5MB, desktop, Firefox default maximum 50MB, and users can adjust this limit (option---Advanced network) Chrome is currently only 5MB, and if the cache reaches a space limit, files that have already been downloaded for caching will be completely deleted and offline equivalent to white.

⑥ must add the same properties to each page that is included in the offline app, such as: index.html, self.html in the cache, then all two files are added "; Of course, offline apps can have any number of them, each of which corresponds to its own profile.

⑦ Update cache content, As soon as you change any place under the Name.manifest file (including comments), the Name.manifest file becomes a new file, and the browser discovers that the new profile silently downloads all of the files configured in it, and then replaces the original cached content with the newly downloaded file, and the next time the user accesses the same page (or refreshes the page ), the new content is displayed, and if you want the user to switch to the newly downloaded content right away, JavaScript is required, go to ⑩.

⑧network It is best not to omit, "*" means all content that is not cached, or, of course, a list of content that you do not want to be cached. "*" cannot be used in the list because the HTML5 spec-makers worry that someone will accidentally cache a large site.

⑨fallback means that depending on whether the computer is online or not, the "FALLBACK" block can appear anywhere in the description file, which is the page accessed at the time of networking (the browser will request the file to the Web server as usual) The second file is a page that is accessed when the Internet is not available (the browser automatically downloads and caches the file when it was last networked); Of course "FALLBACK:" can also be omitted. You can use the wildcard character "/" under "FALLBACK:". Like what:

FALLBACK:

/offline.html

Currently the wildcard character in Firefox can also be used "*", you can also specify subdirectories to match a smaller range of files:

FALLBACK:

http://www.wei.com/folder/* offline.html

You can also specify that only certain types of files are matched:

FALLBACK:

*.jpg offline.jpg

The ⑩ uses a relatively limited JavaScript interface to interact with offline application functionality, which is defined by the Applicationcache object. In this example, the Onupdateready event (indicating that an update has been made) is presented. To specify an update through javascript:

<script>

Window.onload=function () {

Applicationcache.onupdateready=function () {

if (Confirm (" a new version of the offline cache has been updated to refresh to see the latest effects ")) {

Window.location.reload ();

}

};

};

</script>

Note: You can simulate confirm display a more friendly and beautiful user interface.

Curtain: This article picking from the wrestling +HTML5 cheats (formerly: [Html5:the Missing Manual])--Matthew MacDonald, Lisongfeng Zhu Wei translation, People's post and telecommunications publishing-August 2012

-------------------------------very gorgeous split-line----------------------------

... Without the (≧▽≦)/...

HTML5 offline Application details