应用程序缓存（Application Cache）为应用带来三个优势：

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

manifest文件的位置在html标签中,

    <!DOCTYPE html>

    <html manifest="index.manifest">

    </html>

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

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

下面这个例子：

    CACHE MANIFEST

    #update at Fri Jun 17 2016 20:02:37 GMT+0800 (CST)

    NETWORK:

    *

    # *表示通配符，#表注释

    CACHE:

    build/lib.js

    style.css

    build/app.js    

    FALLBACK:

    /html 404.html

    #访问路径 文件

manifest 文件的写入可由gulp等(利用node.js的fs模块)在打包的时候写入

    var fs = require('fs');

    var workDir = 'demo';  //目录

    var cacheFiles = ['build/lib.js', 'build/app.js']; //要缓存的文件其实除了指定，还可以从index.html文件中去匹配src、href

    var cacheConArr = ['CACHE MANIFEST','#update at '+new Date(),'','NETWORK:','*','','CACHE:'].concat(cacheFiles).concat(['FALLBACK:','/html 404.html']);

    fs.writeFileSync(workDir+'index.manifest',cacheConArr.join('\n'));

在首次下载manifest 文件中的缓存，可看到这个

更新缓存

  • 用户清空浏览器缓存
  • manifest文件被修改
  • 由程序来更新应用缓存
    window.applicationCache.onupdateready = function(){

        location.reload();

    }

应用程序缓存－－manifest的更多相关文章

  1. HTML 5 应用程序缓存manifest

    什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏 ...

  2. HTML5之appcache语法理解/HTML5应用程序缓存/manifest缓存文件官方用法翻译

    习惯性的贴几个参考链接: W3School-HTML 5 应用程序缓存 官方 MDN window.applicationCache 接口文档 官方 MDN 用法示例 看所有的教程不如直接看最原始的官 ...

  3. HTML 5 应用程序缓存（Application Cache）cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的

    HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...

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

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

  5. HTML5应用程序缓存Application Cache

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  6. HTML 5 应用程序缓存(下)

    Manifest 文件manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容). manifest 文件可分为三个部分: CACHE MANIFEST - 在此标题下列出的 ...

  7. HTML 5 应用程序缓存(上)

    什么是应用程序缓存(Application Cache)?HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 ...

  8. Manifesto – HTML5 离线应用程序缓存校验工具

    Manifesto 是一个 HTML5 离线应用程序缓存校验工具,提供了快速校验 HTML5 manifest 文件有效性的方法.离线应用程序缓存在使用中最困难的部分之一就是无法正常工作的时候没有明显 ...

  9. 【HTML5】浅析HTML5应用程序缓存（ApplicationCache）

    一.为什么需要Web应用程序缓存 在移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,这对于web的伤害是很大的    ...

随机推荐

  1. Thinkphp源码分析系列（六）–路由机制

    在ThinkPHP框架中,是支持URL路由功能,要启用路由功能,需要设置ROUTER_ON 参数为true. 开启路由功能后,系统会自动进行路由检测,如果在路由定义里面找到和当前URL匹配的路由名称, ...

  2. I/O系统 （输入/输出）

    I/O系统 1:流: (1)判断到底是输入,还是输出:永远站在程序的立场上: (2)判断传递的到底是字节还是字符,从而决定管道的粗细: 字节管道可以传递所有数据,字符管道专门用来传递文本数据(1个字符 ...

  3. php-fpm 在centos 7下的安装配置

    安装php: sudo yum install php php-fpm php-mysql php-mbstring php-mcrypt php-sockets php-curl php-commo ...

  4. nginx 配置全站404（百度闭站保护）

    在百度站长里申请闭站保护时,需要全站404.可能过nginx配置实现 location / {   #root html;   #index index.html index.htm;   retur ...

  5. java学习第18天（map集合）

    Map集合是将键映射到值的对象.一个映射不能包含重复的键:每个键最多只能映射到一个值. 存储的是键值对形式的元素,键唯一,值可以重复,有点类似于数据库中的主键加数据.主要功能有: A:添加功能 put ...

  6. Python字符串的encode与decode研究心得乱码问题解决方法

    为什么Python使用过程中会出现各式各样的乱码问题,明明是中文字符却显示成“\xe4\xb8\xad\xe6\x96\x87”的形式? 为什么会报错“UnicodeEncodeError: 'asc ...

  7. Java web--Filter过滤器分IP统计访问次数

    分IP统计访问次数即网站统计每个IP地址访问本网站的次数. 分析 因为一个网站可能有多个页面,无论哪个页面被访问,都要统计访问次数,所以使用过滤器最为方便. 因为需要分IP统计,所以可以在过滤器中创建 ...

  8. sql2008r2-vs2013安装下载

    vs2013链接:http://www.cnblogs.com/wuyepiaoxue/p/5661174.html sql2008r2链接:http://download.microsoft.com ...

  9. 宏碁台式机，如何设置u盘启动

    1.按delete进入BIOS2.Authentication->Secure Boot状态改为Disabled;Boot Options->Launch CSM状态改为Always;Bo ...

  10. CSS基础01

    1.line-height:设置每行的高度,默认是会以文字的高度来决定 2.text-align:设置文本的对齐方式 3.vertical-align: sub 垂直对齐文本的下标. super 垂直 ...