HTML5+CSS3網(wǎng)頁設(shè)計基礎(chǔ)教程第8章-離線應(yīng)用程序

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

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

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

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

5、.2 HTML5離線應(yīng)用詳解8.3 applicationCache對象 8.4 緩存網(wǎng)站的首頁8.5 本章小結(jié) 第11頁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ù)器交互過程第12頁8.2.1 Web服務(wù)器配置本節(jié)主要以常用的Web服務(wù)器Apache和Python舉例進行配置。Apache:Python的配置:打開PYTHON_HOME/Lib/mimetypes.py文件并添加一行代碼：.manifest:text/cache-manifest manifest;第13頁8

6、.2.2 manifest文件結(jié)構(gòu)與含義manifest文件的用途是列出需要緩存的文件清單。manifest文件是一個文本文件，編碼格式必須為UTF-8。該文件沒有強制的后綴名，但習慣以manifest為后綴名。第14頁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頁8.2.3 搭建離線應(yīng)用程序創(chuàng)建好了cacheContent.manifest文件之后，下面在HTML文件中指定文檔的manifest屬性為cacheContent.manifest文件的路徑。這個manifest的文件路徑用絕對路徑和相對路徑都行，甚至可以引用其他服務(wù)

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

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

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