h5的离线缓存机制
什么是Manifest：
其实Manifest是一个简单的 文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。
Manifest 的特点：
- 离线浏览：即当网络断开时，可以继续访问你的页面。
- 访问速度快：将文件缓存到本地，不需每次都从网络上请求。
- 稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存。
Manifest的使用：
html新增了一个manifest属性，可以用来指定当前页面的manifest文件。
创建一个和html同名的manifest文件，比如页面为index.html，那么可以建一个index.manifest的文件，然后给index.html的html标签添加如下属性即可：
<html lang="en" manifest="index.manifest"> 或<html manifest="http://www.example.com/index.manifest">
1、manifest 的引入可以使绝对路径也可以是相对路径，如果你使用的是绝对路径，你的manifest文件必须和你的站点挂在同一个域名下。
2、manifest文件你可以保存为任意的扩展名，但mine-type 必须是 text/cache-manifest。
<html lang="en" manifest="index.manifest"> 或 <html lang="en" manifest="index.cache"> 在服务器上部署时需要在服务器上添加相应的mie-type
3、manifest 标签应该包含到你需要缓存资源的页面，当第一次打开该页面时，浏览器会解析该页面中的mainfest，并缓存里面列举的资源，同时该页面也会自动会被浏览器缓存，即使该页面没有在Manifest中列出。
Manifest文件结构：
接下来详细说说manifest的细节，一个典型的manifest文件代码结构像下面这样：
CACHE MANIFEST（必在第一行，必须写）
# version 2016-01-01 10:10
CHCHE:（必须写）
#缓存文件
NETWORK:
#不缓存文件
FALLBACK:
#页面无法访问时的回退页
方法：
update():检测更新manifest文件
updateready事件：当有新的缓存，并更新完之后，会触发此事件
swapCache(): 用来执行本地缓存的更新操作触发updateready事件时调用
window.applicationCache.update();
window.applicationCache.addEventListener("updateready", function(e) {
window.applicationCache.swapCache();
if (confirm("A new version of this site is available. Load it?")) {
window.location.reload();
}
}, false);
progress事件：当有新的缓存，并处于正在下载的过程中时会不断出发此事件
window.applicationCache.addEventListener("progress",function(){
alert(window.applicationCache.status); //0未缓存 1空闲 2检查中 3下载中 4更新就绪 5缓存过期
})；
checking事件：正在检查
noupdate事件：检查更新结束，没有需要更新。
downloading事件：正在下载
cached事件：空闲，缓存为最新状态
error事件：报错
h5的离线缓存机制的更多相关文章
- H5离线缓存机制-manifest
简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...
- H5 manifest离线缓存
请跳转我的有道云笔记查看: http://note.youdao.com/noteshare?id=caaf067c6e38820ba8f87b212c2327a9&sub=23E0F8F7A ...
- H5应用程序缓存 - Cache manifest
一.作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件.优化加载速度,节约服务器资源. 二.适用场景 正如 manifest 英译的名字:离线应用程 ...
- H5 缓存机制浅析 移动端 Web 加载性能优化
腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...
- H5 和移动端 WebView 缓存机制解析与实战
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qHm_dJBhVbv0pJs8Crp77w 作者:叶 ...
- H5离线缓存技术Application Cache
H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...
- H5 缓存机制解析
在web项目开发中,我们可能都曾碰到过这样一个棘手的问题: 线上项目需要更新一个有问题的资源(可能是图片,js,css,json数据等),这个资源已经发布了很长一段时间,为什么页面在浏览器里打开还是没 ...
- h5的缓存机制
H5的缓存,大概有localstorage.sessionstorage.cookie和manifest. 一.LocalStorage LocalStorage是永久性的本地缓存,存储在客户端的浏览 ...
- H5 离线缓存的用法
H5离线缓存基础系列 1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...
随机推荐
- monkey工具使用中遇到的问题之一：手机模拟器中的部分应用出现网络无法连接
问题描述: 手机模拟器中的部分应用出现网络无法连接,但是比如:浏览器即可以正常访问网页 解决方法如下: 1.以管理员身份进入到cmd中,以WIN10为例 ,在电脑左下角点击鼠标右键就可以看到 注意: ...
- sql单表中某一字段重复，取最近3条或几条数据
order by a.uid,a.id; sql查询语句,针对需求:一个表中某一字段是有重复的数据,针对该字段相同的值只取最近的3条或要求的几条: --记录铭心!
- Hotaru's problem(hdu 5371)
题意:给出一个数字串,询问最长的子串,满足以下要求:将子串平均分为三部分,一三部分相等,一二部分对衬. /* 在manachar的基础上,枚举回文串的中心,再找第三部分. */ #include< ...
- 开发Visual Studio 插件
新建项目,在其他项目类型中找到扩展性,然后新建Visual Studio外接程序,VS中没有这个要安装SDK,http://yunpan.cn/cd27eNczKREwd (提取码:ab29)去下载 ...
- Oracle insert大量数据经验之谈（转）
在很多时候,我们会需要对一个表进行插入大量的数据,并且希望在尽可能短的时间内完成该工作,这里,和大家分享下我平时在做大量数据insert的一些经验. 前提:在做insert数据之前,如果是非生产环境, ...
- 使用Lua脚本语言开发出高扩展性的系统，AgileEAS.NET SOA中间件Lua脚本引擎介绍
一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...
- Reversing Bits in C
英文原文: http://corner.squareup.com/2013/07/reversing-bits-on-arm.html 本文讲解翻转bit位的一些方法,例如如何将1001 1101变为 ...
- 浅谈Margin和Padding值设置成百分数的布局
转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...
- 【BO】安装BO服务器时，oracle服务端安装ora-12514和12541的问题
今天在安装BO服务器,oracle数据库时,出现了这样一个问题,描述如下: 首先安装oracle10g Server 32位版.安装ORCL数据库之后,使用10gServer下的NET MANAGER ...
- package.json 字段全解析
Name 必须字段. 小提示: 不要在name中包含js, node字样: 这个名字最终会是URL的一部分,命令行的参数,目录名,所以不能以点号或下划线开头: 这个名字可能在require()方法中被 ...