第14章 離線網(wǎng)絡(luò)應(yīng)用程序——文件緩存

1、第14章 離線網(wǎng)絡(luò)應(yīng)用程序文件緩存什么是應(yīng)用程序緩存（什么是應(yīng)用程序緩存（Application Cache）？）？nRIA的一個(gè)關(guān)鍵是能夠?qū)崿F(xiàn)網(wǎng)絡(luò)應(yīng)用程序在離的一個(gè)關(guān)鍵是能夠?qū)崿F(xiàn)網(wǎng)絡(luò)應(yīng)用程序在離線狀態(tài)下也能應(yīng)用。線狀態(tài)下也能應(yīng)用。n包括本地存儲、包括本地存儲、Web SQL Database，已經(jīng)實(shí)，已經(jīng)實(shí)現(xiàn)了離線數(shù)據(jù)存儲。但要實(shí)現(xiàn)離線現(xiàn)了離線數(shù)據(jù)存儲。但要實(shí)現(xiàn)離線RIA應(yīng)用，應(yīng)用，還需要業(yè)務(wù)邏輯能夠離線運(yùn)行，必須使用還需要業(yè)務(wù)邏輯能夠離線運(yùn)行，必須使用Application Cache。nHTML5 引入了應(yīng)用程序緩存，這意味著引入了應(yīng)用程序緩存，這意味著 web 應(yīng)用可進(jìn)行緩存，并可在沒

2、有因特網(wǎng)連接時(shí)進(jìn)應(yīng)用可進(jìn)行緩存，并可在沒有因特網(wǎng)連接時(shí)進(jìn)行訪問。行訪問。什么是應(yīng)用程序緩存（什么是應(yīng)用程序緩存（Application Cache）？）？ n通過創(chuàng)建通過創(chuàng)建 cache manifest 文件，可以輕松地文件，可以輕松地創(chuàng)建創(chuàng)建 web 應(yīng)用的離線版本。應(yīng)用的離線版本。n應(yīng)用程序緩存為應(yīng)用帶來三個(gè)優(yōu)勢：應(yīng)用程序緩存為應(yīng)用帶來三個(gè)優(yōu)勢：q離線瀏覽離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們用戶可在應(yīng)用離線時(shí)使用它們 q速度速度 - 已緩存資源加載得更快已緩存資源加載得更快 q減少服務(wù)器負(fù)載減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過瀏覽器將只從服務(wù)器下載更新過或更改過的資源?；?/p>

3、更改過的資源。n所有主流瀏覽器均支持應(yīng)用程序緩存，除了所有主流瀏覽器均支持應(yīng)用程序緩存，除了 Internet Explorer。 14.1 使用離線應(yīng)用使用離線應(yīng)用n要實(shí)現(xiàn)文件緩存在客戶端，可以使用根節(jié)點(diǎn)要實(shí)現(xiàn)文件緩存在客戶端，可以使用根節(jié)點(diǎn)html元素的元素的manifest屬性，該屬性引用一個(gè)屬性，該屬性引用一個(gè)清單文件。清單文件。n它是文本文件，使用它是文本文件，使用UTF-8編碼，列出了離線編碼，列出了離線訪問應(yīng)用時(shí)所需緩存的文件清單。并且網(wǎng)頁一訪問應(yīng)用時(shí)所需緩存的文件清單。并且網(wǎng)頁一旦定義了旦定義了html元素的元素的manifest屬性，那么該屬性，那么該網(wǎng)頁也會(huì)被緩存。網(wǎng)頁也會(huì)

4、被緩存。14.1 使用離線應(yīng)用使用離線應(yīng)用nmanifest屬性值定義的是一個(gè)文件路徑，可以屬性值定義的是一個(gè)文件路徑，可以使用絕對或相對路徑，甚至可以引用其他服務(wù)使用絕對或相對路徑，甚至可以引用其他服務(wù)器上的器上的manifest文件。文件。n該文件所對應(yīng)的該文件所對應(yīng)的MIME類型應(yīng)該是類型應(yīng)該是text/cache-manifest，所以需要配置服務(wù)器來發(fā)送對應(yīng)的，所以需要配置服務(wù)器來發(fā)送對應(yīng)的MIME類型信息。類型信息。14.1.1 配置配置MIME類型類型nWindows 7系統(tǒng)上的系統(tǒng)上的IIS是一個(gè)是一個(gè)Web服務(wù)器，服務(wù)器，可以使用它來定義可以使用它來定義manifest文件的

5、文件的MIME類型。類型。n雙擊打開雙擊打開IIS服務(wù)器管理器，雙擊服務(wù)器管理器，雙擊MIME類型選類型選擇添加，完成設(shè)置即可。擇添加，完成設(shè)置即可。14.1.2 創(chuàng)建離線應(yīng)用網(wǎng)頁及網(wǎng)頁中要?jiǎng)?chuàng)建離線應(yīng)用網(wǎng)頁及網(wǎng)頁中要引用的資源引用的資源n第二步是創(chuàng)建一個(gè)網(wǎng)頁，并創(chuàng)建網(wǎng)頁中要引用第二步是創(chuàng)建一個(gè)網(wǎng)頁，并創(chuàng)建網(wǎng)頁中要引用的資源，包括圖片文件、的資源，包括圖片文件、CSS文件、文件、JS文件文件等。等。14.1.3 創(chuàng)建清單文件創(chuàng)建清單文件nhtml元素的元素的manifest屬性指明的清單文件屬性指明的清單文件browser.manifest ，下面創(chuàng)建它：，下面創(chuàng)建它：CACHE MANIFES

6、TCHACHE;sample.htmlbrowser.cssbrowser.jsimages/icon_ff.pngimages/icon_cn.pngimages/icon_ie.pngimages/icon_op.pngimages/icon_sa.png14.1.4 測試離線應(yīng)用測試離線應(yīng)用n在瀏覽器中請求網(wǎng)頁，即使拔出網(wǎng)頁，設(shè)置為在瀏覽器中請求網(wǎng)頁，即使拔出網(wǎng)頁，設(shè)置為脫機(jī)工作后，仍可以執(zhí)行其中的業(yè)務(wù)邏輯，不脫機(jī)工作后，仍可以執(zhí)行其中的業(yè)務(wù)邏輯，不會(huì)影響網(wǎng)頁運(yùn)行。會(huì)影響網(wǎng)頁運(yùn)行。14.1.5 更新離線存儲更新離線存儲n要更新離線存儲文件必須更新要更新離線存儲文件必須更新manifest

7、文件，文件，否則即使存儲文件發(fā)生了變化也不會(huì)起作用。否則即使存儲文件發(fā)生了變化也不會(huì)起作用。n例如變更了例如變更了CSS文件修改了呈現(xiàn)內(nèi)容，但不更文件修改了呈現(xiàn)內(nèi)容，但不更改改manifest文件，新內(nèi)容根本不會(huì)應(yīng)用到網(wǎng)頁。文件，新內(nèi)容根本不會(huì)應(yīng)用到網(wǎng)頁。n使用瀏覽器的使用瀏覽器的“清除瀏覽數(shù)據(jù)清除瀏覽數(shù)據(jù)”功能可清除功能可清除manifest文件，導(dǎo)致重新下載該文件也可以實(shí)文件，導(dǎo)致重新下載該文件也可以實(shí)現(xiàn)重建離線存儲?，F(xiàn)重建離線存儲。n使用使用window.applicationCache對象控制更新。對象控制更新。14.2 緩存清單文件格式緩存清單文件格式n第一行是必須的，第一行是必須的

8、，用于聲明該文件時(shí)用于聲明該文件時(shí)一個(gè)緩存請當(dāng)文件。一個(gè)緩存請當(dāng)文件。n下面下面3個(gè)關(guān)鍵字代表個(gè)關(guān)鍵字代表3個(gè)功能段，后兩個(gè)個(gè)功能段，后兩個(gè)是可選的。是可選的。CACHE MANIFESTCACHE:NETWORK:FALLBACK:14.2.1 定義要緩存的文件定義要緩存的文件n要緩存的文件用要緩存的文件用CACHE: 關(guān)鍵字聲明，也可關(guān)鍵字聲明，也可以不用關(guān)鍵字直接寫在緊跟聲明后。以不用關(guān)鍵字直接寫在緊跟聲明后。n如果包含其他兩個(gè)字段，就必須用關(guān)鍵字如果包含其他兩個(gè)字段，就必須用關(guān)鍵字CACHE。14.2.2 備抵機(jī)制備抵機(jī)制nFALLBACK: 用于定義不能獲取指定文件時(shí)的用于定義不能獲

9、取指定文件時(shí)的備抵機(jī)制，它定義一個(gè)重定向文件，當(dāng)無法訪備抵機(jī)制，它定義一個(gè)重定向文件，當(dāng)無法訪問一個(gè)文件時(shí)就重定向到另一個(gè)文件。問一個(gè)文件時(shí)就重定向到另一個(gè)文件。n每一行包括兩個(gè)每一行包括兩個(gè)URI，第一個(gè)是資源文件，第一個(gè)是資源文件URI，第二個(gè)是回調(diào)頁面第二個(gè)是回調(diào)頁面URI。FALLBACK:/index.php/ 404.html/login.php/ 404.html14.2.2 備抵機(jī)制備抵機(jī)制n下面的清單代碼表示如果用戶離線，將所有文下面的清單代碼表示如果用戶離線，將所有文件重定向到件重定向到404.html代替。代替。FALLBACK:/ / 404.html14.2.3 在線

10、白名單在線白名單nNETWORK: 段定義一個(gè)白名單，其中的文件段定義一個(gè)白名單，其中的文件都是必須訪問網(wǎng)絡(luò)的。都是必須訪問網(wǎng)絡(luò)的。n該段中可以使用通配符該段中可以使用通配符*表示所有資源。表示所有資源。CACHE MANIFESTFALLBACK:/ / 404.htmlNETWORK:*14.2.4 注釋注釋n緩存清單使用緩存清單使用#作為注釋聲明符，作為注釋聲明符，#之前可以有之前可以有空格，但只能包含單行注釋?？崭?，但只能包含單行注釋。n注釋用來描述緩存的功能，以及定義注釋用來描述緩存的功能，以及定義Web應(yīng)用應(yīng)用的版本，通常在第一行注釋定義。如：的版本，通常在第一行注釋定義。如：CA

11、CHE MANIFEST# offline NotePad v1.114.2.4 注釋注釋nWeb應(yīng)用的緩存只有在清單文件被修改的情況應(yīng)用的緩存只有在清單文件被修改的情況下才會(huì)被更新，若只修改了緩存文件，客戶端下才會(huì)被更新，若只修改了緩存文件，客戶端本地的緩存還是不會(huì)被更新的。本地的緩存還是不會(huì)被更新的。n利用這點(diǎn)，通過修改注釋中的版本號就可以實(shí)利用這點(diǎn)，通過修改注釋中的版本號就可以實(shí)現(xiàn)，或者在注釋中定義一個(gè)修改日期也可以實(shí)現(xiàn)，或者在注釋中定義一個(gè)修改日期也可以實(shí)現(xiàn)同樣功能?，F(xiàn)同樣功能。CACHE MANIFEST# offline NotePad modified by 10/22/2010

12、14.2.4 注釋注釋n這樣寫有這樣寫有3個(gè)好處：個(gè)好處：n可以明確了解可以明確了解Web應(yīng)用的版本。應(yīng)用的版本。n通過簡單的修改版本號或日期可以用輕易通知通過簡單的修改版本號或日期可以用輕易通知瀏覽器更新。瀏覽器更新。n可以配合可以配合JavaScript程序來完成緩存更新。程序來完成緩存更新。14.3 使用使用DOM方法處理離線應(yīng)用方法處理離線應(yīng)用nHTML5定義了定義了ApplicationCache接口來規(guī)范接口來規(guī)范離線緩存的控制。離線緩存的控制。14.3.1 獲取緩存獲取緩存var cache=window.applicationCache;nApplicationCache對象對

13、應(yīng)于一個(gè)網(wǎng)頁的緩對象對應(yīng)于一個(gè)網(wǎng)頁的緩存，使用存，使用window.applicationCache屬性可屬性可以獲得對該對象的引用。以獲得對該對象的引用。n例如：例如：14.3.1 獲取緩存獲取緩存n當(dāng)位于一個(gè)網(wǎng)頁中時(shí)，當(dāng)位于一個(gè)網(wǎng)頁中時(shí)，cache就表示應(yīng)用于當(dāng)就表示應(yīng)用于當(dāng)前文檔所表示的前文檔所表示的window的的ApplicationCache對象。對象。napplicationCache屬性頁可以用在共享屬性頁可以用在共享Worker中，用于返回對應(yīng)的中，用于返回對應(yīng)的ApplicationCache對象。對象。var cache=self.applicationCache;14.

14、3.2 檢查狀態(tài)檢查狀態(tài)n使用使用cache.status屬性可以返回當(dāng)前應(yīng)用的緩屬性可以返回當(dāng)前應(yīng)用的緩存狀態(tài)。對應(yīng)有存狀態(tài)。對應(yīng)有5種，可以使用常量表示。種，可以使用常量表示。nUNCACHED0nIDLE1nCHECKING2nDOWNLOADING3nUPDATEREADY4nOBSOLETE514.3.3 更新緩存更新緩存n分兩個(gè)步驟實(shí)現(xiàn)：分兩個(gè)步驟實(shí)現(xiàn)：n（1）調(diào)用）調(diào)用applicationCache.update()使得瀏使得瀏覽器開始嘗試更新，前提是覽器開始嘗試更新，前提是manifest文件是更文件是更新過的。如修改了版本號。新過的。如修改了版本號。n（2）在）在appli

15、cationCache.status為為UPDATEREADY狀態(tài)時(shí)就可以調(diào)用狀態(tài)時(shí)就可以調(diào)用applicationCache.swapCache()來將舊的緩來將舊的緩存更換為新的。存更換為新的。14.3.3 更新緩存更新緩存n例如，下面的代碼演示了如何使用這兩個(gè)方法例如，下面的代碼演示了如何使用這兩個(gè)方法實(shí)現(xiàn)更新。實(shí)現(xiàn)更新。var appCache=window.applicationCache;/開始檢查清單文件的更新開始檢查清單文件的更新appCache.update();if(appCache.status=appCache.UPDATEREADY) /得到最新版本清單文件，并成功下

16、載資源，更新緩存到最新。得到最新版本清單文件，并成功下載資源，更新緩存到最新。 appCache.swapCache(); 14.3.3 更新緩存更新緩存n1.使用使用update()方法檢查更新方法檢查更新n該方法調(diào)用當(dāng)前應(yīng)用程序資源下載處理過程。該方法調(diào)用當(dāng)前應(yīng)用程序資源下載處理過程。語法格式：語法格式：ncache.update()n2.使用使用swapCache()方法更新緩存方法更新緩存n語法格式：語法格式：ncache.swapCache()14.3.3 更新緩存更新緩存n如服務(wù)器有最新文件就會(huì)更新到緩存，但不會(huì)使如服務(wù)器有最新文件就會(huì)更新到緩存，但不會(huì)使得之前加載的資源突然被重新

17、加載。例如，圖片、得之前加載的資源突然被重新加載。例如，圖片、樣式和腳本不會(huì)被重新加載或渲染，惟一的變化樣式和腳本不會(huì)被重新加載或渲染，惟一的變化時(shí)在此之后發(fā)出請求頁面的資源是最新的。時(shí)在此之后發(fā)出請求頁面的資源是最新的。n如果沒有應(yīng)用程序緩存需要更新么，就會(huì)拋出異如果沒有應(yīng)用程序緩存需要更新么，就會(huì)拋出異常。常。n不管是不管是manifest文件還是它羅列的資源文件下載文件還是它羅列的資源文件下載失敗，整個(gè)更新過程就終止了，瀏覽器會(huì)使用上失敗，整個(gè)更新過程就終止了，瀏覽器會(huì)使用上一個(gè)最新緩存。一個(gè)最新緩存。14.3.4 監(jiān)聽事件監(jiān)聽事件n更新的過程會(huì)觸發(fā)一系列事件。更新的過程會(huì)觸發(fā)一系列事件

18、。n當(dāng)瀏覽器發(fā)現(xiàn)網(wǎng)頁定義有當(dāng)瀏覽器發(fā)現(xiàn)網(wǎng)頁定義有manifest屬性，就會(huì)屬性，就會(huì)發(fā)送事件給發(fā)送事件給window.applicationCache對象，對象，然后獲取然后獲取manifest文件。文件無變化表明客戶文件。文件無變化表明客戶端當(dāng)前緩存是最新的，發(fā)送端當(dāng)前緩存是最新的，發(fā)送noupdate事件給事件給window.applicationCache對象，更新過程對象，更新過程完成。完成。14.3.4 監(jiān)聽事件監(jiān)聽事件nmanifest文件變化，就會(huì)首先將清單中的文件文件變化，就會(huì)首先將清單中的文件下載到一個(gè)臨時(shí)緩存，每一個(gè)要增加到臨時(shí)緩下載到一個(gè)臨時(shí)緩存，每一個(gè)要增加到臨時(shí)緩存的

19、文件就會(huì)觸發(fā)存的文件就會(huì)觸發(fā)progress事件。如果有錯(cuò)事件。如果有錯(cuò)誤發(fā)生，則會(huì)觸發(fā)誤發(fā)生，則會(huì)觸發(fā)error事件，并且更新終止。事件，并且更新終止。n一旦所有文件被成功獲取，這些文件就會(huì)自動(dòng)一旦所有文件被成功獲取，這些文件就會(huì)自動(dòng)被移動(dòng)到真正的離線緩存區(qū)，并觸發(fā)被移動(dòng)到真正的離線緩存區(qū)，并觸發(fā)cached事件。事件。14.3.5 檢測脫機(jī)模式檢測脫機(jī)模式n可以使用可以使用window.navigator.onLine屬性檢測屬性檢測瀏覽器是否處于脫機(jī)模式，該屬性是一個(gè)只讀瀏覽器是否處于脫機(jī)模式，該屬性是一個(gè)只讀的邏輯值。的邏輯值。 document.write(“當(dāng)前模式：”+(navigator.onLine?”在線”:”脫機(jī)”);n當(dāng)用戶在瀏覽器中選擇脫機(jī)工作狀態(tài)后，內(nèi)容當(dāng)用戶在瀏覽器中選擇脫機(jī)工作狀態(tài)后，內(nèi)容將從緩存進(jìn)行讀取。將從緩存進(jìn)行讀取。14.3.5 檢測脫機(jī)模式檢測脫機(jī)模式1. 事件n當(dāng)用戶由聯(lián)機(jī)進(jìn)入脫機(jī)狀態(tài)后，就會(huì)觸發(fā)當(dāng)用戶由聯(lián)機(jī)進(jìn)入脫機(jī)狀態(tài)后，就會(huì)觸發(fā)window對象的對象的offline事件，反之觸發(fā)事件，反之觸發(fā)online事件。可以使用下面事件。可以使用下面3種方式之一來聲明事件：種方式之一來聲明事件：（1）對）