利用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 ...

随机推荐

tp6 不能使用vendor
从thinkphp 5.1.x后vendor的使用方法发生变化,文档又没有详细说明.官方真的太坑了! 在thinkPHP 5.1.X后新版取消了Loader::import方法以及import和ven ...
玩转Spring——Spring AOP
什么是AOP?AOP(Aspect Oriented Programming )被称为面向切面编程AOP利用一种称为"横切"的技术,剖解开封装的对象内部,并将那些影响了多个类的公共 ...
npm修改默认配置
1.nodejs在program files下面会造成一些项目中的问题,因此nodejs在program files下需要先卸载nodejs 2.安装nodejs到自定义的目录下面,例:D:\node ...
查看/设置 mysql时区
# 查看时区 show variables like '%time_zone%'; # 设置全局 set global time_zone='+8:00'; # 设置当前会话 set time_zo ...
百度官方给出的seo优化策略
http://www.wocaoseo.com/thread-157-1-1.html 因为要参加seo工程师考试了,这两天一直在学习seo的基础理论,昨天也写了备战seo工程师考试的文章,说实在话, ...
Jeecg-Cloud学习之路（一）
首先,Spring-Cloud目前是行业的潮流,貌似不会就落后了,笔者为了不脱离大部队只能深入学习一下了. 其次.跳槽到一家公司,给公司推荐了Jeecg-Boot的开发平台,那么为了后面扩展为clou ...
一个神奇的jq插件----zTree
最近在公司做项目中用到了一个树(ztree)的插件,使用起来非常顺手,便写下这篇博客,用来记录一下,以便后续使用首先先放上ztree官方的地址:http://www.treejs.cn/v3/mai ...
关于SpringBoot集成JDBCTemplate的RowMapper问题
JdbcTemplate 是Spring提供的一套JDBC模板框架,利用AOP 技术来解决直接使用JDBC时大量重复代码的问题.JdbcTemplate虽然没有MyBatis 那么灵活,但是直接使用J ...
【已学完】UGUI Schedule
章节内容签到 Unity4.6 New UI(UGUI) 1.UGUI概述与Canvas画布介绍(一) 5月14日 2.Canvas画布介绍(二) 5月14日 3.Text控件 5月14日 4.I ...
js error 错误处理
(new) Error([message[, fileName[,lineNumber]]]) 单独定义Error()错误,函数继续进行当像函数一样使用 Error 时 -- 如果没有 new,它将 ...