HTML5 manifest离线缓存-Html5-优质IT资源分享社区

yutingzhinan
论坛版主
论坛版主
  • UID9
  • 粉丝1
  • 关注0
  • 发帖数36
阅读:258回复:0

HTML5 manifest离线缓存

楼主#
更多 发布于:2016-06-17 23:26

一、基本概念
离线缓存是html5新引进的技术,能够让你的Web使用程序指定哪些文件能够缓存在本地,使得你的网络断开时依然能够经过本地的缓存来进行拜访阅读。
二、运用方法
1.MIME type 声明
首先,由于manifest文件有必要是一个MIME type为 text/cache-manifest
类型的存在。文件后缀名能够自定义(主张为.appcache)所以咱们需求现在服务端将 .appcache 后缀的文件类型声明为
text/cache-manifest。 以apache为例,咱们需求在httpd.conf中加上:
AddType text/cache-manifest .appcache
2. 在HTML文件中引进manifest文件





其间manifest文件的后缀名有必要为 .appcache ,而且和引进该manifest的页面同源
3. manifest文件语法
CACHE MANIFEST
# 上面这行是有必要的
# 这是一行注释
# 在这个文件中的任何地方都能够增加
# 它们悉数都会被疏忽
# 在注释之前能够有空格
# 但有必要是在单行前
# 空行也会被疏忽
# 这些列在最开始的文件都是需求被缓存的
# 或许是那些列在"CACHE:"里的, "CACHE"头有必要写在这些文件之前,好像
# 下面写好的那样
images/sound-icon.png
images/background.png
# 留意,每个文件有必要单独一行
# 在线白名单中呈现的这个文件,它不会被缓存,而且,
# 对该文件的引用,将绕过缓存,总是会
# 从网络中获取方针(或在用户离线时,测验从网路上获取)
NETWORK:
comm.cgi
# 这是另一块要缓存的文件,这次只要一个css文件
CACHE:
style/default.css
咱们也能够书写成这么:
CACHE MANIFEST
#version 1.0
CACHE:
style/default.css
images/sound-icon.png
images/background.png
NETWORK:
*
CACHE MANIFEST: 这个是有必要的,而且一定要写在manifest文件最初
CACHE: 缓存清单列表,此处列出的为需求进行离线缓存的资这篇文章件
NETWORK:
白名单列表,需求与服务端进行交互获取的资这篇文章件,此处有必要列出除缓存清单列表以外一切的资本地址(能够运用通配符*星号替代),否则没有列出的资这篇文章件将加载失利
引进manifest的页面,即便没有被列入缓存清单中,依然会被用户代理缓存。而且无法经过白名单列表去掉。
(缓存清单的文件列表能够运用肯定路径或肯定URL地址)
敞开离线缓存后,咱们能够在chrome中翻开f12来看看资本加载有啥区别




能够看出,运用离线缓存后的资本,资本请求的状况码都变为200,而且在size栏中都被标明为(form cache),加载速度也是清楚明了的。
4. 缓存怎么更新?
资本被离线缓存后,不管咱们在后端怎么更改资这篇文章件,客户端都不会拉取到修正过的文件。
本来,只要当manifest文件被更新后(修正文件任何地方,包含注释等),客户端才会更新离线缓存文件,而且每次都会更新悉数的缓存文件,包含没有被修正的资这篇文章件,但通常这些文件都会走304的缓存策略。
别的,在服务端修正manifest文件后,客户端初次拜访页面需求再改写一次才能获取最新的资本。
由于关于阅读器来说,manifest的加载是要晚于别的资本的. 这就致使check
manifest的过程是滞后的。发现manifest改动,一切阅读器的实现都是紧随这做静默更新资本,以确保下次pv,使用到更新。
(这一点很蛋疼,但仍是有解决办法,请持续往下看)。
5. 离线缓存目标和事情处理
在javascript中咱们能够经过 window.applicationCache 来拜访缓存目标,目标中包含了一个 status特点
以及若干的待监听的 事情处理器。




其间status特点代表的是当时离线使用的状况,它可能的值为:
UNCACHED (0):未启用离线使用
IDLE (1):已敞开离线使用,但本地缓存的资本是最新的,而且未标记为抛弃资本
CHECKING (2):当时更新缓存的状况为“查看中”
DOWNLOADING (3):当时更新缓存的状况为“下载资本中”
UPDATEREADY (4):当时更新缓存的状况为“更新结束”
OBSOLETE (5):已敞开离线使用,但缓存资本都已标记为抛弃
离线缓存事情:
checking:在初次下载manifest文件时,或许查看是不是需求更新时触发
noupdate:manifest文件未修正,不需求下载新的缓存文件时触发
downloading:预备更新缓存之前,或许初次下载资本之前触发
progress:下载资本时触发,每下载一个资本都会触发一次
cached:页面初次启用离线缓存,而且离线缓存下载结束时触发
updateready:资本更新结束时触发
obsolete:加载manifest文件时遇到401或404错误时触发
errorEvent加载manifest文件时遇到401或404错误时触发
这么,咱们就能够经过updateready事情来让离线缓存更新后主动改写页面了,尽管仍是比较挫:
applicationCache.addEventListener(‘updateready’, function(){
location.href=”test.html”;
}, false);
6. 离线缓存的下线
要将离线缓存下线,咱们只需求将服务端的manifest文件删去即可,同时也要将HTML中的 manifest="manifest.appcache"
删去(不删也能够,会在console控制台报错,但不会影响页面拜访),删去后用户再初次拜访仍是本来的缓存页面,还需求再改写一次。。。蛋疼吧。









优质IT资源分享社区为你提供此文。
本站有大量优质html5 css js等web前端开发教程视频,资料等资源,包含html5 css js 前端开发框架等基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。
优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]


微信小程序开发

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客