第4讲-HTML5离线Web应用—缓存技术重点.ppt

纲 要 HTML5离线Web应用概述 HTML5离线Web应用的API HTML5离线Web应用的应用 ApplicationCache对象和事件 课堂练习 检测本地缓存的更新状态 检测在线状态 综合应用 课后练习 HTML5离线Web应用概述 Web应用的资源都存储在Web服务器上，如果无法连接网络，或者Web服务器不在线，那么传统的Web应用程序就无法运行了。 目前基于Web的应用越来越复杂，网页缓存就成为提升访问Web速度的最佳方法之一。但是在移动Web应用中，由于Web应用程序的便携性以及网络性能等原因，网页缓存对于移动Web应用的实际效果影响不大。而且页面缓存仍然需要依靠互联网的存在，没有网络，页面缓存也就无法读取缓存中的文件资源。 HTML5中新增加了本地缓存，也就是HTML5离线Web应用。它能够解决在网络离线状态下，如何正常读取和访问Web上的文件资源。 HTML5离线Web应用概述 离线应用，就是在没有网络的情况下访问Web应用程序，实际上是访问已下载的离线文件资源，并使用Web应用程序正常运行。 浏览器页面缓存与本地缓存的主要区别如下： 浏览器网页缓存主要是为了加快网页加载的速度，所以会对每一个打开的网页进行缓存操作，而本地缓存是为整个Web应用程序服务的，只缓存那些指定缓存的网页。 在网络连接的情况下，浏览器网页缓存一个页面的所有文件，但是一旦离线，用户单击链接时，将会得到一个错误消息。而本地缓存，仍然可以正常访问。 对于网页浏览者而言，浏览器网页缓存了哪些内容和资源，这些内容是否安全可靠等都不知道，而本地缓存的页面，是编程人员指定的内容，所以安全方面相对可靠了许多。 HTML5离线Web应用概述 离线Web应用程序可以在无法连接Web服务器时运行，其工作原理如下： 当访问一个支持离线Web应用程序的网站时，该网站将会告诉浏览器离线Web应用程序所使用的所有文件。 浏览器将Web应用程序所使用的所有文件下载到本地。 当支持离线Web应用程序的网站不在线时，浏览器就会访问下载到本地的文件，从而运行离线Web应用程序。 例如在离线Web应用程序中，用户可以在不连接Web服务器的情况下，编辑一个较长的文章，并将其保存在本地，待下次连接Web服务器时再提交文章。 HTML5离线Web应用概述 离线Web应用程序的 　主要组件如右图。 　Manifest是一个文件 　其中包含离线Web应用 　程序的部署组件描述符， 　也就是需要加载的所有 　文件列表。 HTML5离线Web应用概述 开发离线Web应用程序通常需要完成的下面几项工作： 离线资源缓存 检测在线状态 本地数据存储 HTML5离线Web应用的API 检查浏览器的支持情况 使用离线Web应用API前，最好先检查浏览器是否支持它。 使用if(windows.applicationcache)可检测浏览器是否支持离线应用。 使用window.navigator对象的属性对在线状态进行监测。 HTML5离线Web应用的API HTML5离线Web应用的API manifest文件 要使用Application Cache API开发离线Web应用程序，就需要创建一个Cache Manifest，用于指定需要缓存的文件列表。 一个Manifest文件的例子 CACHE MANIFEST //Manifest文件的开始 version 1.0 //定义版本，更新时只需修改版本号 CACHE: //指定需要缓存的文件 01. png test.js test.css NETWORK:　　//指定只有通过联网才能浏览的文件 *　　　　　　 //代表除了在CACHE中的文件，所有其他文件都需要联网　　 FALLBACK　　 //每行分别指定在线和离线时使用的文件 online.html offline.html HTML5离线Web应用的API 如果需要在网页中引用manifest文件，使用缓存文件，就需要在HTML标签中定义manifest属性。例如： 　　　　HTML lang=“en” manifest=“test.manifest” 即在访问网面时，按照test.manifest文件中指定的文件列表进行缓存。在Web服务器上也需要配置对Manifest文件的支持。例如在Apache中需要编辑con\mine.types，增加如下内容：text/cache-manifest manifest 　如若使用tomcat服务器，则在web.xml文件中添加配置 保存后需要重启Apache服务。 HTML5离线Web