应用程序缓存（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. MFC 自绘按钮 消息响应

    单检测到按下消息时,发送一个消息 m_pParent->PostMessage(WM_COMMAND, IDC_BUTTON1); 然后再在消息映射里建立映射. ON_COMMAND(IDC_B ...

  2. sql参数化查询in的参数

    private Query setParameter(Query query, Map<String, Object> map) { if (map != null) { Set<S ...

  3. ansible playbook 示例

    http://blog.keshi.org/hogememo/2015/12/07/exploiting-ansible-jinja2 http://blog.keshi.org/hogememo/2 ...

  4. Could not parse mapping document from input stream hibernate配置异常

    十二月 , :: 下午 org.apache.catalina.core.StandardContext listenerStart SEVERE: Exception sending context ...

  5. java学习第12天

    今天主要是看下正则表达式,其实在编译原理中就接触过.正则表达式就是符合一定规则的字符串. A:字符 x 字符 x.举例:'a'表示字符a \\ 反斜线字符. \n 新行(换行)符 ('\u000A') ...

  6. CoreData总结

    Core Data,它提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite数据库文件中,也能够将保存在数据库中的数据还原成OC对象.在此数据操作期间,我们不需要编写任何 ...

  7. HTML标签拾遗

    在日常的开发过程中,经常与HTML标签打交道,常用的标签往往是那么几个,在此记录下后续可能会用到的html标签,或许会有意向不到的奇效.全部内容来自w3cschool. <abbr>   ...

  8. C# winform 动态调用WebService

    封装的通用方法: using System; using System.Collections.Generic; using System.Text; using System.Xml; using ...

  9. log4net日志在app.config中assembly不起作用

    log4net 1.2.15.0日志在app.config中assembly不起作用,必须 1.手动调用方法log4net.Config.XmlConfigurator.Configure()来初始化 ...

  10. vim的一些配置

    所有用户的共同配置位于 /etc/vimrc 或者 /ect/vim/vimrcz中,可能还会有其他的配置文件,例如vimrc.tiny,具体的应用场景文件内会有说明. 某个特定用户的vim配置位于 ...