Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to store html5 offline by using Node". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Preface

Supporting offline Web application development is a key point of HTML5. Offline Web applications are applications that can still run when the device is unable to access the Internet. Developing offline Web applications requires several steps, one of which is offline access to certain resources (image JS css, etc.)

HTML5 introduces application caching, which means that web applications can be cached and accessed offline.

Pushpin: application caching brings three advantages to applications:

Offline browsing-users can use them when applying offline

Speed-cached resources load faster

Reduce server load-the browser will download only updated or changed resources from the server.

Principle and environment

In the online case, when the browser renders, it will issue a request to obtain the test.manifest file. If this is the first visit, the browser will download the corresponding resources according to the contents of the description file (manifest file) (CACHE MANIFEST) and store them offline. If the resource has been accessed and the resource has been stored offline, the browser will use the offline resource to load the page, and then the browser will compare the new manifest file with the old manifest file, and if the file has not changed, nothing will be done, if the file has changed, then the resource in the file will be re-downloaded and stored offline.

Triangular_flag_on_post: [note] the purpose of this demo demonstration is to learn more about this principle.

When offline, browsers directly use resources stored offline

Just like cookie, offline storage of HTML5 requires a server environment, in which the server is developed based on Node.js, Express framework and art-tmplate.

Description file

To save data in the cache, you need to use the description file manifest, which lists the resources to be downloaded and cached

The manifest file can be divided into three parts:

CACHE MANIFEST-the files listed under this heading will be cached after the first download

NETWORK-the files listed under this heading require a connection to the server and will not be cached

FALLBACK-the file listed under this heading specifies the fallback page (such as 404 page) if the page is inaccessible.

Online, the user agent will read the manifest every time he visits the page. If it is found to have changed, reload all resources in the list

structure

Triangular_flag_on_post: [note] all the resources you want the browser to cache are placed in the public static resources folder

Construction of server environment

Npm init / / generate package.json manual file npm i express / install express package npm I-- save art-template express-art-template / / use the art-tmplate// entry file app.jsvar express = require ("express"); var app = express (); app.use ('/ public/', express.static ('. / public/')) app.engine ('html', require (' express-art-template')) App.get ('/', function (req, res) {res.render ('index.html');}); app.listen (3000, function () {console.log ("app is running at port 3000.");})

Other

Offline.appcache description file

CACHE MANIFEST#v01/public/image/01.jpg / / cache the first picture NETWORK:*FALLBACK:/

Index.html:

HTML5 offline storage

Connect to the server again after changing the manifest:

CACHE MANIFEST#v01/public/image/01.jpg/public/index.cssNETWORK:*FALLBACK:/

Triangular_flag_on_post: [note] look at the output of the control side on the right side of the figure. Because the manifest file has been changed, the browser will compare the new manifest file with the old manifest file and find that the file has changed. Then the resources in the file will be re-downloaded and stored offline.

This is the content of "how to store html5 offline by using Node". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.