HTML5+CSS3网页设计基础教程第8章-离线应用程序课件

第1页第8章离线应用程序本章概述本章的学习目标主要内容第1页第8章离线应用程序本章概述第2页本章概述HTML5应用不需要始终保持与网络连接，目前主流浏览器的最新版本都提供了HTML5缓存技术的支持。HTML5提供了一个本地缓存使用的API——ApplicationCache，使用这个API，可以实现离线Web应用程序的开发。HTML5离线缓存的核心应用是：在用户没有与因特网连接时，依然能够访问站点或应用；当用户和因特网连接时，自动更新缓存数据。离线缓存包含了两部分内容：manifest缓存清单和JavaScript接口。其中，manifest缓存文件包含了一些需要缓存的资源清单；JavaScript接口提供了用于更新缓存文件的方法以及对缓存文件的操作。第2页本章概述HTML5应用不需要始终保持与网络连接，目前主第3页本章的学习目标掌握离线Web应用程序的基本概念；掌握manifest文件在离线缓存中的使用；掌握使用applicationCache对象来手动更新缓存的方法。第3页本章的学习目标掌握离线Web应用程序的基本概念；第4页主要内容8.1离线Web应用程序详解

8.2HTML5离线应用详解8.3applicationCache对象8.4缓存网站的首页8.5本章小结第4页主要内容8.1离线Web应用程序详解第5页8.1离线Web应用程序详解8.1.1本地缓存技术产生的原因8.1.2本地缓存概述8.1.3本地缓存与浏览器网页缓存的区别8.1.4浏览器支持检测第5页8.1离线Web应用程序详解8.1.1本地缓第6页8.1.1本地缓存技术产生的原因用户参与Web的需要间断性网络下Web应用的使用需要第6页8.1.1本地缓存技术产生的原因用户参与Web的需第7页8.1.2本地缓存概述HTML5的离线应用缓存使得在无网络链接状态下运行应用程序成为可能，这类应用程序用处很多，如起草电子邮件草稿时就不需要链接因特网。HTML5中引入的离线应用缓存，使得Web应用程序可以在没有网络连接的情况下运行。通过HTML5的本地缓存技术，开发人员可以直接控制应用程序缓存。利用缓存清单文件manifest可以将相关资源组织到同一个逻辑应用中，这样Web应用就拥有了本来只属于桌面应用的特性。第7页8.1.2本地缓存概述HTML5的离线应用缓存使得第8页8.1.3本地缓存与浏览器网页缓存的区别在没有HTML5的本地缓存之前，Web应用程序开发依赖的是网页缓存来实现离线使用。Web应用程序的本地缓存与浏览器的网页缓存在许多方面都存在着明显的区别。首先，本地缓存是为整个Web应用程序服务的，而浏览器的网页缓存只服务于单个网页。任何网页都具有网页缓存，而本地缓存只缓存那些你指定缓存的网页。其次，网页缓存也是不安全、不可靠的，因为我们不知道在网站中到底缓存了哪些网页，以及缓存了网页上的哪些资源。而本地缓存是可靠的第8页8.1.3本地缓存与浏览器网页缓存的区别在没有HT第9页8.1.4浏览器支持检测目前各大浏览器都支持HTML5离线应用。在使用离线应用API前，最好使用脚本先检测浏览器是否支持。检测方法如下：if(window.applicationCache){ //浏览器支持离线应用}else{ //浏览器不支持离线应用

}第9页8.1.4浏览器支持检测目前各大浏览器都支持HTM第10页主要内容8.1离线Web应用程序详解8.2HTML5离线应用详解8.3applicationCache对象8.4缓存网站的首页8.5本章小结第10页主要内容8.1离线Web应用程序详解第11页8.2HTML5离线应用详解8.2.1Web服务器配置8.2.2manifest文件结构与含义8.2.3搭建离线应用程序8.2.4离线应用中浏览器和服务器交互过程第11页8.2HTML5离线应用详解8.2.1We第12页8.2.1Web服务器配置本节主要以常用的Web服务器Apache和Python举例进行配置。Apache:Python的配置:打开PYTHON_HOME/Lib/mimetypes.py文件并添加一行代码：'.manifest':'text/cache-manifestmanifest';第12页8.2.1Web服务器配置本节主要以常用的Web第13页8.2.2manifest文件结构与含义manifest文件的用途是列出需要缓存的文件清单。manifest文件是一个文本文件，编码格式必须为UTF-8。该文件没有强制的后缀名，但习惯以manifest为后缀名。第13页8.2.2manifest文件结构与含义mani第14页8.2.2manifest文件结构与含义manifest文件:CACHEMANIFEST#version1.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.pngimgs/alipay-bank-cmb.png第14页8.2.2manifest文件结构与含义mani第15页8.2.3搭建离线应用程序创建好了cacheContent.manifest文件之后，下面在HTML文件中指定文档的manifest属性为cacheContent.manifest文件的路径。<htmlmanifest="cacheContent.manifest">……</html>这个manifest的文件路径用绝对路径和相对路径都行，甚至可以引用其他服务器上的manifest文件。该文件所对应的mime-type应该是text/cache-manifest，所以需要配置服务器来发送对应的MIME类型信息（前面已介绍配置）。第15页8.2.3搭建离线应用程序创建好了cacheCo第16页8.2.4离线应用中浏览器和服务器交互过程首次访问网站时的交互过程已有本地缓存的交互过程已有本地缓存但manifest文件已更新的交互过程第16页8.2.4离线应用中浏览器和服务器交互过程首次访第17页主要内容8.1离线Web应用程序详解8.2HTML5离线应用详解8.3applicationCache对象8.4缓存网站的首页8.5本章小结第17页主要内容8.1离线Web应用程序详解第18页8.3applicationCache对象8.3.1swapCache方法8.3.2applicationCache对象的事件第18页8.3applicationCache对象8.3第19页8.3.1swapCache方法swapCache方法用来手工执行本地缓存的更新，它只能在applicationCache对象的updateReady事件被触发时调用。updateReady事件只有在服务器上的manifest文件被更新，并且把manifest文件中所要求的资源文件下载到本地后触发。顾名思义，这个事件的含义是“本地缓存准备被更新”。当这个事件被触发后，可以用swapCache方法来手工进行本地缓存的更新。applicationCache.onupdateready=function(){ //本地缓存已被更新，通知用户

alert("正在更新本地缓存……"); applicationCache.swapCache(); alert("本地缓存已被更新，您可以按F5键刷新页面来得到最新内容"); };第19页8.3.1swapCache方法swapCach第20页8.3.2applicationCache对象的事件applicationCache对象除了具有update方法和swapCache方法外，还有一系列的事件:checking事件error事件downloading事件cached事件noupdate事件updateready事件第20页8.3.2applicationCache对象的第21页主要内容8.1离线Web应用程序详解8.2HTML5离线应用详解8.3applicationCache对象8.4缓存网站的首页8.5本章小结第21页主要内容8.1离线Web应用程序详解第22页8.4缓存网站的首页缓存网站的首页的操作过程如下：新建HTML5页面添加.htaccess支持创建manifest文件关联manifest文件到HTML5页面测试离线应用第22页8.4缓存网站的首页缓存网站的首页的操作过程如下第23页主要内容8.1离线Web应用程序详解8.2HTML5离线应用详解8.3applicationCache对象8.4缓存网站的首页8.5本章小结第23页主要内容8.1离线Web应用程序详解第24页8.5本章小结HTML5提供了一个本地缓存使用的API——ApplicationCache，使用这个API，可以实现离线Web应用程序的开发。HTML5离线缓存的核心应用是：在用户没有与因特网连接时，依然能够访问站点或应用；当用户和因特网连接时，自动更新缓存数据。离线缓存包含了两部分内容：manifest缓存清单和JavaScript接口。其中，manifest缓存文件包含了一些需要缓存的资源清单；JavaScript接口提供了用于更新缓存文件的方法以及对缓存文件的操作。第24页8.5本章小结HTML5提供了一个本地缓存使用第25页第8章离线应用程序本章概述本章的学习目标主要内容第1页第8章离线应用程序本章概述第26页本章概述HTML5应用不需要始终保持与网络连接，目前主流浏览器的最新版本都提供了HTML5缓存技术的支持。HTML5提供了一个本地缓存使用的API——ApplicationCache，使用这个API，可以实现离线Web应用程序的开发。HTML5离线缓存的核心应用是：在用户没有与因特网连接时，依然能够访问站点或应用；当用户和因特网连接时，自动更新缓存数据。离线缓存包含了两部分内容：manifest缓存清单和JavaScript接口。其中，manifest缓存文件包含了一些需要缓存的资源清单；JavaScript接口提供了用于更新缓存文件的方法以及对缓存文件的操作。第2页本章概述HTML5应用不需要始终保持与网络连接，目前主第27页本章的学习目标掌握离线Web应用程序的基本概念；掌握manifest文件在离线缓存中的使用；掌握使用applicationCache对象来手动更新缓存的方法。第3页本章的学习目标掌握离线Web应用程序的基本概念；第28页主要内容8.1离线Web应用程序详解

8.2HTML5离线应用详解8.3applicationCache对象8.4缓存网站的首页8.5本章小结第4页主要内容8.1离线Web应用程序详解第29页8.1离线Web应用程序详解8.1.1本地缓存技术产生的原因8.1.2本地缓存概述8.1.3本地缓存与浏览器网页缓存的区别8.1.4浏览器支持检测第5页8.1离线Web应用程序详解8.1.1本地缓第30页8.1.1本地缓存技术产生的原因用户参与Web的需要间断性网络下Web应用的使用需要第6页8.1.1本地缓存技术产生的原因用户参与Web的需第31页8.1.2本地缓存概述HTML5的离线应用缓存使得在无网络链接状态下运行应用程序成为可能，这类应用程序用处很多，如起草电子邮件草稿时就不需要链接因特网。HTML5中引入的离线应用缓存，使得Web应用程序可以在没有网络连接的情况下运行。通过HTML5的本地缓存技术，开发人员可以直接控制应用程序缓存。利用缓存清单文件manifest可以将相关资源组织到同一个逻辑应用中，这样Web应用就拥有了本来只属于桌面应用的特性。第7页8.1.2本地缓存概述HTML5的离线应用缓存使得第32页8.1.3本地缓存与浏览器网页缓存的区别在没有HTML5的本地缓存之前，Web应用程序开发依赖的是网页缓存来实现离线使用。Web应用程序的本地缓存与浏览器的网页缓存在许多方面都存在着明显的区别。首先，本地缓存是为整个Web应用程序服务的，而浏览器的网页缓存只服务于单个网页。任何网页都具有网页缓存，而本地缓存只缓存那些你指定缓存的网页。其次，网页缓存也是不安全、不可靠的，因为我们不知道在网站中到底缓存了哪些网页，以及缓存了网页上的哪些资源。而本地缓存是可靠的第8页8.1.3本地缓存与浏览器网页缓存的区别在没有HT第33页8.1.4浏览器支持检测目前各大浏览器都支持HTML5离线应用。在使用离线应用API前，最好使用脚本先检测浏览器是否支持。检测方法如下：if(window.applicationCache){ //浏览器支持离线应用}else{ //浏览器不支持离线应用

}第9页8.1.4浏览器支持检测目前各大浏览器都支持HTM第34页主要内容8.1离线Web应用程序详解8.2HTML5离线应用详解8.3applicationCache对象8.4缓存网站的首页8.5本章小结第10页主要内容8.1离线Web应用程序详解第35页8.2HTML5离线应用详解8.2.1Web服务器配置8.2.2manifest文件结构与含义8.2.3搭建离线应用程序8.2.4离线应用中浏览器和服务器交互过程第11页8.2HTML5离线应用详解8.2.1We第36页8.2.1Web服务器配置本节主要以常用的Web服务器Apache和Python举例进行配置。Apache:Python的配置:打开PYTHON_HOME/Lib/mimetypes.py文件并添加一行代码：'.manifest':'text/cache-manifestmanifest';第12页8.2.1Web服务器配置本节主要以常用的Web第37页8.2.2manifest文件结构与含义manifest文件的用途是列出需要缓存的文件清单。manifest文件是一个文本文件，编码格式必须为UTF-8。该文件没有强制的后缀名，但习惯以manifest为后缀名。第13页8.2.2manifest文件结构与含义mani第38页8.2.2manifest文件结构与含义manifest文件:CACHEMANIFEST#version1.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.pngimgs/alipay-bank-cmb.png第14页8.2.2manifest文件结构与含义mani第39页8.2.3搭建离线应用程序创建好了cacheContent.manifest文件之后，下面在HTML文件中指定文档的manifest属性为cacheContent.manifest文件的路径。<htmlmanifest="cacheContent.manifest">……</html>这个manifest的文件路径用绝对路径和相对路径都行，甚至可以引用其他服务器上的manifest文件。该文件所对应的mime-type应该是text/cache-manifest，所以需要配置服务器来发送对应的MIME类型信息（前面已介绍配置）。第15页8.2.3搭建离线应用程序创建好了cacheCo第40页8.2.4离线应用中浏览器和服务器交互过程首次访问网站时的交互过程已有本地缓存的交互过程已有本地缓存但manifest文件已更新的交互过程第16页8.2.4离线应用中浏览器和服务器交互过程首次访第41页主要内容8.1离线Web应用程序详解8.2HTML5离线应用详解8.3applicationCache对象8.4缓存网站的首页8.5本章小结第17页主要内容8.1离线Web应用程序详解第42页8.3applicationCache对象8.3.1swapCache方法8.3.2applicationCache对象的事件第18页8.3applicationCache对象8.3第43页8.3.1swapCache方法swapCache方法用来手工执行本地缓存的更新，它只能在applicationCache对象的updateReady事件被触发时调用。updateReady事件只有在服务器上的manifest文件被更新，并且把manifest文件中所要求的资源文件下载到本地后触发。顾名思义，这个事件的含义是“本地缓存准备被更新”。当这个事件被触发后，可以用swapCache方法来手工进行本地缓存的更新。applicationCache.onupdateready=function(){ //本地缓存已被更新，通知用户

alert("正在更新本地缓存……"); applicationCache.swapCache(); alert("本地缓存已被更新，您可以按F5键刷新页面来得到最新内容"); }