1、第1頁(yè)第8章 離線應(yīng)用程序本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁(yè)本章概述HTML5應(yīng)用不需要始終保持與網(wǎng)絡(luò)連接，目前主流瀏覽器的最新版本都提供了HTML5緩存技術(shù)的支持。HTML5提供了一個(gè)本地緩存使用的APIApplicationCache，使用這個(gè)API，可以實(shí)現(xiàn)離線Web應(yīng)用程序的開發(fā)。HTML5離線緩存的核心應(yīng)用是：在用戶沒(méi)有與因特網(wǎng)連接時(shí)，依然能夠訪問(wèn)站點(diǎn)或應(yīng)用；當(dāng)用戶和因特網(wǎng)連接時(shí)，自動(dòng)更新緩存數(shù)據(jù)。離線緩存包含了兩部分內(nèi)容：manifest緩存清單和JavaScript接口。其中，manifest緩存文件包含了一些需要緩存的資源清單；JavaScript接口提供了用于更新緩存文件

2、的方法以及對(duì)緩存文件的操作。第3頁(yè)本章的學(xué)習(xí)目標(biāo)掌握離線Web應(yīng)用程序的基本概念；掌握manifest文件在離線緩存中的使用；掌握使用applicationCache對(duì)象來(lái)手動(dòng)更新緩存的方法。第4頁(yè)主要內(nèi)容8.1 離線Web應(yīng)用程序詳解 8.2 HTML5離線應(yīng)用詳解8.3 applicationCache對(duì)象 8.4 緩存網(wǎng)站的首頁(yè)8.5 本章小結(jié) 第5頁(yè)8.1 離線Web應(yīng)用程序詳解 8.1.1 本地緩存技術(shù)產(chǎn)生的原因8.1.2 本地緩存概述8.1.3 本地緩存與瀏覽器網(wǎng)頁(yè)緩存的區(qū)別8.1.4 瀏覽器支持檢測(cè)第6頁(yè)8.1.1 本地緩存技術(shù)產(chǎn)生的原因用戶參與Web的需要間斷性網(wǎng)絡(luò)下Web應(yīng)用

3、的使用需要第7頁(yè)8.1.2 本地緩存概述HTML5的離線應(yīng)用緩存使得在無(wú)網(wǎng)絡(luò)鏈接狀態(tài)下運(yùn)行應(yīng)用程序成為可能，這類應(yīng)用程序用處很多，如起草電子郵件草稿時(shí)就不需要鏈接因特網(wǎng)。HTML5中引入的離線應(yīng)用緩存，使得Web應(yīng)用程序可以在沒(méi)有網(wǎng)絡(luò)連接的情況下運(yùn)行。通過(guò)HTML5的本地緩存技術(shù)，開發(fā)人員可以直接控制應(yīng)用程序緩存。利用緩存清單文件manifest可以將相關(guān)資源組織到同一個(gè)邏輯應(yīng)用中，這樣Web應(yīng)用就擁有了本來(lái)只屬于桌面應(yīng)用的特性。第8頁(yè)8.1.3 本地緩存與瀏覽器網(wǎng)頁(yè)緩存的區(qū)別在沒(méi)有HTML5的本地緩存之前，Web應(yīng)用程序開發(fā)依賴的是網(wǎng)頁(yè)緩存來(lái)實(shí)現(xiàn)離線使用。Web應(yīng)用程序的本地緩存與瀏覽器的網(wǎng)

4、頁(yè)緩存在許多方面都存在著明顯的區(qū)別。首先，本地緩存是為整個(gè)Web應(yīng)用程序服務(wù)的，而瀏覽器的網(wǎng)頁(yè)緩存只服務(wù)于單個(gè)網(wǎng)頁(yè)。任何網(wǎng)頁(yè)都具有網(wǎng)頁(yè)緩存，而本地緩存只緩存那些你指定緩存的網(wǎng)頁(yè)。其次，網(wǎng)頁(yè)緩存也是不安全、不可靠的，因?yàn)槲覀儾恢涝诰W(wǎng)站中到底緩存了哪些網(wǎng)頁(yè)，以及緩存了網(wǎng)頁(yè)上的哪些資源。而本地緩存是可靠的第9頁(yè)8.1.4 瀏覽器支持檢測(cè)目前各大瀏覽器都支持HTML5離線應(yīng)用。在使用離線應(yīng)用API前，最好使用腳本先檢測(cè)瀏覽器是否支持。檢測(cè)方法如下：if(window.applicationCache)/瀏覽器支持離線應(yīng)用else/瀏覽器不支持離線應(yīng)用第10頁(yè)主要內(nèi)容8.1 離線Web應(yīng)用程序詳解 8

5、.2 HTML5離線應(yīng)用詳解8.3 applicationCache對(duì)象 8.4 緩存網(wǎng)站的首頁(yè)8.5 本章小結(jié) 第11頁(yè)8.2 HTML5離線應(yīng)用詳解8.2.1 Web服務(wù)器配置8.2.2 manifest文件結(jié)構(gòu)與含義8.2.3 搭建離線應(yīng)用程序8.2.4 離線應(yīng)用中瀏覽器和服務(wù)器交互過(guò)程第12頁(yè)8.2.1 Web服務(wù)器配置本節(jié)主要以常用的Web服務(wù)器Apache和Python舉例進(jìn)行配置。Apache:Python的配置:打開PYTHON_HOME/Lib/mimetypes.py文件并添加一行代碼：.manifest:text/cache-manifest manifest;第13頁(yè)8

6、.2.2 manifest文件結(jié)構(gòu)與含義manifest文件的用途是列出需要緩存的文件清單。manifest文件是一個(gè)文本文件，編碼格式必須為UTF-8。該文件沒(méi)有強(qiáng)制的后綴名，但習(xí)慣以manifest為后綴名。第14頁(yè)8.2.2 manifest文件結(jié)構(gòu)與含義manifest文件:CACHE MANIFEST#version 1.0login.htmlregister.htmlfindpwd.htmlcss/style.cssimgs/alipay-i-logo-big.pngimgs/alipay-i-icons.pngjs/mui-min.jsCACHEindex.htmlhome.cs

7、simgs/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頁(yè)8.2.3 搭建離線應(yīng)用程序創(chuàng)建好了cacheContent.manifest文件之后，下面在HTML文件中指定文檔的manifest屬性為cacheContent.manifest文件的路徑。這個(gè)manifest的文件路徑用絕對(duì)路徑和相對(duì)路徑都行，甚至可以引用其他服務(wù)

8、器上的manifest文件。該文件所對(duì)應(yīng)的mime-type應(yīng)該是text/cache-manifest，所以需要配置服務(wù)器來(lái)發(fā)送對(duì)應(yīng)的MIME類型信息（前面已介紹配置）。第16頁(yè)8.2.4 離線應(yīng)用中瀏覽器和服務(wù)器交互過(guò)程首次訪問(wèn)網(wǎng)站時(shí)的交互過(guò)程已有本地緩存的交互過(guò)程已有本地緩存但manifest文件已更新的交互過(guò)程第17頁(yè)主要內(nèi)容8.1 離線Web應(yīng)用程序詳解 8.2 HTML5離線應(yīng)用詳解8.3 applicationCache對(duì)象 8.4 緩存網(wǎng)站的首頁(yè)8.5 本章小結(jié) 第18頁(yè)8.3 applicationCache對(duì)象8.3.1 swapCache方法8.3.2 applicati

9、onCache對(duì)象的事件第19頁(yè)8.3.1 swapCache方法swapCache方法用來(lái)手工執(zhí)行本地緩存的更新，它只能在applicationCache對(duì)象的updateReady事件被觸發(fā)時(shí)調(diào)用。updateReady事件只有在服務(wù)器上的manifest文件被更新，并且把manifest文件中所要求的資源文件下載到本地后觸發(fā)。顧名思義，這個(gè)事件的含義是“本地緩存準(zhǔn)備被更新”。當(dāng)這個(gè)事件被觸發(fā)后，可以用swapCache方法來(lái)手工進(jìn)行本地緩存的更新。applicationCache.onupdateready = function()/本地緩存已被更新，通知用戶alert(正在更新本地緩存

10、);applicationCache.swapCache();alert(本地緩存已被更新，您可以按F5鍵刷新頁(yè)面來(lái)得到最新內(nèi)容);第20頁(yè)8.3.2 applicationCache對(duì)象的事件applicationCache對(duì)象除了具有update方法和swapCache方法外，還有一系列的事件:checking事件error事件downloading事件cached事件noupdate事件updateready事件第21頁(yè)主要內(nèi)容8.1 離線Web應(yīng)用程序詳解 8.2 HTML5離線應(yīng)用詳解8.3 applicationCache對(duì)象 8.4 緩存網(wǎng)站的首頁(yè)8.5 本章小結(jié) 第22頁(yè)8.4 緩存網(wǎng)站的首頁(yè)緩存網(wǎng)站的首頁(yè)的操作過(guò)程如下：新建HTML5頁(yè)面添加.htaccess支持創(chuàng)建manifest文件關(guān)聯(lián)manifest文件到HTML5頁(yè)面測(cè)試離線應(yīng)用第23頁(yè)主要內(nèi)容8.1 離線Web應(yīng)用程序詳解 8.2 HTML5離線應(yīng)用詳解8.3 applicationCache對(duì)象 8.4 緩存網(wǎng)站的首頁(yè)8.5 本章小結(jié) 第24頁(yè)8.5 本章小結(jié) HTML5提供了一個(gè)本地緩存使用的APIApplicationCache，使用這個(gè)API，可以實(shí)現(xiàn)離線Web應(yīng)用程序的