Comment: Open a web page, and after loading, if the network is suddenly disconnected, then the page will disappear after you refresh. How can you prevent this situation from happening? The emergence of html5 made us suddenly enlightened, and we will explain it in detail for you next
Open a web page, and after loading, if the network is suddenly disconnected, then the page will be gone after you refresh.Have you ever thought that after refreshing the page, you will still be the page just now, open another page in a new window, enter the same URL, and open the page if it is out of the network. . HTML5 offline applications are providing such a feature.
When the data in the page is loaded, you can set some images, flash, css, js, html and other files to be cached by yourself. When the data in the page is not connected to the Internet next time, you can use those cached files. This is the offline application of HTML5.
In fact, it is very simple to implement.
A server is required. Here we use the tomcat server to explain.
First, configure the mine type of the file with the .manifest suffix to text/cache-manifest.
When talking about tomcat configuration, familiar friends will naturally think of the web.xml file. Yes, just add the following configuration to the file:
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
Then write an xxx.manifest file, xxx is a name you chose yourself. The format of this file 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, which identifies this is the configuration file for manifest.
#version 1.5
This sentence is a comment and has no practical effect. I just want the browser to update the cache file here. Because when the manifest file is the same as before, the browser will not reload the cache file, so we can use this comment to modify the version number on the one hand, and let the browser update the cache on the other hand.
CACHE:
This line indicates that the following file is to be cached. In the example, the current page: MyTest.html, as well as some css and js files and pictures are cached.
There are several keywords not mentioned in the examples, that is
NETWORK:
FALLBACK:
NETWORK refers to a page that does not want to cache; FALLBACK refers to an alternative when the requested file is not found or the server of the file is not responding. For example, we want to request a nested page, but the server of this page cannot connect, so I can turn to another specified page.
This is the second step and the third step. Just add the manifest position to the <html> tag:
<html manifest=NAME.manifest>
At this point, you can realize simple offline applications.
Where are those cached files placed?
Tested on chrome, I found that it saved these files in chunks according to its own mechanism, so I couldn't find the complete file. The saved data is:
I don’t know how to save it in C:/Users/jasonling/AppData/Local/Google/Chrome/User Data/Default.
The files on Firefox are also stored according to their own mechanism, but after I opened them with sqlite, I found the specific information of the cached file:
If readers are interested, they can try it themselves to see if there will be new discoveries.