1、简介
W3C官方对manifest的介绍是HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
在使用过程中我总结了几个缺点：
manifest中cache部分不能使用通配符，如果缓存页引入大量JS，图片，写起来比较麻烦，虽然可以使用grunt-manifest自动生成
如果页面是通过ajax请求拼接出来的页面中含有图片，这些图片又是从web上传的，这些图片也必须写入缓存文件，否则下次就读不出来了。大大降低了实用性

2、mainifest实例
html中写法
<!doctype html>
<html manifest="index.manifest">
<head>
<meta charset="utf-8">
<title>应用中心</title>
注意：每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

缓存是否成功加载可以用Chrome打开这个页面就可以在控制台中找到这个manifest的工作信息：

再次请求此页面的时候：

如果有报错的话，会有提示：

3、缓存更新
一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest 文件被修改
由程序来更新应用缓存
开发者也可以使用 window.applicationCache 的接口更新缓存
获取缓存状态：window.applicationCache.status
为了通过编程更新cache，首先调用 applicationCache.update()。这将会试图更新用户的 cache（要求manifest文件已经改变）。最后，当 applicationCache.status 处于 UPDATEREADY 状态时， 调用applicationCache.swapCache()，旧的cache就会被置换成新的。
4、自动化工具
manifest中cache部分不能使用通配符，如果缓存页引入大量JS，图片，写起来比较麻烦，这时候就可以使用自动化工具grunt-manifest。
grunt-manifest GitHub地址
grunt搭建查看：【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
安装grunt-manifest

npm install grunt-manifest --save-dev

载入：

grunt.loadNpmTasks('grunt-manifest');
grunt.initConfig({

  pkg: grunt.file.readJSON('package.json'),

  manifest: {

    generate: {

      options: {

        basePath: '../',

        cache: ['js/app.js', 'css/style.css'],

        network: ['http://*', 'https://*'],

        fallback: ['/ /offline.html'],

        exclude: ['js/jquery.min.js'],

        preferOnline: true,

        headcomment: " <%= pkg.name %> v<%= pkg.version %>",

        verbose: true,

        timestamp: true,

        hash: true,

        master: ['index.html'],

        process: function(path) {

          return path.substring('build/'.length);

        }

      },

      src: [

          'build/some_files/*.html',

          'build/js/*.min.js',

          'build/css/*.css'

      ],

      dest: 'manifest.appcache'

    }

  }

});

其中options定义生成manifest的一些自定义参数，src是要生成的文件，dest是输出文件。

options下有很多参数，主要参数如下：

basePath 设置出入文件的根目录

cache 手动添加缓存文件

network 手动添加网络文件

fallback 手动添加后备文件

exclude 设置不添加到cache的文件

verbose 是否添加版权信息

timestamp是否添加时间戳

5、注意事项
浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
引用manifest的html必须与manifest文件同源，在同一个域下。
FALLBACK中的资源必须和manifest文件同源。
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问。
当manifest文件发生改变时，资源请求本身也会触发更新。
系统会自动缓存引用清单文件的 HTML 文件
manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面

HTML5 离线缓存manifest的更多相关文章

  1. HTML5离线缓存Manifest

    web app不比PC,有性能和流量方面的考虑,离线应用越来越重要,虽然浏览器有缓存机制,但是时常不靠谱,更何况普通情况下html文件是没法缓存的,断网之后一切over. 什么是manifest? 简 ...

  2. HTML5 离线缓存Appcache

    创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可: <ht ...

  3. HTML5离线缓存（Application Cache）

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  4. HTML5离线缓存问题

    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...

  5. html5离线缓存使用

    html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appc ...

  6. node.js与HTML5离线缓存

    最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node ...

  7. HTML5离线缓存攻击测试

    本实验采用局域网模拟,通过修改本地HOSTS文件来模拟域名以及DNS欺骗.合法网站使用Linux CentOS7的apache服务器搭建,IP为192.168.1.113,HOSTS文件中加入192. ...

  8. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

  9. 记离线缓存(manifest)一大坑，断定其只适用于静态网站或离线应用

    今天看了离线缓存(manifest)方面的资料,兴冲冲地就想给自己的网站用上.待我把代码都写好部署上服务器,并测试过OK的时候,在SegmentFault刷了一把manifest方面的问答,才发现这个 ...

随机推荐

  1. imregionalmax imregionalmin imextendedmax imextendedmin imhmax imhmin 函数的详解 matlab中函数

    BW = imregionalmax(I): 该函数获得灰度图像 I 的局部极大值,返回值BW为和原图像大小相同的二值图像,BW中元素1对应极大值,其他元素为0 BW = imregionalmax( ...

  2. 插件之一：Epplus

    从策划配置文件导入项目实际使用,为提高效率总会使用一些转换工具,据同事介绍Epplus更强大一些,我自己试了下,发现api非常全面且强大.记录下所学. 一.插件来源 https://github.co ...

  3. 花里胡哨，如何在Linux终端输出带有颜色的字体，将带颜色的字体赋值给变量

    背景 ​ 在日常操作Linux的情况下,总会遇到一些需求,比如说,把输出的内容用不同颜色标注出来,以达到醒目.提示的目的,那么如何在Linux终端输出带有颜色的字体呢? Linux终端输出字符颜色 ​ ...

  4. 连接池和JDBCTemplate

    一:什么是连接池?使用连接池的好处是什么? 连接池就是一个存放数据库连接对象的容器.当系统初始化后,就会向数据库申请一些连接对象存放到容器里,用的时候直接从容器里取,用完后放回连接池. 连接池可以提高 ...

  5. C#中异步编程异常的处理方式

    异步编程异常处理 在同步编程中,一旦出现错误就会抛出异常,我们可以使用try-catch来捕捉异常,未被捕获的异常则会不断向上传递,形成一个简单而统一的错误处理机制.但是对于异步编程来说,异常处理一直 ...

  6. 如何克服社交恐惧症？zz

    zhang Bavol 清华大学核能与新能源技术研究院——核科学与技术/电子爱好者     你说的这个恐惧症我也有一点点,不过现在我是只对那种不是很熟悉的七姑八婆之类的亲戚才会有这种憋屈感觉,对朋友和 ...

  7. PTA(Basci Level)1043.输出PATest

    给定一个长度不超过 104 的.仅由英文字母构成的字符串.请将字符重新调整顺序,按 PATestPATest.... 这样的顺序输出,并忽略其它字符.当然,六种字符的个数不一定是一样多的,若某种字符已 ...

  8. LeetCode 第 14 场双周赛

    基础的 api 还是不够熟悉啊 5112. 十六进制魔术数字 class Solution { public: char *lltoa(long long num, char *str, int ra ...

  9. 真理胜于一切 JAVA模拟表单提交

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  10. HTTP报文学习

    HTTP报文用于HTTP协议的信息交互,分为请求报文和响应报文.报文由首部和主体两部分组成,中间使用空行(CR+LF)分隔 1. 报文结构 报文由首部.空行和实体组成: 报文中首先是请求行或者状态行, ...