什么是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的离线缓存机制的更多相关文章

  1. H5离线缓存机制-manifest

    简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...

  2. H5 manifest离线缓存

    请跳转我的有道云笔记查看: http://note.youdao.com/noteshare?id=caaf067c6e38820ba8f87b212c2327a9&sub=23E0F8F7A ...

  3. H5应用程序缓存 - Cache manifest

    一.作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件.优化加载速度,节约服务器资源. 二.适用场景 正如 manifest 英译的名字:离线应用程 ...

  4. H5 缓存机制浅析 移动端 Web 加载性能优化

    腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...

  5. H5 和移动端 WebView 缓存机制解析与实战

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qHm_dJBhVbv0pJs8Crp77w 作者:叶 ...

  6. H5离线缓存技术Application Cache

    H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...

  7. H5 缓存机制解析

    在web项目开发中,我们可能都曾碰到过这样一个棘手的问题: 线上项目需要更新一个有问题的资源(可能是图片,js,css,json数据等),这个资源已经发布了很长一段时间,为什么页面在浏览器里打开还是没 ...

  8. h5的缓存机制

    H5的缓存,大概有localstorage.sessionstorage.cookie和manifest. 一.LocalStorage LocalStorage是永久性的本地缓存,存储在客户端的浏览 ...

  9. H5 离线缓存的用法

    H5离线缓存基础系列   1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...

随机推荐

  1. [Android Pro] 完美解决隐藏Listview和RecyclerView去掉滚动条和滑动到边界阴影的方案

    reference to : http://blog.csdn.net/ming2316780/article/details/51578621 一.首先是Listview的属性设置 设置滑动到顶部和 ...

  2. Servlet 生命周期与web容器的关系

    servlet生命周期由web容器(如tomcat)管理,初始化一次,直到web容器关闭才会被销毁.1.servlet是单例多线程,每个请求过来容器都会启用一个新线程 2.servlet在容器中保持单 ...

  3. LNMP平台搭建---MySQL安装篇

    在前两篇中,安装了一个基本的Web服务器,但是只能提供静态网页查看,要做成动态网站,就必须要数据库或其他编程语言支持了,这里先介绍MySQL数据库的安装. MySQL是一个开源的数据库,在互联网行业应 ...

  4. 登录服务器windows2008出现：远程桌面服务当前正忙,因此无法完成您尝试执行的任务。（或者出现黑屏界面）

    问题:有段时间登录服务器总是提示:远程桌面服务当前正忙,因此无法完成您尝试执行的任务. 在微软找到的原因是:Csrss.exe 进程和某些应用程序 (例如,Microsoft Excel 或 Micr ...

  5. ibatis.net MVC 单元测试 错误解决方法

    Q1:Unable to load file via resource "SqlMap.config" as resource.Cause : 未能找到文件:"...Te ...

  6. Android Studio 之 no render target selected

    今天第一次使用android studio, 莫名其妙出现 no render target selected的错误,没有设计界面, 各种百度之后在 stackoverflow.com/questio ...

  7. html学习第一天笔记——第四、五章节

    讲解:1. 在上面的例子中,“庄生晓梦迷蝴蝶.望帝春心托杜鹃.” 这是一句诗歌,出自晚唐诗人李商隐的<锦瑟> .因为不是作者自己的文字,所以需要使用<q></q>实 ...

  8. 表单验证——jquery validate使用说明【另一个教程】

    [参考:http://www.tuicool.com/articles/y6fyme] jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证 ...

  9. oracle的sqlnet.ora,tnsnames.ora,listener.ora三个配置文件

    总结: 1 .三个配置文件都是放在$ORACLE_HOME\network\admin目录下. 2 .sqlnet.ora确定解析方式 3 .listener.ora上设SID_NAME,通常用于JD ...

  10. Python for Infomatics 第12章 网络编程五（译）

    注:文章原文为Dr. Charles Severance 的 <Python for Informatics>.文中代码用3.4版改写,并在本机测试通过. 12.8 用urllib读取二进 ...