使用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 学习笔记 应用程序缓存的更多相关文章

  1. HTML5学习(九)----应用程序缓存

    参考教程:http://www.w3school.com.cn/html5/html_5_app_cache.asp 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 w ...

  2. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  3. HTML5学习总结-08 应用缓存(Application Cache)

    一 应用缓存(Application Cache) 1 应用缓存 HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: ...

  4. HTML 5 学习之应用程序缓存

    什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏 ...

  5. html5学习笔记3——高级特性

    一:Web存储 数据以 键/值 对存在, web网页的数据只允许该网页访问使用. web存储有两种: localStorage - 没有时间限制的数据存储,存于浏览器缓存 sessionStorage ...

  6. mybatis学习笔记(14)-查询缓存之中的一个级缓存

    mybatis学习笔记(14)-查询缓存之中的一个级缓存 标签: mybatis mybatis学习笔记14-查询缓存之中的一个级缓存 查询缓存 一级缓存 一级缓存工作原理 一级缓存測试 一级缓存应用 ...

  7. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. SpringBoot学习笔记:Redis缓存

    SpringBoot学习笔记:Redis缓存 关于Redis Redis是一个使用ANSI C语言编写的免费开源.支持网络.可基于内存亦可以持久化的日志型.键值数据库.其支持多种存储类型,包括Stri ...

  9. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

随机推荐

  1. Shell基础学习(六) 流程控制

    1.if if的语法格式 if conditon then command1 command2 ``` commandn fi 2.if else if conditon then command1 ...

  2. fork新建进程——父进程等待子进程结束

    #include <sys/types.h>#include<sys/wait.h>#include<unistd.h>#include<stdio.h> ...

  3. IntelliJ IDEA导出设置

    导出: [File]->[Export Settings] 导入: [File]->[Import Settings]

  4. BZOJ 1032 JSOI 2007 祖码Zuma 区间DP

    题目大意:依照祖玛的玩法(任意选颜色),给出一段区间.问最少用多少个球可以把全部颜色块都消除. 思路:把输入数据依照连续的块处理.保存成颜色和数量.然后用这个来DP.我们知道,一个单独的块须要两个同样 ...

  5. Switch debouncer uses only one gate

    The circuit in Figure 1 produces a single debounced pulse each time you press S1. Moreover, the circ ...

  6. Linux中/proc目录下文件详解(转贴)

      转载:http://www.sudu.cn/info/index.php?op=article&id=302529   Linux中/proc目录下文件详解(一) 声明:可以自由转载本文, ...

  7. iOS开源项目:FlatUIKit

    FlatUIKit是iOS中具有扁平化风格的UI(Flat UI)组件.FlatUIKit的设计灵感来源于Flat UI和Kyle Miller.FlatUIKit中的组件是通过扩展(category ...

  8. UVA 10790 (13.08.06)

     How Many Points of Intersection?  We have two rows. There are a dots on the toprow andb dots on the ...

  9. echarts使用记录(三):x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据

    1.去掉坐标轴刻度线,刻度数据,坐标轴网格,以Y轴为例,同理X轴 xAxis: [{ type: 'category', axisTick: {//决定是否显示坐标刻度 alignWithLabel: ...

  10. qt study 泛型和容器

    所谓泛型(generic) 能够像操作基本类型一样轻松操作对象的类和函数. qt容器类就是泛型类,基于模板的泛型类. 重载运算符overloaed operator, 托管容器 managed con ...