Comments: Open a Web page. After loading the page, if the network is suddenly disconnected, the page will be gone after you refresh it. How can this situation be prevented? The emergence of html5 makes us suddenly enlightened. Next we will give you a detailed explanation of opening a webpage. After loading, if the network is suddenly disconnected, the page will be gone after you refresh it.
Have you ever thought about whether the page is just refreshed? Open another page in the new window and enter the same URL to open the page in the disconnected status .. HTML5 offline applications provide such a function.
When loading data on the page, you can set some images, flash, css, js, html, and other files to be cached. When the file cannot be connected to the Internet next time, you can use the cached files. This is the Offline Application of HTML5.
In fact, it is easy to implement.
The server is required. Here we will use the tomcat server to explain.
First, you need to configure the mine Type of the file with the. manifest suffix to text/cache-manifest.
When talking about tomcat configuration, familiar users will naturally think of the web. xml file. That's right, just add the following configuration to the file:
The Code is as follows:
<Mime-mapping>
<Extension> manifest </extension>
<Mime-type> text/cache-manifest </mime-type>
</Mime-mapping>
Then write a xxx. manifest file. xxx is your own name. The format of this file is as follows:
The Code is as follows:
CACHE MANIFEST
# Version 1.5
CACHE:
MyTest.html
CSS/main.css
Javascript/bwH5LS. js
Exp-calif-logo.gif
The first line is required. It identifies the configuration file of manifest.
# Version 1.5
This is a comment, which has no practical effect. Here I just want the browser to update the cache file. Because when the manifest file is the same as the original one, the browser will not reload the cached file, so we can use this annotation to modify the version number and then let the browser update the cache.
CACHE:
This line indicates that the following files are to be cached. In this example, the current page: MyTest.html, and some css and js files and images are cached.
Some examples of keywords are not mentioned, that is
NETWORK:
FALLBACK:
NETWORK refers to a page that does not want to be cached. FALLBACK refers to an alternative solution where the requested file is not found or the file server does not respond. For example, if we want to request a nested page, but the server on this page cannot be connected, so I can switch to another specified page.
This is step 2 and Step 3. You only need to add the location of manifest to the <Html manifest = "NAME. manifest">
Now, you can implement simple offline applications.
Where are the cached files stored?
Test on chrome and find that it saves these files in Parts Based on its own mechanism, so I can't find the complete file. The stored data is stored in:
C: \ Users \ jasonling \ AppData \ Local \ Google \ Chrome \ User Data \ Default. I still don't know how to save it.
The files on Firefox are stored according to their own mechanism. However, after I opened the files with sqlite, I found the specific information of the cached files:
If you are interested, you can try it and see if there will be any new discoveries.
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
