這篇文章主要介紹“html5的離線緩存如何使用”，在日常操作中，相信很多人在html5的離線緩存如何使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”html5的離線緩存如何使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)巴彥淖爾免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千余家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

離線訪問(wèn)對(duì)基于網(wǎng)絡(luò)的應(yīng)用而言越來(lái)越重要。雖然所有瀏覽器都有緩存機(jī)制，但它們并不可靠，也不一定總能起到預(yù)期的作用。HTML5 使用 ApplicationCache 接口解決了由離線帶來(lái)的部分難題。

使用緩存接口可為您的應(yīng)用帶來(lái)以下三個(gè)優(yōu)勢(shì)：

應(yīng)用緩存（又稱(chēng) AppCache）可讓開(kāi)發(fā)人員指定瀏覽器應(yīng)緩存哪些文件以供離線用戶訪問(wèn)。即使用戶在離線狀態(tài)下按了刷新按鈕，您的應(yīng)用也會(huì)正常加載和運(yùn)行。

引用清單文件

要啟用某個(gè)應(yīng)用的應(yīng)用緩存，請(qǐng)?jiān)谖臋n的 html 標(biāo)記中添加 manifest 屬性：

manifest 屬性可指向絕對(duì)網(wǎng)址或相對(duì)路徑，但絕對(duì)網(wǎng)址必須與相應(yīng)的網(wǎng)絡(luò)應(yīng)用同源。清單文件可使用任何文件擴(kuò)展名，但必須以正確的 MIME 類(lèi)型提供（參見(jiàn)下文）。

您應(yīng)在要緩存的網(wǎng)絡(luò)應(yīng)用的每個(gè)頁(yè)面上都添加 manifest 屬性。如果網(wǎng)頁(yè)不包含 manifest 屬性，瀏覽器就不會(huì)緩存該網(wǎng)頁(yè)（除非清單文件中明確列出了該屬性）。

這就意味著用戶瀏覽的每個(gè)包含 manifest 的網(wǎng)頁(yè)都會(huì)隱式添加到應(yīng)用緩存。因此，您無(wú)需在清單中列出每個(gè)網(wǎng)頁(yè)。

清單文件必須以 text/cache-manifest MIME類(lèi)型提供。文件后綴名可以自定義（建議為。manifest）所以我們需要現(xiàn)在服務(wù)端將后綴的文件類(lèi)型聲明為text/cache-manifest。

以apache為例，我們需要在httpd.conf中加上：

清單文件結(jié)構(gòu)

簡(jiǎn)單的清單格式如下：

該示例將在指定此清單文件的網(wǎng)頁(yè)上緩存四個(gè)文件。

您需要注意以下幾點(diǎn)：

CACHE MANIFEST 字符串應(yīng)在第一行，且必不可少。

網(wǎng)站的緩存數(shù)據(jù)量不得超過(guò) 5 MB。不過(guò)，如果您要編寫(xiě)的是針對(duì) Chrome 網(wǎng)上應(yīng)用店的應(yīng)用，可使用 unlimitedStorage 取消該限制。

如果清單文件或其中指定的資源無(wú)法下載，就無(wú)法進(jìn)行整個(gè)緩存更新進(jìn)程。在這種情況下，瀏覽器將繼續(xù)使用原應(yīng)用緩存。

我們?cè)賮?lái)看看更復(fù)雜的示例：

以“#”開(kāi)頭的行是注釋行，但也可用于其他用途。例如更新緩存

應(yīng)用緩存只在其清單文件發(fā)生更改時(shí)才會(huì)更新。例如，如果您修改了圖片資源或更改了 JavaScript 函數(shù)，這些更改不會(huì)重新緩存。您必須修改清單文件本身才能讓瀏覽器刷新緩存文件。使用生成的版本號(hào)、文件哈希值或時(shí)間戳創(chuàng)建注釋行，可確保用戶獲得您的軟件的最新版。

您還可以在出現(xiàn)新版本后，以編程方式更新緩存，如更新緩存部分中所述。

如果頁(yè)面引入了緩存清單文件，那么清單文件必須包含當(dāng)前頁(yè)面需要的所有文件（css，js，image…），否則不會(huì)被加載，所以除去固定需要緩存的文件，建議在文件中的NETWORK一項(xiàng)加上星號(hào)*,表示其余所有文件

清單可包括以下三個(gè)不同部分：CACHE、NETWORK 和 FALLBACK。

CACHE：

這是條目的默認(rèn)部分。系統(tǒng)會(huì)在首次下載此標(biāo)頭下列出的文件（或緊跟在 CACHE MANIFEST 后的文件）后顯式緩存這些文件。

NETWORK：

此部分下列出的文件是需要連接到服務(wù)器的白名單資源。無(wú)論用戶是否處于離線狀態(tài)，對(duì)這些資源的所有請(qǐng)求都會(huì)繞過(guò)緩存?？墒褂猛ㄅ浞?。

FALLBACK：

此部分是可選的，用于指定無(wú)法訪問(wèn)資源時(shí)的后備網(wǎng)頁(yè)。其中第一個(gè) URI 代表資源，第二個(gè)代表后備網(wǎng)頁(yè)。兩個(gè) URI 必須相關(guān)，并且必須與清單文件同源。可使用通配符。

請(qǐng)注意：這些部分可按任意順序排列，且每個(gè)部分均可在同一清單中重復(fù)出現(xiàn)。

以下清單定義了用戶嘗試離線訪問(wèn)網(wǎng)站的根時(shí)顯示的“綜合性”網(wǎng)頁(yè) （offline.html），也表明了其他所有資源（例如遠(yuǎn)程網(wǎng)站上的資源）均需要互聯(lián)網(wǎng)連接。

請(qǐng)注意：系統(tǒng)會(huì)自動(dòng)緩存引用清單文件的 HTML 文件。因此您無(wú)需將其添加到清單中，但我們建議您這樣做。

請(qǐng)注意：HTTP 緩存標(biāo)頭以及對(duì)通過(guò) SSL 提供的網(wǎng)頁(yè)設(shè)置的緩存限制將被替換為緩存清單。因此，通過(guò) https 提供的網(wǎng)頁(yè)可實(shí)現(xiàn)離線運(yùn)行。

更新緩存

到此，關(guān)于“html5的離線緩存如何使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！