前言

支持离线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. MYSQL语法(一)

    数据表准备: CREATE TABLE student3 ( id int, name varchar(20), age int, sex varchar(5), address varchar(10 ...

  2. 【转】camera tuning

    chromatix项目必须包含有效的 ADC image.png filcker: 交流电照明灯发出的光会一定频率的抖动导致sensor图像出现行方向的水波纹,称之为filcker.目前主要的交流电频 ...

  3. Clayff力场（转载）

    本文转载自:http://blog.sina.com.cn/s/blog_b48a7ac30102w4km.html 注意:lammps中并没有完整的clayff势函数,需要将一下三者结合使用. an ...

  4. SpringBoot输出日志到文件

    1 基本信息 SpringBoot版本2.2.5 日志框架SLF4J 日志框架的实现LockBack 2 输出文件的配置 2.1 logging.file.name 指定日志文件的位置. 2.1.1 ...

  5. Arduboy基本用法(一)

    Arduboy基本用法(一) 一.第一个Arduboy程序 在arduino中新建项目 示例代码 #include<Arduboy.h> Arduboy arduboy; void set ...

  6. 兼容低版本IE浏览器的一些心得体会（持续更新）

    前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...

  7. day03 每日一行

    day03 每日一行 问题描述 用列表解释式 .生成器表达式实现 字典列表为: [{'first': 'john', 'last': 'smith', 'email': 'jsmith@exsampl ...

  8. Python测试函数运行时间

    import time import datetime # 测试函数运行时间 def cal_time(fn): """计算性能的修饰器""" ...

  9. python爬虫-爬取豆瓣电影数据

    #!/usr/bin/python# coding=utf-8# 作者 :Y0010026# 创建时间 :2018/12/16 16:27# 文件 :spider_05.py# IDE :PyChar ...

  10. 力扣Leetcode 1518. 换酒问题

    小区便利店正在促销,用 numExchange 个空酒瓶可以兑换一瓶新酒.你购入了 numBottles 瓶酒. 如果喝掉了酒瓶中的酒,那么酒瓶就会变成空的. 请你计算 最多 能喝到多少瓶酒. 示例: ...