第14章 离线网络应用程序——文件缓存
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
14.3.3 更新缓存
例如，下面的代码演示了如何使用这两个方法 实现更新。
var appCache=window.applicationCache;
//开始检查清单文件的更新
appCache.update(); if(appCache.status==appCache.UPDATEREADY){
14.3.4 监听事件
更新的过程会触发一系列事件。 当浏览器发现网页定义有manifest属性，就会 发送事件给window.applicationCache对象， 然后获取manifest文件。文件无变化表明客户 端当前缓存是最新的，发送noupdate事件给 window.applicationCache对象，更新过程 完成。
14.3.5 检测脱机模式
1. 事件
当用户由联机进入脱机状态后，就会触发 window对象的offline事件，反之触发online 事件。可以使用下面3种方式之一来声明事件： （1）对window、document、 document.body使用addEventListener方法 注册监听函数。
14.3.5 检测脱机模式
2. 范例
下面代码演示了如何使用这些API。
脱机检测Firefox
14.4 将网页添加为桌面快捷方式
14.4.1 为网站设计图标
14.4.2 为Android添加桌面快捷方式
14.4.3 指定一个启动图片
14.4.4 隐藏Safari界面
14.4.5 改变状态栏
14.3.1 获取缓存
当位于一个网页中时，cache就表示应用于当 前文档所表示的window的ApplicationCache 对象。 applicationCache属性页可以用在共享 Worker中，用于返回对应的 ApplicationCache对象。
var cache=self.applicationCache;
14.2.2 备抵机制
下面的清单代码表示如果用户离线，将所有文 件重定向到404.html代替。
FALLBACK: / / 404.html
14.2.3 在线白名单
NETWORK: 段定义一个白名单，其中的文件 都是必须访问网络的。 该段中可以使用通配符*表示所有资源。
CACHE MANIFEST FALLBACK: / / 404.html NETWORK: *
14.3.5 检测脱机模式
可以使用window.navigator.onLine属性检测 浏览器是否处于脱机模式，该属性是一个只读 的逻辑值。
<script> document.write(“当前模 式：”+(navigator.onLine?”在线”:”脱机”)); </script>
当用户在浏览器中选择脱机工作状态后，内容 将从缓存进行读取。
第14章 离线网络应用程 序——文件缓存
什么是应用程序缓存（Application Cache）？
RIA的一个关键是能够实现网络应用程序在离 线状态下也能应用。
包括本地存储、Web SQL Database，已经实 现了离线数据存储。但要实现离线RIA应用， 还需要业务逻辑能够离线运行，必须使用 Application Cache。
14.1.4 测试离线应用
在浏览器中请求网页，即使拔出网页，设置为 脱机工作后，仍可以执行其中的业务逻辑，不 会影响网页运行。
14.1.5 更新离线存储
要更新离线存储文件必须更新manifest文件， 否则即使存储文件发生了变化也不会起作用。
例如变更了CSS文件修改了呈现内容，但不更 改manifest文件，新内容根本不会应用到网页。 使用浏览器的“清除浏览数据”功能可清除 manifest文件，导致重新下载该文件也可以实 现重建离线存储。 使用window.applicationCache对象控制更新。
HTML5定义了ApplicationCache接口来规范 离线缓存的控制。
14.3.1 获取缓存
ApplicationCache对象对应于一个网页的缓 存，使用window.applicationCache属性可 以获得对该对象的引用。 例如：
var cache=window.applicationCache;
14.1.1 配置MIME类型
Windows 7系统上的IIS是一个Web服务器， 可以使用它来定义manifest文件的MIME类型。 双击打开IIS服务器管理器，双击MIME类型选 择添加，完成设置即可。
14.1.2 创建离线应用网页及网页中要 引的资源
第二步是创建一个网页，并创建网页中要引用 的资源，包括图片文件、CSS文件、JS文件 等。
<html manifest=“test.manifest”> ……</html>
14.1 使用离线应用
manifest属性值定义的是一个文件路径，可以 使用绝对或相对路径，甚至可以引用其他服务 器上的manifest文件。 该文件所对应的MIME类型应该是text/cachemanifest，所以需要配置服务器来发送对应的 MIME类型信息。
<html manifest=“browser.manifest”> …… </html>
14.1.3 创建清单文件
html元素的manifest属性指明的清单文件 browser.manifest ，下面创建它：
CACHE MANIFEST CHACHE; sample.html browser.css browser.js images/icon_ff.png images/icon_cn.png images/icon_ie.png images/icon_op.png images/icon_sa.png
//得到最新版本清单文件，并成功下载资源，更新缓存到最新。
appCache.swapCache(); }
14.3.3 更新缓存
1.使用update()方法检查更新 该方法调用当前应用程序资源下载处理过程。 语法格式： cache.update()
2.使用swapCache()方法更新缓存 语法格式： cache.swapCache()
window.addEventListener(“offline”,func_offline,false); window.addEventListener(“online”,func_online,false);
14.3.5 检测脱机模式
（2）对document或document.body使用 ononline或onoffline属性指定监听函数。
document.body.onoffline=func_offline; document.body.ononline=func_online;
不能使用window.ononline或 window.onoffline属性来设置监听函数。
（3）对body元素的ononline或onoffline属性 调用指定的事件处理函数。
14.2 缓存清单文件格式
CACHE MANIFEST CACHE: …… NETWORK: …… FALLBACK: ……
第一行是必须的， 用于声明该文件时 一个缓存请当文件。 下面3个关键字代表 3个功能段，后两个 是可选的。
14.2.1 定义要缓存的文件
要缓存的文件用CACHE: 关键字声明，也可 以不用关键字直接写在紧跟声明后。 如果包含其他两个字段，就必须用关键字 CACHE。
分两个步骤实现： （1）调用applicationCache.update()使得浏 览器开始尝试更新，前提是manifest文件是更 新过的。如修改了版本号。 （2）在applicationCache.status为 UPDATEREADY状态时就可以调用 applicationCache.swapCache()来将旧的缓 存更换为新的。
14.3.4 监听事件
manifest文件变化，就会首先将清单中的文件 下载到一个临时缓存，每一个要增加到临时缓 存的文件就会触发progress事件。如果有错 误发生，则会触发error事件，并且更新终止。 一旦所有文件被成功获取，这些文件就会自动 被移动到真正的离线缓存区，并触发cached 事件。
14.2.2 备抵机制
FALLBACK: 用于定义不能获取指定文件时的 备抵机制，它定义一个重定向文件，当无法访 问一个文件时就重定向到另一个文件。 每一行包括两个URI，第一个是资源文件URI， 第二个是回调页面URI。
FALLBACK: /index.php/ 404.html /login.php/ 404.html
CACHE MANIFEST # offline NotePad modified by 10/22/2010
14.2.4 注释
这样写有3个好处： 可以明确了解Web应用的版本。 通过简单的修改版本号或日期可以用轻易通知 浏览器更新。 可以配合JavaScript程序来完成缓存更新。
14.3 使用DOM方法处理离线应用
14.3.3 更新缓存
如服务器有最新文件就会更新到缓存，但不会使 得之前加载的资源突然被重新加载。例如，图片、 样式和脚本不会被重新加载或渲染，惟一的变化 时在此之后发出请求页面的资源是最新的。 如果没有应用程序缓存需要更新么，就会抛出异 常。 不管是manifest文件还是它罗列的资源文件下载 失败，整个更新过程就终止了，浏览器会使用上 一个最新缓存。
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进 行访问。
什么是应用程序缓存（Application Cache）？
通过创建 cache manifest 文件，可以轻松地 创建 web 应用的离线版本。 应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过 或更改过的资源。
所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。
14.1 使用离线应用
要实现文件缓存在客户端，可以使用根节点 html元素的manifest属性，该属性引用一个 清单文件。 它是文本文件，使用UTF-8编码，列出了离线 访问应用时所需缓存的文件清单。并且网页一 旦定义了html元素的manifest属性，那么该 网页也会被缓存。
14.2.4 注释
缓存清单使用#作为注释声明符，#之前可以有 空格，但只能包含单行注释。 注释用来描述缓存的功能，以及定义Web应用 的版本，通常在第一行注释定义。如：
CACHE MANIFEST # offline NotePad v1.1
14.2.4 注释
Web应用的缓存只有在清单文件被修改的情况 下才会被更新，若只修改了缓存文件，客户端 本地的缓存还是不会被更新的。 利用这点，通过修改注释中的版本号就可以实 现，或者在注释中定义一个修改日期也可以实 现同样功能。
14.3.2 检查状态
使用cache.status属性可以返回当前应用的缓 存状态。对应有5种，可以使用常量表示。 UNCACHED——0 IDLE——1 CHECKING——2 DOWNLOADING——3 UPDATEREADY——4 OBSOLETE——5
14.3.3 更新缓存