HTML5之离线应用缓存
2015-11-16 16:21
666 查看
今天说说HTML5的新特性之一:离线应用缓存。
离线应用,就是在没有网络的情况下访问Web应用程序时,实际上是访问已下载的离线文件资源,并使得Web应用程序正常运行。
1. 离线资源缓存
在开发离线应用时,必须使用一种方案来说明哪些文件资源需要在离线状态下工作。当设备处于在线状态下,被指定缓存的资源文件便会缓存到本地。此后,如果用户在离线状态下再次访问该Web应用程序,浏览器就会自动加载本地资源,使得用户能够正常使用该Web应用程序。离线应用将使用manifest类型的文件作为需要配置缓存资源文件的配置文件。
2. ApplicationCache对象缓存状态
ApplicationCache对象记录着Web应用程序的缓存状态,开发者可以通过该缓存状态手动更新资源文件的缓存。
3. 在线状态检测
HTML5标准提供了onLine方法用于检测当前网络是否在线。
首先,将一个页面标为离线存储页面,需要给html标签绑定一个manifest属性指向离线配置文件:
test.manifest文件内容如下:
其中第一行的CACHE MANIFEST是必须要的标识
v是版本号
CACHE是要缓存的文件
NETWORK是不需要缓存的文件
FALLBACK是如果找不到文件,替换出现的文件
第一次加载页面:
第二次加载后可以看到只有b.js一个文件更新了,而其他文件都是从缓存中读取的。
可以通过开发者工具查询离线缓存:
在更新了资源之后,新的资源需要等到下次再打开app才会生效,如果需要资源马上就能生效,那么可以使用window.applicationCache.swapCache()方法来使之生效,出现这种现象的原因的浏览器会先使用离线资源加载页面,然后再去检测mainfest是否有更新,所以需要下次打开页面才能生效。
离线应用,就是在没有网络的情况下访问Web应用程序时,实际上是访问已下载的离线文件资源,并使得Web应用程序正常运行。
特性
开发者需要注意三个特性:1. 离线资源缓存
在开发离线应用时,必须使用一种方案来说明哪些文件资源需要在离线状态下工作。当设备处于在线状态下,被指定缓存的资源文件便会缓存到本地。此后,如果用户在离线状态下再次访问该Web应用程序,浏览器就会自动加载本地资源,使得用户能够正常使用该Web应用程序。离线应用将使用manifest类型的文件作为需要配置缓存资源文件的配置文件。
2. ApplicationCache对象缓存状态
ApplicationCache对象记录着Web应用程序的缓存状态,开发者可以通过该缓存状态手动更新资源文件的缓存。
3. 在线状态检测
HTML5标准提供了onLine方法用于检测当前网络是否在线。
实例
下面说说具体如何实现缓存资源文件。首先,将一个页面标为离线存储页面,需要给html标签绑定一个manifest属性指向离线配置文件:
<!doctype html> <html manifest="test.manifest" type="text/cache-manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/a.css"> <script src="js/a.js"></script> <script src="js/b.js"></script> </head> <body> </body> </html>
test.manifest文件内容如下:
CACHE MANIFEST #v0.1.0 CACHE: js/a.js css/a.css NETWORK: js/b.js FALLBACK: 404.html
其中第一行的CACHE MANIFEST是必须要的标识
v是版本号
CACHE是要缓存的文件
NETWORK是不需要缓存的文件
FALLBACK是如果找不到文件,替换出现的文件
第一次加载页面:
第二次加载后可以看到只有b.js一个文件更新了,而其他文件都是从缓存中读取的。
可以通过开发者工具查询离线缓存:
在更新了资源之后,新的资源需要等到下次再打开app才会生效,如果需要资源马上就能生效,那么可以使用window.applicationCache.swapCache()方法来使之生效,出现这种现象的原因的浏览器会先使用离线资源加载页面,然后再去检测mainfest是否有更新,所以需要下次打开页面才能生效。
相关文章推荐
- html5 Up and Running学习笔记(一)
- HTML5中input背景提示文字(placeholder)的CSS美化
- 玩转HTML5移动页面
- 关于HTML5的简单理解
- 使用纯HTML5编写一款网页上的时钟的代码分享
- html5学习笔记一
- 基于h5的history改善ajax列表请求体验
- HTML5之FileReader的使用
- HTML5 canvas例子-抽奖轮盘-时钟
- HTML5 拖放 视频(音频) 存储
- HTML5之drag
- HTML5之storage
- HTML5之worker
- 探讨H5方向与资本热宠
- 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
- HTML5笔记
- HTML5自定义属性对象dataset
- YouTube Video Download
- 配置设计
- [Ocean Modelling for Begineers] Ch5. 2D Shallow-Water Modelling