利用Node实现HTML5离线存储

前言

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

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

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

离线浏览 – 用户可在应用离线时使用它们
速度 – 已缓存资源加载得更快
减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。

原理和环境

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

【注】 这个demo演示是为了更深的了解这个原理
离线的情况下，浏览器就直接使用离线存储的资源
就像cookie一样，HTML5的离线存储也需要服务器环境，服务端基于Node.js、Express框架和art-tmplate

描述文件

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

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
在线的情况下,用户代理每次访问页面，都会去读一次manifest.如果发现其改变, 则重新加载全部清单中的资源

结构

【注意】 所有的你想让浏览器缓存的资源放在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

<!DOCTYPE html>

<html lang="en" manifest="../public/offline.appcache">

<head>

  <meta charset="UTF-8">

  <title>HTML5离线存储</title>

  <link rel="stylesheet" href="../public/index.css">

</head>

<body>

  <img src="../public/image/01.jpg" alt="">

  <img src="../public/image/02.jpg" alt="">

</body>

</html>

结果

开启服务端后：

关闭服务端后：

改变manifest后再次连接服务器

CACHE MANIFEST

#v01

/public/image/01.jpg

/public/index.css

NETWORK:

*

FALLBACK:

/

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

再次关闭服务端后：

利用Node实现HTML5离线存储的更多相关文章

吓哭原生App的HTML5离线存储技术，却出乎意料的容易！【低调转载】
吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...
html5 离线存储
在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...
HTML5离线存储原理
找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的.其中web app中的一些资源并不经常改变, ...
html5 离线存储 worker
html5 离线存储 <!DOCTYPE html> <html manifest="cache.manifest"> <!--manifest存储- ...
神奇的HTML5离线存储（应用程序缓存）
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...
【html5】html5离线存储
html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与 ...
html5离线存储
为了提升Web应用的用户体验,我们在做网站或者webapp的时候,经常需要保存一些内容到本地.例如,用户登录token,或者一些不经常变动的数据. 随着HTML5的到来,出现了诸如AppCache.l ...
HTML5离线存储的工作原理和使用
在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件. 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个 ...
HTML5离线存储整理
前端html部分 //canvas.html <!DOCTYPE html> <html manifest="/test.appcache"> <he ...

随机推荐

Shell编程—数据展示
1.标准文件描述符 Linux用文件描述符(file descriptor)来标识每个文件对象.文件描述符是一个非负整数,可以唯一标识会话中打开的文件.每个进程一次多可以有九个文件描述符.出于特殊目 ...
微信小程序自动化
解析微信小程序注意:若上面方法不行就使用下面的小程序对应的chrome驱动版本包,2.4版本的
python - Lambda函数匿名函数
Lambda 匿名函数 python 使用 lambda 来创建匿名函数. lambda只是一个表达式,函数体比def简单很多. lambda的主体是一个表达式,而不是一个代码块.仅仅能在lambda ...
vue项目在执行npm install时报错
npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ETIMEDOU ...
for...in、for...of和forEach
let arr = [1,2,3,4,5,6]; arr.name="AAA"; for(var i in arr){ //遍历的实际是对象的属性名臣,每一个元素的索引被视为一个属 ...
Python的UI库
https://github.com/realitix/vulkan https://github.com/swistakm/pyimgui https://wxpython.org
C++类重载函数的function和bind使用
在没有C++11的std::function和std::bind之前,我们使用函数指针的方式是五花八门,结构很繁琐难懂.C++11中提供了std::function和std::bind统一了可调用对象 ...
C# 压缩源文件（导出源文件word文件）
说明 1 : 在webUI 公共类,存放 ZipHelper 类说明 2 :判断文件路径是否存在,不存在则创建文件夹说明 3 : 引用类方法,判断压缩文件,返回的,是true/false 引用 ...
查看Linux虚拟机是什么架构
uname -a 可以看出此虚拟机是x86架构,64位
我的T440p出现怪事情了
装上系统后,再稍微装些软件,或是打补丁,升级驱动什么的,再重启就起不来了. 也就是说,装一次系统只能好一次,关机或是重启就启动不了了,现象是在黑屏界面转两下就转不动了. 鼓捣一个周末也无效,昨天上系统 ...