《基于新信息技術(shù)的HTML5和CSS3網(wǎng)頁設(shè)計進階教程》課件-第7章

第7章HTML5的離線緩存7.1APPCache7.2ServiceWorker

HTML5在新特性中增加了離線緩存，可以簡單地理解為瀏覽器在第一次加載頁面后將相關(guān)資源下載到本地并保存在緩存中，在沒有清除緩存的前提下，下一次打開頁面時，就算沒有網(wǎng)絡(luò)也可以正常顯示。這個功能在網(wǎng)絡(luò)發(fā)達的今天看似無關(guān)緊要，但是它確實是一個提升用戶體驗的非常重要的手段。另一方面，隨著移動互聯(lián)網(wǎng)越來越普及，在移動端采用Web技術(shù)解決跨平臺、快速部署、快速發(fā)布的方案也越來越多。但對于以Web方式實現(xiàn)的APP來說，又面臨著對網(wǎng)絡(luò)的強依賴、對網(wǎng)速和流量有較高要求等一系列問題，而離線緩存對于這一類問題提供了非常好的解決方案。

離線緩存為頁面帶來的優(yōu)勢包括以下內(nèi)容：

●

離線瀏覽。用戶可在離線時正常打開被緩存的頁面。

●

速度更快。已緩存資源只需本地直接打開，不用再從服務(wù)器下載，從而加載速度更快。

●

減少服務(wù)器負(fù)載。瀏覽器只從服務(wù)器下載更新過的資源，從而減輕服務(wù)器負(fù)擔(dān)。

HTML5標(biāo)準(zhǔn)中，提供了兩套離線緩存方案：APPCache和ServiceWorkers。

7.1APPCache

APPCache中文翻譯為應(yīng)用程序緩存，是HTML5標(biāo)準(zhǔn)中提供的一種緩存方式，具體表現(xiàn)為當(dāng)請求某個文件時不是優(yōu)先從網(wǎng)絡(luò)獲取該文件，而是先從本地獲取，再對比網(wǎng)絡(luò)中的版本進行更新(如果網(wǎng)絡(luò)可用)。

APPCache的特點是簡單易用，開發(fā)者不需要過多的操作，只需列明要緩存的文件即可完成頁面緩存功能。同時，它的瀏覽器支持情況也相對較好。

7.1.1瀏覽器支持情況

除了InternetExplorer9(IE9)及更早的版本外，所有主流瀏覽器均支持APPCache。我們可以通過以下代碼檢測瀏覽器是否支持APPCache。

7.1.2使用APPCache實現(xiàn)頁面緩存

使用APPCache實現(xiàn)頁面緩存非常簡單，我們只需要通過以下三步即可輕松實現(xiàn)。

1.在html標(biāo)簽中添加manifest屬性

每個指定了manifest屬性的頁面在用戶對其訪問時都會被緩存。如果未指定，則頁面不會被緩存(除非在manifest文件中直接指定了該頁面)。

在manifest屬性的值中引入一個后綴名為“.appcache”的文件，這個文件一般放在JavaScript目錄中，是一個manifest文件，其實該文件是一個純文本文件，后綴名可自定義，但官方標(biāo)準(zhǔn)建議使用“.appcache”作為后綴名，它的作用是告訴瀏覽器哪些文件需要被緩存，哪些文件不會被緩存等。例如：

2.編寫manifest文件

manifest文件可分為以下3部分：

●

CACHEMANIFEST：在此標(biāo)題下列出的文件將在首次下載后進行緩存。

●

NETWORK：在此標(biāo)題下列出的文件需要與服務(wù)器連接，且不會被緩存。

●

FALLBACK：在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時的回退頁面(比如404頁面)。

一個完整的manifest文件代碼如下：

NETWORK是可選的，上面的manifest文件規(guī)定文件login.asp永遠(yuǎn)不會被緩存，且離線時是不可用的；同時可以使用“*”來指示其他所有文件離線不可用。例如：

3.更新緩存

一旦應(yīng)用被緩存，它就會保持緩存直到發(fā)生下列情況：

●

用戶清空瀏覽器緩存。

●

manifest文件被修改(如修改日期和版本號)。

●由程序來更新應(yīng)用緩存，可以使用“applicationCache.update()”方法來主動更新緩存內(nèi)容。

7.1.3APPCacheAPI

APPCacheAPI提供了相關(guān)的屬性、方法和事件，我們可以通過window.applicationCache來對緩存內(nèi)容進行訪問，通過監(jiān)控APPCacheAPI事件來對緩存的過程進行簡單的控制。

1.緩存狀態(tài)

applicationCache.status屬性可用于查看緩存的當(dāng)前狀態(tài)，返回值及說明如下：

●

0：未緩存。

●

1：空閑(緩存為最新狀態(tài))。

●

2：檢查中。

●

3：下載中。

●

4：更新就緒。

●

5：緩存過期。

2.主動更新緩存方法

applicationCache.update()方法可主動更新已緩存的文件。

3.緩存相關(guān)的事件

APPCacheAPI提供的事件及其說明列舉如下：

●

updateready事件：當(dāng)有新的緩存，并更新完以后，會觸發(fā)此事件。

●

progress事件：當(dāng)有新的緩存，并處于正在下載的過程中時，會不斷觸發(fā)此事件。progress事件中的event對象包含loaded和total，loaded代表當(dāng)前已經(jīng)加載完成的文件，total為總共需要更新的文件數(shù)。

●

checking事件：當(dāng)正在檢查有沒有新的緩存時，會觸發(fā)此事件。

●

downloading事件：當(dāng)正在下載文件時，會觸發(fā)此事件。

●

obsolete事件：當(dāng)緩存過期時，會觸發(fā)此事件。

●

cached事件：當(dāng)緩存為最新狀態(tài)時，會觸發(fā)此事件。

●

error事件：當(dāng)緩存過程中報錯時，會觸發(fā)此事件。

●

noupdate事件：當(dāng)檢查更新結(jié)束，沒有新的緩存需要更新時，會觸發(fā)此事件。

7.1.4其他注意事項

APPCache雖然有著諸多優(yōu)勢，但也有一些設(shè)計上的缺陷。下面列出一些在開發(fā)過程中經(jīng)常出現(xiàn)的問題，希望大家在使用的過程中注意規(guī)避。

●

瀏覽器對緩存數(shù)據(jù)的容量限制可能不太一樣(某些瀏覽器設(shè)置的限制是每個站點5

MB)。

●

如果manifest文件或者內(nèi)部列舉的某一個文件不能正常下載，整個更新過程都將失敗，瀏覽器全部繼續(xù)使用舊的緩存。

●

引用manifest的html必須與manifest文件同源，在同一個域下。

●

FALLBACK中的資源必須和manifest文件同源。

●

當(dāng)一個資源被緩存后，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。

●

站點中的其他頁面即使沒有設(shè)置manifest屬性，請求的資源如果在緩存中也從緩存中訪問。

●

當(dāng)manifest文件發(fā)生改變時，資源請求本身也會觸發(fā)更新。

●

被緩存的頁面如果是動態(tài)頁面(如jsp頁面)，其中的內(nèi)容將不會動態(tài)地從服務(wù)器中獲取。此時的解決辦法一般是使用ajax異步來獲取服務(wù)器中的數(shù)據(jù)進行替換。

7.2ServiceWorkers

ServiceWorkers是谷歌Chrome團隊提出并大力推廣的一項Web技術(shù)。在2015年，它加入到W3C標(biāo)準(zhǔn)，進入草案階段，目前已經(jīng)發(fā)展成熟，被各大瀏覽器廠商支持，進入了實際應(yīng)用階段。

ServiceWorkers可以理解為充當(dāng)應(yīng)用(頁面)與服務(wù)器之間的代理服務(wù)器，可以用于攔截請求，也就意味著可以在離線環(huán)境下響應(yīng)請求，從而提供更好的離線體驗。

相比APPCache的簡單易用，ServiceWorkers的特點是功能強大，由事件驅(qū)動，可以攔截請求、緩存這些請求的響應(yīng)數(shù)據(jù)等，能實現(xiàn)的效果更加靈活。同時，它也有一些不足，如它是基于HTTPS協(xié)議的，你需要把你的網(wǎng)站升級成HTTPS協(xié)議的網(wǎng)站才能使用它；它又是WebWorkers中的一種，因此它不能夠直接操作DOM對象等。

7.2.1瀏覽器支持檢測

目前，除了InternetExplorer(IE)外，所有最新版主流瀏覽器均支持ServiceWorkers。我們可以通過以下代碼檢測瀏覽器是否支持ServiceWorkers。

7.2.2ServiceWorkers生命周期

ServiceWorkers能夠提供離線緩存，這就好比已經(jīng)在瀏覽器中安裝了某個軟件，無論是否有網(wǎng)絡(luò)連接都可以隨時打開使用。用戶首次訪問ServiceWorker控制的網(wǎng)站或頁面時，會使用ServiceWorkerContainer.register()方法進行注冊，如果注冊成功，ServiceWorker就會被下載到客戶端并嘗試安裝或激活，它能作用于整個域內(nèi)用戶可訪問的URL，或者其特定子集。

ServiceWorker遵循如圖7-1所示的生命周期。

圖7-1ServiceWorker初次安裝生命周期

●注冊(register)：用戶首次訪問ServiceWorker控制的網(wǎng)站或頁面時，會檢測ServiceWorker是否已安裝，沒有安裝時則需要先注冊，注冊時需要一個專門的ServiceWorker處理文件。

●

下載(download)：用戶首次訪問ServiceWorker控制的網(wǎng)站或頁面時，ServiceWorker會立刻被下載。之后，至少每24小時它就會被重新下載一次。它可能會被更頻繁地下載，但每24小時必定會被下載一次，以避免不良腳本長時間生效。

●安裝(install)：注冊成功后，ServiceWorker會觸發(fā)install事件進行安裝。之后，每次ServiceWorker被重新下載后都會與現(xiàn)有的進行字節(jié)對比，如果發(fā)現(xiàn)有不同，則會再次觸發(fā)install事件重新安裝。

7.2.3ServiceWorkers基本用法

和其他Worker一樣，ServiceWorker有一個獨自的文件。由于之前所提到的ServiceWorker只能作用在自己存放位置之下的文件，因此，一般在應(yīng)用根目錄下存放ServiceWorker文件。

1.注冊ServiceWorker

之前提到過，注冊ServiceWorker時需要一個專門的處理文件，在這個處理文件中的第一塊代碼應(yīng)該是我們使用ServiceWorker的入口。代碼如下：

首先，我們使用之前提供的特性檢測代碼來判斷瀏覽器是否支持ServiceWorkers，以便在注冊之前確保瀏覽器對ServiceWorkers是支持的。

接著，我們使用ServiceWorkerContainer.register()函數(shù)來注冊站點的ServiceWorker，它是一個駐留在我們網(wǎng)站內(nèi)的JavaScript文件。

然后，.then()函數(shù)鏈?zhǔn)秸{(diào)用我們的promise，當(dāng)出現(xiàn)promiseresolve的時候，里面的代碼就會被執(zhí)行。

最后，我們鏈接了一個.catch()函數(shù)，當(dāng)出現(xiàn)promiserejected時才會執(zhí)行。

這樣就注冊了一個ServiceWorker，它工作在WorkerContext中，所以沒有訪問DOM的權(quán)限。在正常的頁面之外，運行ServiceWorker的代碼來控制它們的加載。

單個ServiceWorker可以控制很多頁面，需要小心ServiceWorker腳本里的全局變量，每個頁面不會有自己獨有的Worker。

2.安裝和激活

在ServiceWorker注冊之后，瀏覽器會嘗試安裝并激活它。其代碼如下：

3.自定義請求的響應(yīng)

現(xiàn)在，站點資源已經(jīng)被緩存了，我們需要告訴ServiceWorker讓它用這些緩存內(nèi)容來做點什么。有了fetch事件，這就很容易做到。

可以給ServiceWorker添加一個fetch的事件監(jiān)聽器，接著調(diào)用event上的respondWith()方法來攔截HTTP響應(yīng)，然后用自己的程序來更新它們。

也可以使用caches.match(event.request)對網(wǎng)絡(luò)請求的資源和cache里可獲取的資源進行匹配，查看緩存中是否有相應(yīng)的資源。這個匹配通過URL和varyheader進行，就像正常的HTTP請求一樣。

4.恢復(fù)失敗的請求

在ServiceWorkercache里有匹配的資源時，caches.match(ev