应用程序缓存(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. 这些年正Android - 身在他乡

    “从不敢想到想去做到,做到我想的,事实证明我并不像他们想象的那样脆弱.我只是需要一盏灯,一架钢琴,一支麦克风.曾经想象过做一名医生救死扶伤,也曾想过做律师,做记者,做奥运冠军,但是都没有结果.因为我最 ...

  2. arcgis_engine_c++_runtime_r6034_error

    在启动项目中添加app.manifest文件 <?xml version="1.0" encoding="utf-8"?> <asmv1:as ...

  3. cucumber:环境安装

    1.安装RubyInstallerhttp://rubyinstaller.org/downloads/注意:安装目录结构不要太深安装完成后在命令行运行: ruby –v 可以查看是否安装成功2.安装 ...

  4. Vue2父子组件通信探究

    父组件: <template> <div id="secondcomponent"> <input type="" v-model ...

  5. flag--命令行参数解析之StringVar

    func StringVar func StringVar(p *string, name string, value string, usage string) StringVar定义了一个有指定名 ...

  6. selenium3.0.1调用firefox

    报错信息如下时: selenium.common.exceptions.WebDriverException: Message: 'geckodriver' executable needs to b ...

  7. 转:python list排序的两种方法及实例讲解

    对List进行排序,Python提供了两个方法 方法1.用List的内建函数list.sort进行排序 list.sort(func=None, key=None, reverse=False) Py ...

  8. 重走java--Step 2

    java基础语法(一) 1.java基本数据类型 byte:1个字节,8bit有符号数据类型boolean:2个字节,16bit布尔数值char:2个字节,16bit的Unicode字符类型int:4 ...

  9. nagios二次开发(四)---nagios监控原理和nagios架构简介

    nagios监控原理 下面根据上面摘自网络的原理图对nagios的监控原理进行一下简单的说明: 1.nagios通过nsca进行被动监控.那么什么是被动监控呢?被动监测:就是指由被监测的服务器主动上传 ...

  10. VC++ 迭代器 iterator, const_iterator, const iterator

    迭代器 iterator, const_iterator, const iterator 迭代器iterator的作用类似于指针. (1)iterator只有针对制定<类型>的容器才有效. ...