应用程序缓存（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. setFeatureInt、android 自定义标题栏

    Android 自带的toolbar 往往不能很好的的满足我们的个性化要求.因此我们经常使用自定的的标题栏.而Android系统本身也允许我们自定以标题栏. 记录一下,自定义标题栏常遇到的问题.先上效 ...

  2. hyper-v虚拟化管理

    一.  什么是Hyper-V? —    Hyper-V是微软的一款虚拟化产品,是微软第一个采用类似Vmware和Citrix开源Xen一样的基于hypervisor的技术. —    Hyper-V ...

  3. 批量插入数据(基于Mybatis的实现-Oracle)

    前言:做一个数据同步项目,要求:同步数据不丢失的情况下,提高插入性能. 项目DB框架:Mybatis.DataBase:Oracle. -------------------------------- ...

  4. JVM内存模型与性能调优

    堆内存(Heap) 堆是由Java虚拟机(JVM,下文提到的JVM特指Sun hotspot JVM)用来存放Java类.对象和静态成员的内存空间,Java程序中创建的所有对象都在堆中分配空间,堆只用 ...

  5. webconfig中注册HttpHandler报错：检测到在集成的托管管道模式下不适用的 ASP.NET 设置。

    为什么会出现以上错误? 在IIS7的应用程序池有两种模式,一种是"集成模式",一种是"经典模式". 经典模式 则是我们以前习惯的IIS 6 的方式. 如果使用集 ...

  6. 25. vm安装redhat步骤

    详见:http://jingyan.baidu.com/article/49ad8bce532c525834d8fa19.html

  7. python selenium 操作chrome

    1.下载chromedriver.exe 入在chrome 浏览器目录下 from selenium import webdriverimport os chromedriver = "C: ...

  8. 策略模式(strategy pattern)

    策略模式在java集合中的TreeSet和TreeMap中得到了很好的应用,我们可以实现Comparator接口实现Compareto()方法来定义自己的排序规则,然后通过TreeSet,TreeMa ...

  9. 38、重新复习javascript之三

    前言 虽然吧,每天都没有什么太有技术性的工作者,但是技术不能丢,希望也要有,人如果没有希望那不就和咸鱼一样了吗?小伙加油吧 1.html与javascript结合 <!DOCTYPE html ...

  10. javascript检查移动设备是否支持重力方向感应

    javascript如何检查移动设备,如手机平台是否支持重力或者方向感应. 可以使用html5提供的重力和方向感应接口来判断. html5 中针对高端手机提供了重力感应和重力加速的接口,开发可以利用这 ...