这篇文章主要介绍了怎么利用节点实现HTML5离线存储,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
<强>前言
支持离线网络应用开发是HTML5的一个重点。离线网络应用就是在设备不能上网的时候仍然可以运行的应用。开发离线网络应用需要几个步骤,其中一个就是离线下必须能访问一定的资源(图像JS css等)
HTML5引入了应用程序缓存,这意味着网络应用可进行缓存,并可在离线时进行访问。
:图钉:应用程序缓存为应用带来三个优势:
离线浏览,mdash;用户可在应用离线时使用它们
<李>速度,mdash;已缓存资源加载得更快
<李>减少服务器负载,mdash;浏览器将只从服务器下载更新过或更改过的资源。
<强>原理和环境
在线的情况下,当浏览器渲染到<代码> & lt; html清单=皌est.manifest"祝辞> 测试。清单> <李>
: triangular_flag_on_post:【注】<强> 这个演示演示是为了更深的了解这个原理
<李>离线的情况下,浏览器就直接使用离线存储的资源
<李>就像饼干一样,HTML5的离线存储也需要服务器环境,这个演示中服务端基于node . js,表达框架和art-tmplate开发
, <强>描述文件
要想在缓存中保存数据,需要使用描述文件清单文件,列出要下载和缓存的资源
清单文件可分为三个部分:
缓存清单——在此标题下列出的文件将在首次下载后进行缓存
<李>网络——在此标题下列出的文件需要与服务器的连接,且不会被缓存
<李>后退——在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)
<李>在线的情况下,用户代理每次访问页面,都会去读一次清单。如果发现其改变,则重新加载全部清单中的资源
<强>结构
npm init //生成package.json说明书文件
npm 小姐:express //安装包
npm 小姐:——节省;art-template express-art-template //使用art-tmplate//,入口文件app.js
var express =,要求(“express");
var app =,表达();
app.use(& # 39;/公共/& # 39;,,express.static(& # 39;。/公共/& # 39;))
app.engine (& # 39; html # 39;,,需要(& # 39;express-art-template& # 39;));
app.get (& # 39;/& # 39;,, function (点播,res), {
res.render才能(& # 39;index . html # 39;);
});
app.listen (3000, function (), {
console.log才能(“app is running at port 3000年!”);
});
其它
离线。appcache描述文件
索引。html