时间:2021-05-08
前言
支持离线Web应用开发是HTML5的一个重点。离线Web应用就是在设备不能上网的时候仍然可以运行的应用。开发离线Web应用需要几个步骤,其中一个就是离线下必须能访问一定的资源(图像 JS css等)
HTML5引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在离线时进行访问。
:pushpin:应用程序缓存为应用带来三个优势:
原理和环境
描述文件
要想在缓存中保存数据,需要使用描述文件manifest 文件,列出要下载和缓存的资源
manifest 文件可分为三个部分:
结构
:triangular_flag_on_post:【注意】所有的你想让浏览器缓存的资源放在public静态资源文件夹中
服务端环境的搭建
npm init //生成package.json说明书文件npm i express //安装express包npm i --save art-template express-art-template //使用art-tmplate// 入口文件app.jsvar 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.cssNETWORK:*FALLBACK:/:triangular_flag_on_post:【注】 看图右边控制端的输出,因为改变了manifest文件,浏览器会对比新的 manifest 文件与旧的 manifest 文件,发现文件改变了,那么就会重新下载文件中的资源并进行离线存储
再次关闭服务端后:
到此这篇关于利用Node实现HTML5离线存储的文章就介绍到这了,更多相关HTML5离线存储内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
HTML5引入了应用程序缓存,这意味着web应用可进行缓存,并可在离线时进行访问。:pushpin:应用程序缓存为应用带来三个优势:离线浏览–用户可在应用离线时
HTML5离线存储。为了方便Web应用的离线使用,HTML5提供网页存储接口。HTML5离线存储相对于传统的cookie具有高效率、高安全性、更大离线空间等特点
HTML5新特新HTML5中的一些有趣的新特性:1、用于绘画的canvas元素2、用于媒介回放的video和audio元素3、对本地离线存储的更好的支持4、新的
HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能。绘画CANVAS;用于播放媒体的video和audio元素;本地离线存储l
lufylegend是一个HTML5开源引擎,它实现了利用仿ActionScript3.0的语法进行HTML5的开发,包含了LSprite,LBitmapDat