189 8069 5689

怎么利用Node实现HTML5离线存储

这篇文章主要介绍了怎么利用Node实现HTML5离线存储,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联成立十余年来,这条路我们正越走越好,积累了技术与客户资源,形成了良好的口碑。为客户提供网站设计、网站制作、网站策划、网页设计、域名与空间、网络营销、VI设计、网站改版、漏洞修补等服务。网站是否美观、功能强大、用户体验好、性价比高、打开快等等,这些对于网站建设都非常重要,创新互联通过对建站技术性的掌握、对创意设计的研究为客户提供一站式互联网解决方案,携手广大客户,共同发展进步。

前言

支持离线Web应用开发是HTML5的一个重点。离线Web应用就是在设备不能上网的时候仍然可以运行的应用。开发离线Web应用需要几个步骤,其中一个就是离线下必须能访问一定的资源(图像 JS css等)

HTML5引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在离线时进行访问。

:pushpin:应用程序缓存为应用带来三个优势:

  • 离线浏览 – 用户可在应用离线时使用它们

  • 速度 – 已缓存资源加载得更快

  • 减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。

原理和环境

  • 在线的情况下, 当浏览器渲染到 时,会发出一个请求,请求获取 test.manifest 文件 ,如果是第一次访问,那么浏览器就会根据 描述文件(manifest 文件)中(CACHE MANIFEST)的内容下载相应的资源并且进行离线存储。如果已经访问过并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的 manifest 文件与旧的 manifest 文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。

  • :triangular_flag_on_post: 【注】这个demo演示是为了更深的了解这个原理

  • 离线的情况下,浏览器就直接使用离线存储的资源

  • 就像cookie一样,HTML5的离线存储也需要服务器环境,这个demo中服务端基于Node.js、Express框架和art-tmplate开发

 描述文件

要想在缓存中保存数据,需要使用描述文件manifest 文件,列出要下载和缓存的资源

manifest 文件可分为三个部分:

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

  • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存

  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

  • 在线的情况下,用户代理每次访问页面,都会去读一次manifest.如果发现其改变, 则重新加载全部清单中的资源

结构

怎么利用Node实现HTML5离线存储 

:triangular_flag_on_post: 【注意】所有的你想让浏览器缓存的资源放在public静态资源文件夹中

服务端环境的搭建

npm init //生成package.json说明书文件
npm i express //安装express包
npm i --save art-template express-art-template //使用art-tmplate
// 入口文件app.js
var 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.");
});

其它

offline.appcache描述文件

CACHE MANIFEST
#v01
/public/image/01.jpg //缓存第一张图片

NETWORK:
*

FALLBACK:
/

index.html





  
  HTML5离线存储
  



  
  


结果

开启服务端后:

怎么利用Node实现HTML5离线存储 怎么利用Node实现HTML5离线存储

关闭服务端后:

怎么利用Node实现HTML5离线存储

改变 manifest 后 再次连接服务器

CACHE MANIFEST
#v01
/public/image/01.jpg
/public/index.css

NETWORK:
*

FALLBACK:
/

怎么利用Node实现HTML5离线存储 

:triangular_flag_on_post: 【注】看图右边控制端的输出,因为改变了manifest文件,浏览器会对比新的 manifest 文件与旧的 manifest 文件,发现文件改变了,那么就会重新下载文件中的资源并进行离线存储

再次关闭服务端后:

怎么利用Node实现HTML5离线存储

感谢你能够认真阅读完这篇文章,希望小编分享的“怎么利用Node实现HTML5离线存储”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


名称栏目:怎么利用Node实现HTML5离线存储
本文地址:http://cdxtjz.cn/article/gicphj.html

其他资讯