HTML5离线存储 初探
本文主要内容归纳如下:
一、离线存储的作用;二、如何实现离线存储;三、applicationCache对象,及属性、事件、接口
四、访问缓存应用,相应触发事件,及其对应状态;五、如何更新离线缓存
六、demo演示:update后是否调用swapCache的区别;七、写在后面
一、离线存储的作用
1、用户可离线访问你的应用,这对于无法随时保持联网状态的移动终端用户来说尤其重要
2、用户访问本地的缓存文件,通常意味着更快的访问速度
3、仅仅加载被修改过的资源,避免同一资源对服务器多次的请求,大大降低了对服务器的访问压力
二、如何实现离线存储
1、在html标签里通过manifest属性引用一个cache.manifest文件,该文件里声明了浏览器需缓存的所有资源文件,如下所示:
<!DOCTYPE html>
<html lang='cn' manifest='cache.manifest'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>离线缓存示例页面</title>
<!-- CSS文件引用 -->
</head><body>
<!-- 各种标签 -->
</body><!-- 各种脚本文件 -->
</html>
2、关于cache.manifest的定义
CACHE MANIFEST
# 注释:需要缓存的文件,无论在线与否,均从缓存里读取
chched.js
cached.css# 注释:不缓存的文件,无论缓存中存在与否,均从新获取
NETWORK:
uncached.js
uncached.css# 注释:获取不到资源时的备选路径,如index.html访问失败,则返回404页面
FALLBACK:
index.html 404.html
3、几个需要关注的细节
- cache.manifest 文件的MIME类型是text/cache-manifest,至于如何让web服务器返回.manifest文件时添加 Content-Type: text/cache-manifest,不同服务器配置细节不同,此处不展开
- cache.manifest写法以CACHE MANIFEST开头,文件编码格式必须是utf-8
- 引用cache.manifest的html文档会被默认包含进缓存清单
4、归纳起来,步骤如下:
- 配置服务器支持 cache.manifest 的Content-type: manifest
- 编写 cache.manifest 文件
- html页面引用cache.manifest文件
三、applicationCache对象,及属性、事件、接口
浏览器通过window.applicationCache对象来及其相应属性、接口、事件供用户构建离线应用,详细可见 applicationCache
//当前文档对应的applicationCache对象
window.applicationCache//当前缓存所处的状态,为0~5的整数值,分别对应一个状态,并分别对应一个常量
window.applicationCache.statuswindow.applicationCache.UNCACHED === 0 //未缓存,比如一个页面没有制定缓存清单,其状态就是UNCACHED
window.applicationCache.IDLE === 1 //空闲,缓存清单指定的文件已经全部被页面缓存,此时状态就是IDLE
window.applicationCache.CHECKING === 2 //页面正在检查当前离线缓存是否需要更新
window.applicationCache.DOWNLOADING === 3 //页面正在下载需要更新的缓存文件
window.applicationCache.UPDATEREADY === 4 //页面缓存更新完毕
window.applicationCache.OBSOLETE === 5 //缓存过期,比如页面检查缓存是否过期时,发现服务器上的.manifest文件被删掉了//常用API,在后面会稍详细介绍
window.applicationCache.update() //update方法调用时,页面会主动与服务器通信,检查页面当前的缓存是否为最新的,如不是,则下载更新后的资源
window.applicationCache.swapCache() //updateready后,更新到最新的应用缓存
除了上面提及的属性、接口外,window.applicationCache还包含了一系列的事件,大部分与上面提到的 window.applicationCache.status对应,如下:
事件名 | 关联属性 | 事件释义 |
onchecking | CHECKING | 见上文对关联属性的解释 |
ondownloading | DOWNLOADING | - |
onupdateready | UPDATEREADY | - |
onobsolete | OBSOLETE | - |
oncached | IDLE | - |
onerror | 更新出错,如检查更新时.manifest被人误删了 | |
onnoupdate | 检查后,发现缓存无需更新 | |
onprogress | - |
四、访问缓存应用,相应触发事件,及其对应状态
1、假设我们在第一次在chrome里面访问http://localhost/blog/html5/has_cache/cache.html,如下所示:
打开控制台,看到如下:
由上到下依次为(cache = window.applicationCache):
- 检查是否需要下载/更新缓存,cache.status===cache.CHECKING
- 发现本地还没有缓存文件,开始下载,cache.status===cache.DOWNLOADING
- 正在下载缓存文件,cache.staus===cache.PROGRESS
- 下载完毕,并缓存在本地,cache.status===cache.CACHED
2、再次访问http://localhost/blog/html5/cache/has_cache/cache.html
1)假设.manifest没有变化
打开控制台,如下所示:
由上到下依次为:
- 检查是否需要下载/更新缓存,cache.status===cache.CHECKING
- 发现服务器上没有更新,cache.status===cahce.NOUPDATE
2)假设cache.manifest已经发生变化,则如下截图所示,不赘述:
五、如何更新离线缓存
1、本地手动删除,各浏览器实现方式不同。以chrome为例,输入chrome://appcache-internals/,可以查看本地的离线缓存,也可以进行删除
2、更新.manifest文件,浏览器检测到.manifest变更后,会主动更新本地缓存。(需要注意的是,假如没有更新.manifest,即使你对缓存清单里的文件进行了修改,浏览器依旧会顽强地从本地缓存里面读取修改之前的文件)
3、通过applicationCache对象的API来主动更新,主要涉及接口为update()以及swapCache()
cache.update()官方说明:启动应用缓存下载进程,由于浏览器通常会主动检查.manifest文件确认缓存是否需要更新,所以大部分情况下这个方法是没必要的。但对于一些可能在浏览器里待上长达一个星期左右的应用,比如电子邮箱,这个方法就会排上用场,比如每隔1天检查下本地缓存的一些文件在服务器上是否已经更新。个人理解:
cache.swapCache()官方说明:如果浏览器已经更新了新的离线缓存,则切到最新的缓存去。对于已经加载解析的资源,如CSS、图片等,并不会导致其重新加载、解析一遍。唯一的变化就是,后续对缓存资源的请求,获取到的都是本地的最新缓存。需要注意的是,swapCache方法需要在updateready事件触发后调用。个人理解:调用update方法,更新了本地缓存,但如果不掉用swapCache方法,在本次会话中,重新请求已经更新过的资源,还是拿到老的文件。
六、demo演示:update后是否调用swapCache的区别
假设有cache.html、cache.manifest、cache.js,分别如下:
cache.html<!DOCTYPE html>
<html lang='cn' manifest='cache.manifest'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>离线缓存</title>
</head>
<body></body>
<script type="text/javascript" src="cache.js"></script>
<script type="text/javascript">
var cache = window.applicationCache;
conso.log('test:' + test); //cache.js定义的一个变量,初始值为10function load(url, callback){var script = document.createElement('script');script.src = url;script.onload = function(){callback && callback();}document.body.appendChild(script);
}setTimeout(function(){cache.addEventListener('updateready', function(){log('更新完毕');//cache.swapCache();load('cache.js', function(){log('test:' + test); //test: 10}); });cache.update();}, 20*1000);
</script>
</html>
var test = 10; //测试用变量
CACHE MANIFEST
# Javascript v0
./cache.js
假设我们现在已经打开浏览器访问http://localhost/blog/html5/cache/mod_cache/cache.html,在打开页面5s左右后,有人修改了cache.js里变量改test的值,如下:
var test = 11; //最初为10,现在修改为11
同时修改了cache.manifest文件(随便在注释里添加几个数字即可)。之前已经设置了20s后,调用update方法检查缓存资源是否更 新,此时浏览器发现cache.manifest文件发生变化,且cache.js的确被修改的,于是毫不犹豫地更新了本地缓存。
CACHE MANIFEST
# Javascript v11111
./cache.js
在cache.html里面,将cache.swapCache()这句注释掉了,是否将这句注释掉,是否有差别?差别在哪里?直接看结果:
1、无cache.swapCache(),输出结果:test: 10
2、有cache.swapCache(),输出结果:test: 11
结合API说明不难想到两者之间的差别,当没有调用cache.swapCache()时候,即使重新请求cache.js,加载的还是缓存更新前 的cache.js(老的缓存);若调用了cache.swapCache(),则重新请求cache.js时,加载的是已经更新后的 cache.js(最新的缓存);
七、写在后面
在离线存储的实现方面,似乎不同浏览器理解也不同,最初在chrome下测试的同时,也在firefox下进行测试,然后,不忍心再对比着测试,就挑了据说实现比较靠谱的chrome接着往下测试
html5离线存储还有很多有意思的东西尚待发掘。自己也是刚刚接触,理解以及文章内容难免存在偏差之处,请谅解并指出。
HTML5离线存储 初探相关推荐
- 神奇的HTML5离线存储(应用程序缓存)
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...
- html5离线保存需要联网吗,html5 离线存储
在html页面中引入manifest文件 在服务器添加mime-type text/cache-manifest 如下: sample.appcache内容如下: CACHE MANIFEST #ve ...
- HTML5离线存储利与弊
一.概念 离线存储是HTML5中的一个重要特性,顾名思义就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,这样子使得你的web应用可以在用户离线的状况下进行访问,很显眼有三个好处 ...
- html5离线存储图片,HTML5教程 离线存储技术详解
本篇教程探讨了HTML5教程 离线存储技术详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 随着Web App的发展,越来越多的移动端App使用HTML5 ...
- HTML5 离线存储之Web SQL
HTML5 在离线存储之Web SQL 本篇没有考虑异步,多线程及SQL注入 WebDatabase 规范中说这份规范不再维护了,原因是同质化(几乎实现者都选择了Sqlite), 且不说这些,单看在H ...
- html5 application cache 空间限制,HTML5离线存储之Application Cache
关于html5的离线存储,大致可分为: localStorage, sessionStorage indexedDB web sql application cache 可以在chrome的debug ...
- [html5]离线存储
H5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用相关A ...
- html离线教程,HTML5离线存储整理
前端html部分 //canvas.html 浏览器离线存储 配置文件 CACHE MANIFEST #v1.0.5 #需要缓存的文件 CACHE: /photos/canvas.png #不需要缓存 ...
- html5 将资源存于客户端,HTML5离线应用与客户端存储的实现
html5几种在客户端存储数据的实例详解 LocalStorage LocalStorage用于持久化的本地存储,存储资料在客户端(client)的浏览器上,除非主动删除数据,否则数 据是永远不会过期 ...
- HTML5 Web 客户端五种离线存储方式汇总
为什么80%的码农都做不了架构师?>>> 最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利 ...
最新文章
- 【Datawhale-Python】Task1
- 管理员必知:服务器基准测试方法与误区
- 花费一天时间基于Vue创建的epub小说阅读器效果展示及源码分享
- GitHub 发布重磅更新:你电脑上的 IDE 可以删了?!
- C语言学习之怎样引用指针变量
- oracle rman备份spfile,RMAN备份恢复之SPFILE的恢复(一)
- 10月24日见!iQOO Neo 855版官宣:跑分不输骁龙855Plus
- Netty内存池泄漏问题
- linux学习笔记(11)df命令
- 数据库设计 表和表之间的三种关系
- 基于JavaMail的Java邮件发送:复杂邮件发送
- 国内最著名的公用CDN BootCDN停止服务
- 倪光南李开复景鲲等15位产业领袖纵论中国AI现状:价值重估,落地为王
- 【论文】解读AM-GCN: Adaptive Multi-channel Graph Convolutional
- Ajax配合jQuery和数据库
- 学生学籍管理系统_登陆界面设计
- flask_restful中的输出域(Resource、fields、marshal、marshal_with)
- Linux系统查看gcc,g++,java 等的版本
- tensorflow-GPU加速-win10(NVIDIA GeForce 940MX)下的安装教程(VS2015+Cuda9.0)
- 统计SVN代码提交情况-官方方法
热门文章
- jquery jqplot pierenderer 饼图百分比小于3的无法显示DataLabels
- Javascript 也玩多线程
- ArturiaFX Collection for Mac(音乐效果器合集) 2021最新
- Mac版微信重大更新!来刷刷朋友圈!摸鱼党福利
- Mac基础设置—应用程序
- 更换Homebrew的更新源
- Apollo(阿波罗)是携程框架部门研发的分布式配置中心,ubuntu本机安装
- Electron —— Cannot find module ‘jquery.min.js’(II)
- 苹果鸠占鹊巢打败微软 纳德拉欲以其人之道还治其身
- 《Core Data应用开发实践指南》一导读