什么是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系统安装busybox

    转自:http://blog.csdn.net/lxgwm2008/article/details/38925051 busybox号称Linux平台的瑞士军刀,它集成了100多个最常用的Linux命 ...

  2. Linux常用命令学习8---（用户和用户组管理）

    1.用户和用户组     用户和用户组概念        用户:使用操作系统的人(Linux支持多个用户在同一时间登陆同一个操作系统)        用户组:具有相同权限的一组用户(Linux系统中可 ...

  3. 【tornado】系列项目（二）基于领域驱动模型的区域后台管理+前端easyui实现

    本项目是一个系列项目,最终的目的是开发出一个类似京东商城的网站.本文主要介绍后台管理中的区域管理,以及前端基于easyui插件的使用.本次增删改查因数据量少,因此采用模态对话框方式进行,关于数据量大采 ...

  4. 【Java EE 学习 45】【Hibernate学习第二天】【对象的三种状态】【一对多关系的操作】

    一.对象的三种状态. 1.对象有三种状态:持久化状态.临时状态.脱管状态(游离状态) 2.Session的特定方法能使得一个对象从一个状态转换到另外一个状态. 3.三种状态的说明 (1)临时状态:临时 ...

  5. jquery 20161014

    jquery.fn.extend <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  6. HDU 3642 Get The Treasury （线段树扫描线）

    题意:给你一些长方体,问你覆盖三次及以上的体积有多大 首先我们观察x轴y轴一样很大,但是z轴很小,所以我们可以枚举z轴(-500,500),注意我们枚举的是每一段长度为一的z轴的xy轴的面积而不是点. ...

  7. android中四大组件之间相互通信

    好久没有写有关android有关的博客了,今天主要来谈一谈android中四大组件.首先,接触android的人,都应该知道android中有四大组件,activity,service,broadca ...

  8. sar命令的使用

    http://blog.csdn.net/wudiyi815/article/details/7494847 http://blog.csdn.net/colin_liu2009/article/de ...

  9. svn在linux上的安装

    什么是svnSVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Subv ...

  10. 《DSP using MATLAB》示例Example5.10

    代码: n = 0:10; x = 10*(0.8) .^ n; [xec, xoc] = circevod(x); %% -------------------------------------- ...