html5的離線緩存如何使用

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

　　離線訪問對基于網絡的應用而言越來越重要。雖然所有瀏覽器都有緩存機制，但它們并不可靠，也不一定總能起到預期的作用。HTML5 使用 ApplicationCache 接口解決了由離線帶來的部分難題。

　　使用緩存接口可為您的應用帶來以下三個優勢：

　　應用緩存（又稱 AppCache）可讓開發人員指定瀏覽器應緩存哪些文件以供離線用戶訪問。即使用戶在離線狀態下按了刷新按鈕，您的應用也會正常加載和運行。

　　引用清單文件

　　要啟用某個應用的應用緩存，請在文檔的 html 標記中添加 manifest 屬性：

　　manifest 屬性可指向絕對網址或相對路徑，但絕對網址必須與相應的網絡應用同源。清單文件可使用任何文件擴展名，但必須以正確的 MIME 類型提供（參見下文）。

　　您應在要緩存的網絡應用的每個頁面上都添加 manifest 屬性。如果網頁不包含 manifest 屬性，瀏覽器就不會緩存該網頁（除非清單文件中明確列出了該屬性）。

　　這就意味著用戶瀏覽的每個包含 manifest 的網頁都會隱式添加到應用緩存。因此，您無需在清單中列出每個網頁。

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

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

　　清單文件結構

　　簡單的清單格式如下：

　　該示例將在指定此清單文件的網頁上緩存四個文件。

　　您需要注意以下幾點：

　　CACHE MANIFEST 字符串應在第一行，且必不可少。

　　網站的緩存數據量不得超過 5 MB。不過，如果您要編寫的是針對 Chrome 網上應用店的應用，可使用 unlimitedStorage 取消該限制。

　　如果清單文件或其中指定的資源無法下載，就無法進行整個緩存更新進程。在這種情況下，瀏覽器將繼續使用原應用緩存。

　　我們再來看看更復雜的示例：

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

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

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

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

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

　　CACHE：

　　這是條目的默認部分。系統會在首次下載此標頭下列出的文件（或緊跟在 CACHE MANIFEST 后的文件）后顯式緩存這些文件。

　　NETWORK：

　　此部分下列出的文件是需要連接到服務器的白名單資源。無論用戶是否處于離線狀態，對這些資源的所有請求都會繞過緩存。可使用通配符。

　　FALLBACK：

　　此部分是可選的，用于指定無法訪問資源時的后備網頁。其中第一個 URI 代表資源，第二個代表后備網頁。兩個 URI 必須相關，并且必須與清單文件同源。可使用通配符。

　　請注意：這些部分可按任意順序排列，且每個部分均可在同一清單中重復出現。

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

　　請注意：系統會自動緩存引用清單文件的 HTML 文件。因此您無需將其添加到清單中，但我們建議您這樣做。

　　請注意：HTTP 緩存標頭以及對通過 SSL 提供的網頁設置的緩存限制將被替換為緩存清單。因此，通過 https 提供的網頁可實現離線運行。

　　更新緩存

到此，關于“html5的離線緩存如何使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！