HTML5 学习笔记 应用程序缓存
使用html5 通过创建cache manifest文件,可以轻松地创建web应用的离线版本。
html5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
1,离线缓存-用户可在应用离线时使用它们。
2,速度-已缓存资源加载得更快
3,减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源。
HTML5 Cache Manifest实例
下面的例子展示了带有cache manifest的html文档(供离线浏览):
<!DOCTYPE HTML>
<html manifest="demo.appcache"> <body> </body> </html>
Cache Manifest基础
如需启用应用程序缓存,请在文档的html标签中包含manifest属性:
每个指定了manifest的页面在用户对其访问时都会被缓存。如果未指定manifest属性,则页面不会被缓存(除非在manifest文件中直接指定了该页面)
Tmanifest文件的建议的文件扩展名是:".appcache".
请注意:manifest文件需要配置正确的MIME-type,即"text/cache-manifest".必须在web服务器上进行配置。
Manifest文件
manifest文件是简单的文本文件,它告知浏览器被缓存的内容(以及不被缓存的内容)。
manifest文件可分为三个部分:
CACHE MANIFEST 在此标题下列出的文件将在首次下载后进行缓存
NETWORK 在此标题下列出的文件需要与服务器连接,且不会被缓存
FALLBACK,在此标题下列出的文件规定当页面无法访问回退页面
CACHE MANIFEST
第一行,CACHE MANIFEST是必需的:
CACHE MANIFEST
/theme.css
/logo.gif
/jquery.js
上面的manifest文件列出了三个资源:一个css文件,一个gif图像,以及一个js文件,当manifest文件加载后,浏览器会从网站的根目录下下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。
NETWORD
下面的NETWORD小节规定文件"login.php"永远不会被缓存,且离线时是不可用的:
FALLBACK
下面的FALLBACK小节规定如果无法建立因特网连接,则用"offline.html",替代/html5/目录中所有的文件:
FALLBACK:
/html/ /offline.html 注意: 第一个 URI 是资源,第二个是替补。
更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:
用户清空浏览器缓存
manifest文件被修改(参阅下面的提示)
由程序来更新应用缓存
关于应用程序缓存的说明
请留心缓存的内容
一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新manifest文件。
注意:浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个闪站点5MB)
HTML5 学习笔记 应用程序缓存的更多相关文章
- HTML5学习(九)----应用程序缓存
参考教程:http://www.w3school.com.cn/html5/html_5_app_cache.asp 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 w ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- HTML5学习总结-08 应用缓存(Application Cache)
一 应用缓存(Application Cache) 1 应用缓存 HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: ...
- HTML 5 学习之应用程序缓存
什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏 ...
- html5学习笔记3——高级特性
一:Web存储 数据以 键/值 对存在, web网页的数据只允许该网页访问使用. web存储有两种: localStorage - 没有时间限制的数据存储,存于浏览器缓存 sessionStorage ...
- mybatis学习笔记(14)-查询缓存之中的一个级缓存
mybatis学习笔记(14)-查询缓存之中的一个级缓存 标签: mybatis mybatis学习笔记14-查询缓存之中的一个级缓存 查询缓存 一级缓存 一级缓存工作原理 一级缓存測试 一级缓存应用 ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- SpringBoot学习笔记:Redis缓存
SpringBoot学习笔记:Redis缓存 关于Redis Redis是一个使用ANSI C语言编写的免费开源.支持网络.可基于内存亦可以持久化的日志型.键值数据库.其支持多种存储类型,包括Stri ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
随机推荐
- 自定义ListView adapter适配器
转自:http://hilary3113.iteye.com/blog/998352 listview加载adapter过程是这样的. 1 先判断adapter 有多少数据项,根据这个数据确定有多少i ...
- 用百度SDK获取地理位置和天气信息
以下实现通过百度SDK获取地理位置和天气信息,请參考title=android-locsdk/guide/v5-0">百度开发文档 1. 在相关下载最新的库文件.将so文件的压缩文件解 ...
- Android ListView工作原理完全解析,带你从源码的角度彻底理解
版权声明:本文出自郭霖的博客,转载必须注明出处. 目录(?)[+] Adapter的作用 RecycleBin机制 第一次Layout 第二次Layout 滑动加载更多数据 转载请注明出处:h ...
- cas忽略地址配置
项目中需要忽略部分地址不需要cas验证,网上资料不多,结合cas源码,找到了配置方法:web.xml中增加ignorePattern配置.实际上是通过正则表达式来匹配. <filter> ...
- iOS开源项目:JSONKit
一个Json解析库,其特点是代码简单,只有一个.h和.m文件. https://github.com/johnezang/JSONKit JSON(JavaScript Object Notation ...
- 如何把rc.local里执行的shell脚本的日志内容放到其他位置
rc.local的日志内容默认是/var/log/boot.log /etc/rc.d/rc.local文件的文件头是#!/bin/sh ,我们把这修改成#!/bin/sh -x,这样系统启动后就会把 ...
- go语言基础之格式化输出
1.fmt包的格式化输出输入 格式说明 格式 含义 %% 一个%字面量 %b 一个二进制整数值(基数为2),或者是一个(高级的)用科学计数法表示的指数为2的浮点数 %c 字符型.可以把输入的数字按照A ...
- 使用CSS3实现的player播放按钮
完成的效果如下 查看效果并下载 Step 1:先了解border的原理: Step 2:HTML代码结构 <section class="playContainer"> ...
- jQuery/javascript实现IP/Mask自动联想功能
之前做一个云计算的项目,涉及到一个安全组自动联想的功能,思想是这样的: 安全组规则之间是可以相互引用的,也可以自己是自己手动输入的ip/mask,这时候可以加一个功能,实现securityGroupI ...
- 高性能HTML
避免使用Iframe Iframe也叫内联frame,可以把一个HTML文档嵌入到另一个文档中.使用iframe的好处是被嵌入的文档可以完全独立于其父文档,凭借此特点我们通常可以使浏览器模拟多线程,需 ...