离线应用程序PPT演示课件

第1页,第1页,第8章 离线应用程序,本章概述 本章的学习目标主要内容,第2页,第2页,本章概述,HTML5应用不需要始终保持与网络连接，目前主流浏览器的最新版本都提供了HTML5缓存技术的支持。HTML5提供了一个本地缓存使用的APIApplicationCache，使用这个API，可以实现离线Web应用程序的开发。HTML5离线缓存的核心应用是：在用户没有与因特网连接时，依然能够访问站点或应用；当用户和因特网连接时，自动更新缓存数据。离线缓存包含了两部分内容：manifest缓存清单和JavaScript接口。其中，manifest缓存文件包含了一些需要缓存的资源清单；JavaScript接口提供了用于更新缓存文件的方法以及对缓存文件的操作。,第3页,第3页,本章的学习目标,掌握离线Web应用程序的基本概念；掌握manifest文件在离线缓存中的使用；掌握使用applicationCache对象来手动更新缓存的方法。,第4页,第4页,主要内容,8.1 离线Web应用程序详解 8.2 HTML5离线应用详解8.3 applicationCache对象 8.4 缓存网站的首页8.5 本章小结,第5页,第5页,8.1 离线Web应用程序详解,8.1.1 本地缓存技术产生的原因8.1.2 本地缓存概述8.1.3 本地缓存与浏览器网页缓存的区别8.1.4 浏览器支持检测,第6页,第6页,8.1.1 本地缓存技术产生的原因,用户参与Web的需要间断性网络下Web应用的使用需要,第7页,第7页,8.1.2 本地缓存概述,HTML5的离线应用缓存使得在无网络链接状态下运行应用程序成为可能，这类应用程序用处很多，如起草电子邮件草稿时就不需要链接因特网。HTML5中引入的离线应用缓存，使得Web应用程序可以在没有网络连接的情况下运行。通过HTML5的本地缓存技术，开发人员可以直接控制应用程序缓存。利用缓存清单文件manifest可以将相关资源组织到同一个逻辑应用中，这样Web应用就拥有了本来只属于桌面应用的特性。,第8页,第8页,8.1.3 本地缓存与浏览器网页缓存的区别,在没有HTML5的本地缓存之前，Web应用程序开发依赖的是网页缓存来实现离线使用。Web应用程序的本地缓存与浏览器的网页缓存在许多方面都存在着明显的区别。首先，本地缓存是为整个Web应用程序服务的，而浏览器的网页缓存只服务于单个网页。任何网页都具有网页缓存，而本地缓存只缓存那些你指定缓存的网页。其次，网页缓存也是不安全、不可靠的，因为我们不知道在网站中到底缓存了哪些网页，以及缓存了网页上的哪些资源。而本地缓存是可靠的,第9页,第9页,8.1.4 浏览器支持检测,目前各大浏览器都支持HTML5离线应用。在使用离线应用API前，最好使用脚本先检测浏览器是否支持。检测方法如下：if(window.applicationCache)/浏览器支持离线应用else/浏览器不支持离线应用,第10页,第10页,主要内容,8.1 离线Web应用程序详解 8.2 HTML5离线应用详解8.3 applicationCache对象 8.4 缓存网站的首页8.5 本章小结,第11页,第11页,8.2 HTML5离线应用详解,8.2.1 Web服务器配置8.2.2 manifest文件结构与含义8.2.3 搭建离线应用程序8.2.4 离线应用中浏览器和服务器交互过程,第12页,第12页,8.2.1 Web服务器配置,本节主要以常用的Web服务器Apache和Python举例进行配置。Apache:Python的配置:打开PYTHON_HOME/Lib/mimetypes.py文件并添加一行代码：.manifest:text/cache-manifest manifest;,第13页,第13页,8.2.2 manifest文件结构与含义,manifest文件的用途是列出需要缓存的文件清单。manifest文件是一个文本文件，编码格式必须为UTF-8。该文件没有强制的后缀名，但习惯以manifest为后缀名。,第14页,第14页,8.2.2 manifest文件结构与含义,manifest文件:CACHE MANIFEST#version 1.0login.htmlregister.htmlfindpwd.htmlcss/style.cssimgs/alipay-i-logo-big.pngimgs/alipay-i-icons.pngjs/mui-min.jsCACHEindex.htmlhome.cssimgs/logo.pngjs/main.jsNETWORK:imgs/button-ok.pngimgs/button-cancle.pngCACHE:imgs/login-slider-bg.pngFALLBACK:imgs/alipay-bank-icbc.png imgs/alipay-bank-cmb.png,第15页,第15页,8.2.3 搭建离线应用程序,创建好了cacheContent.manifest文件之后，下面在HTML文件中指定文档的manifest属性为cacheContent.manifest文件的路径。这个manifest的文件路径用绝对路径和相对路径都行，甚至可以引用其他服务器上的manifest文件。该文件所对应的mime-type应该是text/cache-manifest，所以需要配置服务器来发送对应的MIME类型信息（前面已介绍配置）。,第16页,第16页,8.2.4 离线应用中浏览器和服务器交互过程,首次访问网站时的交互过程已有本地缓存的交互过程已有本地缓存但manifest文件已更新的交互过程,第17页,第17页,主要内容,8.1 离线Web应用程序详解 8.2 HTML5离线应用详解8.3 applicationCache对象 8.4 缓存网站的首页8.5 本章小结,第18页,第18页,8.3 applicationCache对象,8.3.1 swapCache方法8.3.2 applicationCache对象的事件,第19页,第19页,8.3.1 swapCache方法,swapCache方法用来手工执行本地缓存的更新，它只能在applicationCache对象的updateReady事件被触发时调用。updateReady事件只有在服务器上的manifest文件被更新，并且把manifest文件中所要求的资源文件下载到本地后触发。顾名思义，这个事件的含义是“本地缓存准备被更新”。当这个事件被触发后，可以用swapCache方法来手工进行本地缓存的更新。applicationCache.onupdateready = function()/本地缓存已被更新，通知用户alert(正在更新本地缓存);applicationCache.swapCache();alert(本地缓存已被更新，您可以按F5键刷新页面来得到最新内容);,第20页,第20页,8.3.2 applicationCache对象的事件,applicationCache对象除了具有update方法和swapCache方法外，还有一系列的事件:checking事件error事件downloading事件cached事件noupdate事件updateready事件,第21页,第21页,主要内容,8.1 离线Web应用程序详解 8.2 HTML5离线应用详解8.3 applicationCache对象 8.4 缓存网站的首页8.5 本章小结,第22页,第22页,8.4 缓存网站的首页,缓存网站的首页的操作过程如下：新建HTML5页面添加.htaccess支持创建manifest文件关联manifest文件到HTML5页面测试离线应用,第23页,第23页,主要内容,8.1 离线Web应用程序详解 8.2 HTML5离线应用详解8.3 applicationCache对象 8.4 缓存网站的首页8.5 本章小结,第24页,第24页,8.5 本章小结,HTML5提供了一个本地缓存使用的APIApplicationCache，使用这个API，可以实现离线