应用程序缓存--manifest
应用程序缓存(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的更多相关文章
- HTML 5 应用程序缓存manifest
什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏 ...
- HTML5之appcache语法理解/HTML5应用程序缓存/manifest缓存文件官方用法翻译
习惯性的贴几个参考链接: W3School-HTML 5 应用程序缓存 官方 MDN window.applicationCache 接口文档 官方 MDN 用法示例 看所有的教程不如直接看最原始的官 ...
- HTML 5 应用程序缓存(Application Cache)cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存,不同的manifest文件其缓存的内容是互不干扰的
HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...
- H5应用程序缓存 - Cache manifest
一.作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件.优化加载速度,节约服务器资源. 二.适用场景 正如 manifest 英译的名字:离线应用程 ...
- HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- HTML 5 应用程序缓存(下)
Manifest 文件manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容). manifest 文件可分为三个部分: CACHE MANIFEST - 在此标题下列出的 ...
- HTML 5 应用程序缓存(上)
什么是应用程序缓存(Application Cache)?HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 ...
- Manifesto – HTML5 离线应用程序缓存校验工具
Manifesto 是一个 HTML5 离线应用程序缓存校验工具,提供了快速校验 HTML5 manifest 文件有效性的方法.离线应用程序缓存在使用中最困难的部分之一就是无法正常工作的时候没有明显 ...
- 【HTML5】浅析HTML5应用程序缓存(ApplicationCache)
一.为什么需要Web应用程序缓存 在移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,这对于web的伤害是很大的 ...
随机推荐
- 【原创】Android内存管理-OnTrimMemory
Application中有两个与内存管理相关的方法:onLowMemory()和 onTrimMemory(int level),源码如下 @CallSuper public void onLowMe ...
- Upload files to aliyunOSS with bootstrap-fileinput
本文主要涉及两个概念: 阿里云OSS:对象存储(Object Storage Service,简称OSS),是阿里云对外提供的海量.安全和高可靠的云存储服务. bootstrap-fileinput: ...
- jQuery.fn.extend() 与 jQuery.extend()
jQuery.fn如何扩展. jQuery插件 $.fn(object)与$.extend(object) jQuery提供了两个方法帮助开发插件 $.extend(object);扩展jQuery类 ...
- MS - 1 - 把二元查找树转变成排序的双向链表
## 1. 把二元查找树转变成排序的双向链表 ## ### 题目: 输入一棵二元查找树,将该二元查找树转换成一个排序的双向链表. ### 要求不能创建任何新的结点,只调整指针的指向. 10 ...
- maven项目管理构建
准备工作 在eclipse配置maven之前需要我们做好准备工作,如下: 1. 安装jdk 2. 已安装好 maven,将maven配置成功 3. 下载Eclipse,解压缩安装完成,建立工作空间. ...
- disconf系列【2】——解决zk部署情况为空的问题
如下图所示,在安装完成之后,发现zk(zookeeper)部署情况为空. 注:承接上篇,环境未发生改变. 1.解决zk没有启动的问题 查看disconf日志,发现zk没有启动. 实际情况是:zk已经启 ...
- maven更新远程仓库速度太慢解决方法
1.maven在更新下载jar包的时候,因为jar包默认是从国外服务器上下载的,所以速度特别慢 2.通过设置镜像的方法加快jar包下载 3.在maven安装目录下,/config/settings.x ...
- TCP拥塞控制算法 优缺点 适用环境 性能分析
[摘要]对多种TCP拥塞控制算法进行简要说明,指出它们的优缺点.以及它们的适用环境. [关键字]TCP拥塞控制算法 优点 缺点 适用环境公平性 公平性 公平性是在发生拥塞时各源端(或同一源端 ...
- AngularJS 1.2.x 学习笔记(表单校验篇)
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- 深入理解URL
URI(Universal Resource Identifier)通常由三部分组成: ①访问资源的命名机制: ②存放资源的主机名: ③资源自身的名称,由路径表示. 如下面的URI:http://ww ...