前言

支持离线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离线存储的更多相关文章

  1. 吓哭原生App的HTML5离线存储技术，却出乎意料的容易！【低调转载】

    吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...

  2. html5 离线存储

    在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...

  3. HTML5离线存储原理

    找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的.其中web app中的一些资源并不经常改变, ...

  4. html5 离线存储 worker

    html5 离线存储 <!DOCTYPE html> <html manifest="cache.manifest"> <!--manifest存储- ...

  5. 神奇的HTML5离线存储（应用程序缓存）

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...

  6. 【html5】html5离线存储

    html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与 ...

  7. html5离线存储

    为了提升Web应用的用户体验,我们在做网站或者webapp的时候,经常需要保存一些内容到本地.例如,用户登录token,或者一些不经常变动的数据. 随着HTML5的到来,出现了诸如AppCache.l ...

  8. HTML5离线存储的工作原理和使用

    在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件. 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个 ...

  9. HTML5离线存储整理

    前端html部分 //canvas.html <!DOCTYPE html> <html manifest="/test.appcache"> <he ...

随机推荐

  1. 安装pyspider报错：ERROR: Complete output from command python setup.py egg_info:...

    正在学习pyspider框架,安装过程并不顺利,随即百度了一下解决了问题,将解决方法记录备用 问题描述: 首先出现  pip版本低,根据提示升级即可 再次安装报错如下 解决过程: 第一步:首先安装wh ...

  2. npm修改默认配置

    1.nodejs在program files下面会造成一些项目中的问题,因此nodejs在program files下需要先卸载nodejs 2.安装nodejs到自定义的目录下面,例:D:\node ...

  3. elementUI的隐藏组件el-scroll--滚动条

    由于原生的滚动条存在兼容性问题并且样式不是太美观,在项目中经常使用的是elementui,发现elementui中有个隐藏的组件,就是element官网使用的滚动条,可以优化滚动条样式.鼠标经过的时候 ...

  4. Java面试题（容器篇）

    容器 18.java 容器都有哪些? 如图:   首先分为Collection.Map: Collection下分为List.Set和Queue: List下分为ArrayList和LinkedLis ...

  5. 23种设计模式 - 对象性能（Singleton - Flyweight享元）

    其他设计模式 23种设计模式(C++) 每一种都有对应理解的相关代码示例 → Git原码 ⌨ 对象性能 面向对象很好地解决了"抽象"的问题,但是必不可免地付出一定的代价.对于通常情 ...

  6. 无法创建新虚拟机: 无法打开配置文件“F:\BigData\vm12\centos01\centos01.vmx”: 拒绝访问。

    退出,右键vmware选择以管理员身份运行即可.

  7. Spring源码分析 手写简单IOC容器

    Spring的两大特性就是IOC和AOP. IOC Container,控制反转容器,通过读取配置文件或注解,将对象封装成Bean存入IOC容器待用,程序需要时再从容器中取,实现控制权由程序员向程序的 ...

  8. 程序员你的maven多模块项目如何对外输出为一个构件？

    上图为常见的台式机,程序员,你看了有啥启发? 台式机生产线 我的maven代码工程 xxx 显示器 xxx-web 主机 xxx-app 键盘 xxx-domian 鼠标 xxx-infrastrat ...

  9. Inscribed Figures(思维)

    The math faculty of Berland State University has suffered the sudden drop in the math skills of enro ...

  10. java初探（1）之秒杀项目总结

    在开始总结之前,先记录一个刚看到的博客,编程规约.该博客记录了一些java开发上的规范,可以在编码的时候引入这些规范. 无论流行框架一直怎么改变,web开发中的三层架构一直属于理论的基础存在. 表现层 ...