利用Node实现HTML5离线存储的方法


Posted in HTML / CSS onOctober 16, 2020

前言

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

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

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

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

原理和环境

  • 在线的情况下, 当浏览器渲染到 <html manifest="test.manifest"> 时,会发出一个请求,请求获取 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

<!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>

结果

开启服务端后:

利用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离线存储的文章就介绍到这了,更多相关HTML5离线存储内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3隔行变换色实现示例
Feb 19 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 #HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 #HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 #HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 #HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 #HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 #HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 #HTML / CSS
You might like
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python随机生成带特殊字符的密码
2016/03/02 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
python实现动态创建类的方法分析
2019/06/25 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
企业军训感言
2014/02/08 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
九年级语文教学反思
2016/03/03 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android