node.js与HTML5离线缓存

时间 2019-12-08

标签 node.js node html5 html 离线缓存栏目 Node.js 繁體版

原文原文链接

最近正学到HTML5的离线缓存，却看到须要配置服务器。一会儿就懵了，毕竟服务器的有关配置通常是很复杂的，而node.js的服务器是本身的代码生成的，这下要怎么配置？在网上搜索了好久，都没用关于node.js与HTML5离线缓存的，可是apache之类的却一大堆。在看完网易云课堂的一个php教程以后，开始理解了HTML5的离线缓存原理，并成功搭配node.js实现了。php

首先简要讲一下HTML5离线缓存的原理。html

浏览器向服务端发出请求，请求获取一份MIME类型为 text/cache-manifest 的文件，该文件自己就是静态文件，这点很重要，而且该文件记录了浏览器要缓存哪些文件。html5

这时候第一个问题来了，manifest文件内容格式怎么写？node

答：举个简单的例子，该例子列出了浏览器要缓存的文件。express

CACHE MANIFESTapache

# CACHE MANIFEST 是必须的开头浏览器

# CACHE : 下罗列了要缓存的文件名
CACHE:
1.jpg缓存

解决了第一个问题第二个问题来了，html5是怎么去请求这份文件的？服务器

答：less

在你的html代码里的 html标签中这样写: <html manifest="test.manifest" >;这样浏览器就会向请求其它资源同样向服务器请求这个名为 test.manifest文件了。

举个简单的例子加深理解：经过 http://localhost/index.html 访问服务器根目录下的index.html文件，html代码以下

 1 <!DOCTYPE html>
 2 <html manifest="test.manifest">
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8    <img src="1.jpg" />
 9 </body>
10 </html>

test.manifest文件内容如上面第一问题中的例子；

当浏览器渲染到 <html manifest="test.manifest">时，浏览器发出一个请求，请求获取test.manifest文件，当浏览器加载了test.manifest文件后浏览器就知道1.jpg是要缓存的文件，因此，当1.jpg第一次被加载下来后，就被缓存到本地了。当第二访问http://localhost/index.html 时，浏览器直接到缓存去取1.jpg了。即便断网了，也可以经过http://localhost/index.html访问到刚刚的页面。

到了如今，咱们仍是没讲到node.js。已知apache等服务器要支持离线缓存的话须要配置服务器，若是是node.js，那该怎么办？

答：咱们先来了解一下，apache等服务器到底是要配置什么鬼东西。上面已经说了manifest文件自己就是一个静态文件，获取manifest文件跟获取jpg文件其实就是一回事，可是apache等服务器不是全部的文件格式都支持，换句话说，你浏览器请求jpg文件是被容许的，可是，你请求manifest文件是不在容许范围内的，因此，配置服务器指定的就是在服务器容许的文件类型中加多一条：manifest 类型。

而对于node.js说，不管是jpg,png,manifest.......，它们都是文件而已，node.js对它们一视同仁，惟一不一样的地方就是它们的MIME类型。

因此，对于HTML5的离线缓存功能来讲，node.js须要的配置就是在写静态文件服务器时，增长对manifest MIME类型支持。

若是你用express的配置静态文件服务器的话，express已经帮你增长了manifest文件的支持了。一个字：爽！