HTML5如何實現應用程序緩存

本篇內容主要講解“HTML5如何實現應用程序緩存”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML5如何實現應用程序緩存”吧!

　　為什么要使用Application Cache技術？

　　在HTML5之前，我們需要接入網絡才能訪問，這毫無疑問是網站多次請求服務器，造成速度變慢，對于PC用戶，網絡相對比較穩定，載入速度也不會差太多。但是移動端呢？移動端依賴無線信號、依賴信號塔、位置不固定、受附近建筑影響等。一系列導致網絡的不穩定，我們不能改變用戶，也不能放棄網絡較慢的用戶。

　　還有，在混合app領域，經常使用內置webview加載html頁面，如果網速太慢，依然會造成上述問題。

　　離線存儲技術

　　實際開發中，主要是使用Application Cache和LocalStorage技術，它們來自HTML5技術。

　　（1）Application Cache：通常用于靜態資源（靜態頁面）的緩存。

　　（2）LocalStorage：通常用于AJAX請求緩存，存儲非關鍵性AJAX數據。

　　我用一段話來贅述下為什么要使用Application Cache技術：

　　當頁面有些元素它們是不變的，你可以使用Application Cache技術離線緩存掉，每次訪問這些緩存掉的元素就不需要再請求服務器了，當有些東西經常變，那就讓它們每次請求服務器吧！

　　HTML5 Application Cache特性

　　HTML5 引入了應用程序緩存，這意味著 web 應用可進行緩存，并可在沒有因特網連接時進行訪問。

　　應用程序緩存為應用帶來三個優勢：

　　（1）離線瀏覽：用戶可在不介入網絡時訪問使用

　　（2）速度提升：已緩存資源加載得更快

　　（3）減少對服務器的請求：瀏覽器將只從服務器下載更新過或更改過的資源

　　支持情況：除了IE瀏覽器，都支持Application Cache

　　開始使用Application Cache

　　涉及角色：服務器和html文件

　　服務器端需要做的事情

　　管理維護manifest.appcache文件，檢查manifest清單中是否有無法訪問的文件，并及時更新，以免造成損失。

　　manifest文件（W3C建議文件擴展名為。appcache）

　　manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

　　manifest 文件可分為三個部分：

　　CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存

　　NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存

　　FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）

　　我們梳理一下逐一進行介紹

　　一、CACHE MANIFEST（它是必須的）

　　manifest 文件列出了三個資源：一個 CSS 文件，一個 GIF 圖像，以及一個 JavaScript 文件。當 manifest 文件加載后，瀏覽器會從網站的根目錄下載這三個文件。然后，無論用戶何時與因特網斷開連接，這些資源依然是可用的。

　　注意：文件位置根據文件在服務器的實際目錄，確保路徑正確。

　　總結：CACHE MANIFEST列出的資源是需要在本地緩存的文件（要緩存的文件）

　　二、NETWORK

　　NETWORK 小節規定文件 “nav.html” 永遠不會被緩存，且離線時不可用。

　　也可以使用星號“ * ”來指示所有其他資源/文件都需要因特網連接。

　　注意：千萬不要把首頁index放入NETWORK中禁止緩存，否則插件等無法使用。

　　總結：NETWORD列出的資源是需要每次請求的動態資源文件（不緩存的文件）

　　三、FALLBACK

　　FALLBACK 小節規定如果無法建立因特網連接，則用 “404.html” 替代 /index/ 目錄中的所有文件。

　　注意：第一個 URI 是資源，第二個是替補。

　　總結：FALLBACK列出的資源是如果某個文件無法聯網或接入失敗，則使用后一個替補顯示。（友好的替補頁面）

　　完整的manifest文件

　　注意：#代表注釋行，看似簡單的注釋行卻有著很大的用處，為什么這么說呢，因為應用的緩存會在其 manifest 文件更改時被更新。如果您編輯了一幅圖片，或者修改了一個 JavaScript 函數，這些改變都不會被重新緩存。更新注釋行中的日期和版本號、時間戮或md5碼等，是一種使瀏覽器重新緩存文件的辦法。

　　html需要做的事情

　　只需要引入manifest.appcache文件

　　Application Cache生命銷毀規則

　　（1）用戶清空瀏覽器的緩存，此時Application Cache本地緩存將銷毀。

　　（2）manifest文件被修改時，因為應用的緩存會在其 manifest 文件更改時被更新。如果您編輯了一幅圖片，或者修改了一個 JavaScript 函數，這些改變都不會被重新緩存，此時Application Cache本地緩存將銷毀。

　　（3）由程序來更新應用緩存

　　深入manifest.appcache文件

　　首先提醒的就是，千萬不要把index首頁禁止緩存，雖然放入NETWORK也不起作用，這是一種規范，也是一種規則，請遵守。

　　HTTP相關的緩存頭域以及https的緩存頁面限制，將被manifest所無視，所以在用戶代理更新頁面之前，它是不會過期的，也就是說，即使是HTTPS，也可以脫機工作。

　　各大瀏覽器對應用緩存的容量限制有所不同，幾乎為5MB。

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

　　緩存包含manifest清單的頁面，所以實際上，即使我們不顯示的把包含manifest的頁面，列在manifest緩存清單中，這個頁面也會被緩存。

　　每次網站更新，服務器端要進行manifest.appcache文件的檢查和更新，避免造成損失。

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

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

　　其實，不必明確的列出Application Cache鏈接到的頁面，默認情況下，任何包含html元素manifest屬性的頁面都會緩存，這些自動緩存的頁面稱為主條目，而清單中列出的文件稱為詳細條目，如果某些文件需要在線訪問，可以創建 “ 白名單 ”。像在NETWORK下的條目，這些文件通常稱之為網絡條目，每次聯網，每次都要請求服務器。

　　第一行CACHE MANIFEST是固定的格式，且必須要寫在第一行，也必須要有，NETWORK和FALLBACK為可選項。

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

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

　　當manifest文件發生改變時，資源請求本身也會觸發更新

　　注釋不僅僅起到不執行的作用，上述已經詳細解釋了，可以是版本號，時間戳或者md5碼等等。

　　manifest文件中的cache部分不能使用通配符，必須手動指定，沒有自動化工具。

　　在開發過程中，通過ajax與WCF進行數據交互時，常常頭一次或頭幾次數據加載成功，以后均加載失敗。

　　因為啟用的web離線緩存機制，所以每次ajax加載數據時是從本地緩存文件中讀取的，用的是ajax的get模式，因為get模式緩存，所以不會重新向服務器請求數據，導致數據加載失敗。

　　改成ajax post方式后，數據 never cache,所以每次刷新網站，均會向service請求數據。

　　報錯： Application Cache Error event: Manifest fetch failed （404）

　　解決方法：

　　manifest 文件需要配置正確的 MIME-type，即 “text/cache-manifest”。

　　manifest 的 contentType=text/cache-manifest，擴展名建議為 .appcache

　　且必須在 web 服務器上進行配置，不同的服務器配置方法不一樣。

　　頁面離線，ajax更新。

到此，相信大家對“HTML5如何實現應用程序緩存”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！