Accidentally found a proper way notes can still see the official website of PC more friendly interface offline, instead of the normal 404
Want to know the specific implementation, the group had been infiltrated by a front-end, have made a big brother in this life have not heard of keyword PWA technology?
Under it looked like a live service side, wondering if pure static pages with HTML + JS Is it possible to achieve ~ ~ ~
Follow-up
Pseudo-big brother is like loading force, clearly a front-end problems can be resolved label must say to "PWA (Progressive Web App) progressive web applications"
Reference rookie tutorial http://www.runoob.com/html/html5-app-cache.html
Realization of ideas:
1. On the html page <html> tag plus the manifest attribute i.e.
<html manifest="txx.manifest">
<head></head>
<body></body>
</html>txx.manifest for the configuration file path name is not required, but we had to find
2. New or modified files txx.manifest
Manifest file
manifest file is a simple text file that tells the browser to cache content (and does not cache content).
The manifest file may be divided into three parts:
- MANIFEST CACHE - In this title the following files will be cached after the first download
- The NETWORK - In the heading of the document needs to be connected to the server, and will not be cached
- FALLBACK - in the heading of this document specifies the fallback page (such as page 404) when the page can not be accessed when
So a file and mainfest roughly a long way
#这些会缓存
CACHE MANIFEST
#修改备注信息时会更新缓存，所以一般建议在这行加个版本信息 version 1.2
index.html
#这些不缓存
NETWORK
login.html
#这些是找不到时备选
FALLBACK
#当/txx/1.jpg找不到时，会去找/txx_backup/1.jpg
/txx /txx_backup3. Configure the server
For example with nginx
Open mime.types file, add a line configuration
text/cache-manifest mf manifest;
After the configuration page to open the console will see the following information
Then you pull the network cable and then refresh the page look ~
But it seems not particularly stable. . .
