第14章 离线网络应用程序——文件缓存

1、第14章 离线网络应用程序文件缓存什么是应用程序缓存（什么是应用程序缓存（Application Cache）？）？nRIA的一个关键是能够实现网络应用程序在离的一个关键是能够实现网络应用程序在离线状态下也能应用。线状态下也能应用。n包括本地存储、包括本地存储、Web SQL Database，已经实，已经实现了离线数据存储。但要实现离线现了离线数据存储。但要实现离线RIA应用，应用，还需要业务逻辑能够离线运行，必须使用还需要业务逻辑能够离线运行，必须使用Application Cache。nHTML5 引入了应用程序缓存，这意味着引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没

2、有因特网连接时进应用可进行缓存，并可在没有因特网连接时进行访问。行访问。什么是应用程序缓存（什么是应用程序缓存（Application Cache）？）？ n通过创建通过创建 cache manifest 文件，可以轻松地文件，可以轻松地创建创建 web 应用的离线版本。应用的离线版本。n应用程序缓存为应用带来三个优势：应用程序缓存为应用带来三个优势：q离线浏览离线浏览 - 用户可在应用离线时使用它们用户可在应用离线时使用它们 q速度速度 - 已缓存资源加载得更快已缓存资源加载得更快 q减少服务器负载减少服务器负载 - 浏览器将只从服务器下载更新过浏览器将只从服务器下载更新过或更改过的资源。或

3、更改过的资源。n所有主流浏览器均支持应用程序缓存，除了所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。 14.1 使用离线应用使用离线应用n要实现文件缓存在客户端，可以使用根节点要实现文件缓存在客户端，可以使用根节点html元素的元素的manifest属性，该属性引用一个属性，该属性引用一个清单文件。清单文件。n它是文本文件，使用它是文本文件，使用UTF-8编码，列出了离线编码，列出了离线访问应用时所需缓存的文件清单。并且网页一访问应用时所需缓存的文件清单。并且网页一旦定义了旦定义了html元素的元素的manifest属性，那么该属性，那么该网页也会被缓存。网页也会

4、被缓存。14.1 使用离线应用使用离线应用nmanifest属性值定义的是一个文件路径，可以属性值定义的是一个文件路径，可以使用绝对或相对路径，甚至可以引用其他服务使用绝对或相对路径，甚至可以引用其他服务器上的器上的manifest文件。文件。n该文件所对应的该文件所对应的MIME类型应该是类型应该是text/cache-manifest，所以需要配置服务器来发送对应的，所以需要配置服务器来发送对应的MIME类型信息。类型信息。14.1.1 配置配置MIME类型类型nWindows 7系统上的系统上的IIS是一个是一个Web服务器，服务器，可以使用它来定义可以使用它来定义manifest文件的

5、文件的MIME类型。类型。n双击打开双击打开IIS服务器管理器，双击服务器管理器，双击MIME类型选类型选择添加，完成设置即可。择添加，完成设置即可。14.1.2 创建离线应用网页及网页中要创建离线应用网页及网页中要引用的资源引用的资源n第二步是创建一个网页，并创建网页中要引用第二步是创建一个网页，并创建网页中要引用的资源，包括图片文件、的资源，包括图片文件、CSS文件、文件、JS文件文件等。等。14.1.3 创建清单文件创建清单文件nhtml元素的元素的manifest属性指明的清单文件属性指明的清单文件browser.manifest ，下面创建它：，下面创建它：CACHE MANIFES

6、TCHACHE;sample.htmlbrowser.cssbrowser.jsimages/icon_ff.pngimages/icon_cn.pngimages/icon_ie.pngimages/icon_op.pngimages/icon_sa.png14.1.4 测试离线应用测试离线应用n在浏览器中请求网页，即使拔出网页，设置为在浏览器中请求网页，即使拔出网页，设置为脱机工作后，仍可以执行其中的业务逻辑，不脱机工作后，仍可以执行其中的业务逻辑，不会影响网页运行。会影响网页运行。14.1.5 更新离线存储更新离线存储n要更新离线存储文件必须更新要更新离线存储文件必须更新manifest

7、文件，文件，否则即使存储文件发生了变化也不会起作用。否则即使存储文件发生了变化也不会起作用。n例如变更了例如变更了CSS文件修改了呈现内容，但不更文件修改了呈现内容，但不更改改manifest文件，新内容根本不会应用到网页。文件，新内容根本不会应用到网页。n使用浏览器的使用浏览器的“清除浏览数据清除浏览数据”功能可清除功能可清除manifest文件，导致重新下载该文件也可以实文件，导致重新下载该文件也可以实现重建离线存储。现重建离线存储。n使用使用window.applicationCache对象控制更新。对象控制更新。14.2 缓存清单文件格式缓存清单文件格式n第一行是必须的，第一行是必须的

8、，用于声明该文件时用于声明该文件时一个缓存请当文件。一个缓存请当文件。n下面下面3个关键字代表个关键字代表3个功能段，后两个个功能段，后两个是可选的。是可选的。CACHE MANIFESTCACHE:NETWORK:FALLBACK:14.2.1 定义要缓存的文件定义要缓存的文件n要缓存的文件用要缓存的文件用CACHE: 关键字声明，也可关键字声明，也可以不用关键字直接写在紧跟声明后。以不用关键字直接写在紧跟声明后。n如果包含其他两个字段，就必须用关键字如果包含其他两个字段，就必须用关键字CACHE。14.2.2 备抵机制备抵机制nFALLBACK: 用于定义不能获取指定文件时的用于定义不能获

9、取指定文件时的备抵机制，它定义一个重定向文件，当无法访备抵机制，它定义一个重定向文件，当无法访问一个文件时就重定向到另一个文件。问一个文件时就重定向到另一个文件。n每一行包括两个每一行包括两个URI，第一个是资源文件，第一个是资源文件URI，第二个是回调页面第二个是回调页面URI。FALLBACK:/index.php/ 404.html/login.php/ 404.html14.2.2 备抵机制备抵机制n下面的清单代码表示如果用户离线，将所有文下面的清单代码表示如果用户离线，将所有文件重定向到件重定向到404.html代替。代替。FALLBACK:/ / 404.html14.2.3 在线

10、白名单在线白名单nNETWORK: 段定义一个白名单，其中的文件段定义一个白名单，其中的文件都是必须访问网络的。都是必须访问网络的。n该段中可以使用通配符该段中可以使用通配符*表示所有资源。表示所有资源。CACHE MANIFESTFALLBACK:/ / 404.htmlNETWORK:*14.2.4 注释注释n缓存清单使用缓存清单使用#作为注释声明符，作为注释声明符，#之前可以有之前可以有空格，但只能包含单行注释。空格，但只能包含单行注释。n注释用来描述缓存的功能，以及定义注释用来描述缓存的功能，以及定义Web应用应用的版本，通常在第一行注释定义。如：的版本，通常在第一行注释定义。如：CA

11、CHE MANIFEST# offline NotePad v1.114.2.4 注释注释nWeb应用的缓存只有在清单文件被修改的情况应用的缓存只有在清单文件被修改的情况下才会被更新，若只修改了缓存文件，客户端下才会被更新，若只修改了缓存文件，客户端本地的缓存还是不会被更新的。本地的缓存还是不会被更新的。n利用这点，通过修改注释中的版本号就可以实利用这点，通过修改注释中的版本号就可以实现，或者在注释中定义一个修改日期也可以实现，或者在注释中定义一个修改日期也可以实现同样功能。现同样功能。CACHE MANIFEST# offline NotePad modified by 10/22/2010

12、14.2.4 注释注释n这样写有这样写有3个好处：个好处：n可以明确了解可以明确了解Web应用的版本。应用的版本。n通过简单的修改版本号或日期可以用轻易通知通过简单的修改版本号或日期可以用轻易通知浏览器更新。浏览器更新。n可以配合可以配合JavaScript程序来完成缓存更新。程序来完成缓存更新。14.3 使用使用DOM方法处理离线应用方法处理离线应用nHTML5定义了定义了ApplicationCache接口来规范接口来规范离线缓存的控制。离线缓存的控制。14.3.1 获取缓存获取缓存var cache=window.applicationCache;nApplicationCache对象对

13、应于一个网页的缓对象对应于一个网页的缓存，使用存，使用window.applicationCache属性可属性可以获得对该对象的引用。以获得对该对象的引用。n例如：例如：14.3.1 获取缓存获取缓存n当位于一个网页中时，当位于一个网页中时，cache就表示应用于当就表示应用于当前文档所表示的前文档所表示的window的的ApplicationCache对象。对象。napplicationCache属性页可以用在共享属性页可以用在共享Worker中，用于返回对应的中，用于返回对应的ApplicationCache对象。对象。var cache=self.applicationCache;14.

14、3.2 检查状态检查状态n使用使用cache.status属性可以返回当前应用的缓属性可以返回当前应用的缓存状态。对应有存状态。对应有5种，可以使用常量表示。种，可以使用常量表示。nUNCACHED0nIDLE1nCHECKING2nDOWNLOADING3nUPDATEREADY4nOBSOLETE514.3.3 更新缓存更新缓存n分两个步骤实现：分两个步骤实现：n（1）调用）调用applicationCache.update()使得浏使得浏览器开始尝试更新，前提是览器开始尝试更新，前提是manifest文件是更文件是更新过的。如修改了版本号。新过的。如修改了版本号。n（2）在）在appli

15、cationCache.status为为UPDATEREADY状态时就可以调用状态时就可以调用applicationCache.swapCache()来将旧的缓来将旧的缓存更换为新的。存更换为新的。14.3.3 更新缓存更新缓存n例如，下面的代码演示了如何使用这两个方法例如，下面的代码演示了如何使用这两个方法实现更新。实现更新。var appCache=window.applicationCache;/开始检查清单文件的更新开始检查清单文件的更新appCache.update();if(appCache.status=appCache.UPDATEREADY) /得到最新版本清单文件，并成功下

16、载资源，更新缓存到最新。得到最新版本清单文件，并成功下载资源，更新缓存到最新。 appCache.swapCache(); 14.3.3 更新缓存更新缓存n1.使用使用update()方法检查更新方法检查更新n该方法调用当前应用程序资源下载处理过程。该方法调用当前应用程序资源下载处理过程。语法格式：语法格式：ncache.update()n2.使用使用swapCache()方法更新缓存方法更新缓存n语法格式：语法格式：ncache.swapCache()14.3.3 更新缓存更新缓存n如服务器有最新文件就会更新到缓存，但不会使如服务器有最新文件就会更新到缓存，但不会使得之前加载的资源突然被重新

17、加载。例如，图片、得之前加载的资源突然被重新加载。例如，图片、样式和脚本不会被重新加载或渲染，惟一的变化样式和脚本不会被重新加载或渲染，惟一的变化时在此之后发出请求页面的资源是最新的。时在此之后发出请求页面的资源是最新的。n如果没有应用程序缓存需要更新么，就会抛出异如果没有应用程序缓存需要更新么，就会抛出异常。常。n不管是不管是manifest文件还是它罗列的资源文件下载文件还是它罗列的资源文件下载失败，整个更新过程就终止了，浏览器会使用上失败，整个更新过程就终止了，浏览器会使用上一个最新缓存。一个最新缓存。14.3.4 监听事件监听事件n更新的过程会触发一系列事件。更新的过程会触发一系列事件

18、。n当浏览器发现网页定义有当浏览器发现网页定义有manifest属性，就会属性，就会发送事件给发送事件给window.applicationCache对象，对象，然后获取然后获取manifest文件。文件无变化表明客户文件。文件无变化表明客户端当前缓存是最新的，发送端当前缓存是最新的，发送noupdate事件给事件给window.applicationCache对象，更新过程对象，更新过程完成。完成。14.3.4 监听事件监听事件nmanifest文件变化，就会首先将清单中的文件文件变化，就会首先将清单中的文件下载到一个临时缓存，每一个要增加到临时缓下载到一个临时缓存，每一个要增加到临时缓存的

19、文件就会触发存的文件就会触发progress事件。如果有错事件。如果有错误发生，则会触发误发生，则会触发error事件，并且更新终止。事件，并且更新终止。n一旦所有文件被成功获取，这些文件就会自动一旦所有文件被成功获取，这些文件就会自动被移动到真正的离线缓存区，并触发被移动到真正的离线缓存区，并触发cached事件。事件。14.3.5 检测脱机模式检测脱机模式n可以使用可以使用window.navigator.onLine属性检测属性检测浏览器是否处于脱机模式，该属性是一个只读浏览器是否处于脱机模式，该属性是一个只读的逻辑值。的逻辑值。 document.write(“当前模式：”+(navigator.onLine?”在线”:”脱机”);n当用户在浏览器中选择脱机工作状态后，内容当用户在浏览器中选择脱机工作状态后，内容将从缓存进行读取。将从缓存进行读取。14.3.5 检测脱机模式检测脱机模式1. 事件n当用户由联机进入脱机状态后，就会触发当用户由联机进入脱机状态后，就会触发window对象的对象的offline事件，反之触发事件，反之触发online事件。可以使用下面事件。可以使用下面3种方式之一来声明事件：种方式之一来声明事件：（1）对）