利用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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
php生成缩略图的类代码
2008/10/02 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
运动会广播稿100字
2014/01/11 职场文书
工程招投标邀请书
2014/01/30 职场文书
校长寄语大全
2014/04/09 职场文书
反邪教警示教育方案
2014/05/13 职场文书
企业精神口号
2014/06/11 职场文书
党员作风建设整改方案
2014/10/27 职场文书
基层工作经历证明
2015/06/19 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
详解Redis瘦身指南
2021/05/26 Redis
使用springMVC所需要的pom配置
2021/09/15 Java/Android