HTML5 application cache implements offline Web pages or applications, and html5 offline

Source: Internet
Author: User
Tags website server

HTML5 application cache implements offline Web pages or applications, and html5 offline

The difference between HTML5 application cache and browser cache.
(Some) the browser will automatically save its own cached files to speed up website loading. However, to implement browser cache, you must satisfy the premise that the network must be connected. If the network is not connected, the website cannot be opened even if the browser enables the cache for a site. Only one error message is received. When using an offline web application, we can proactively tell the browser which files should be obtained or cached from the website server, and still be able to access the website offline.

How to Implement HTML5 application cache.
The implementation of HTML5 application caching is very simple, only three steps are required, and no API is required. You only need to tell the browser what files need to be cached offline, and make some simple settings for the server and web pages.

• Create a cache. manifest file and ensure that the file has the correct content
• Set the content type on the server
• All HTML files point to cache. manifest
First, we need to create a file named cache. manifest, and use Notepad on Windows platform (Other ides are also available ). The file content is as follows:

CACHE MANIFEST
# V1-2013-09-09

CACHE:
Index.html
Favicon. ico
Css/main.css
...

NETWORK :*
CACHE: The following part lists the files to be cached. NETWORK: You can specify an online whitelist to list the files that we do not want to store offline, because the content (www.111cn.net) needs Internet access to make sense. In addition, we can use the shortcut: wildcard *. This tells the browser that the app server gets any file or URL not mentioned in the display section. Note that note v1 in the preceding example is necessary. The browser updates the application cache only when the cache. manifest file changes. If you want to change the cache resources, you must modify the content in the file at the same time to let the browser know that they need to update the cache. You can make any changes to the configuration file, but everyone agrees that the best practice is to correct the version number (v *).

Next, you need to set the content type on the server:

If you are using the Apache server, add the following code to the. htaccess file:

AddType text/cache-manifest. manifest at the end, we need to point the HTML page to the inventory file. Set the manifest attribute of the HTML element on each page to complete this step:

<Html manifest = "/cache. manifest"> after this step is completed, all the offline web cache steps are completed. Because the contents of the browsed files are not changed and stored locally, the webpage can be opened faster (even online ).
Notes:

• The manifest attribute of the html element must be set for each html page of the website. Be sure to do this;
• You can only have one cache. manifest file in your entire website application (it is recommended to put it in the root directory of the website );
• Some browsers (such as IE8-) do not support HTML5 offline caching;
From: http://www.111cn.net/wy/html5/52979.htm


After html5 offline cache is applied, can I save traffic? I am working on embedded web pages on the client. Prawn helps me with the Best regards!

Of course.
 
The appcache folder can be deleted.

Cache is the cache, and all browsing operations form cache files. If you use qq to delete images, the headers of your friends are cached and downloaded again after deletion. You can use the cleanup software to clean up and prevent accidental deletion.
From UC Browser

Related Article

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.