应用程序缓存(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. html5手写签名

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta co ...

  2. Openstack Day1简介及虚拟环境搭建

    本文章仅作为作者本人存档记忆!恕不详细展开内容!   openstack kilo版本重要组件(module)简介 ======================================= Ke ...

  3. 【leetcode】 Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  4. JVM调优

    堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制;系统的可用虚拟内存限制;系统的可用物理内存限制.32位系统 下,一般限制在1.5G~2G;64为操 ...

  5. nginx https配置

    nginx的https服务配置如下(在server中配置): ssl on; ssl_session_cache shared:SSL:50m; ssl_session_timeout 1d; ssl ...

  6. openssh升级至7.2

    此处升级操作的原则是保留系统原有ssh服务,新安装高版本ssh服务 1.下载openssh源码包 http://www.openssh.com/portable.html 2.安装#tar zxvf ...

  7. Modern Operating Systems(Ⅰ)——2014.12.15

    进程   进程模型     进程就是一个正在执行的程序的实例  值得注意的是,若一个程序运行了两遍,则算作两个进程 创建进程 在通用系统中,有四种主要事件导致进程的创建 ①系统的初始化 ②执行了 正在 ...

  8. js 和 jq 控制 checkbox

    判断checkbox是否选中  1. $("#id").attr("checked") 在jquery 1.6前(含1.6),返回值是boolean类型的tru ...

  9. SOME:收缩数据库日志文件,查看表数据量和空间占用,查看表结构索引修改时间

    ---收缩数据库日志文件 USE [master]ALTER DATABASE yourdatabasename SET RECOVERY SIMPLE WITH NO_WAITALTER DATAB ...

  10. c#轻松实现磁性窗口

    /// <summary>/// 磁性窗体函数/// </summary>/// <param name="form">窗体控件(一般传this ...