怎么利用Node实现HTML5离线存储

发布时间:2021-03-20 10:46:40 作者:小新
来源:亿速云 阅读:193

这篇文章主要介绍了怎么利用Node实现HTML5离线存储,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

前言

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

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

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

原理和环境

 描述文件

要想在缓存中保存数据,需要使用描述文件manifest 文件,列出要下载和缓存的资源

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离线存储”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. 利用html5 Api 实现分页
  2. HTML5 离线存储(三)

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

node html5

上一篇:怎么使用flex布局轻松实现页面布局

下一篇:php中与html标签相关的函数有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》