HTML5 manifest離線快取

JouyPub發表於2019-02-16
HTML快取

簡介

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

使用快取介面可為您的應用帶來以下三個優勢：

  1. 離線瀏覽 – 使用者可在離線時瀏覽您的完整網站
  2. 速度 – 快取資源為本地資源，因此載入速度較快。
  3. 伺服器負載更少 – 瀏覽器只會從發生了更改的伺服器下載資源。

應用快取（又稱 AppCache）可讓開發人員指定瀏覽器應快取哪些檔案以供離線使用者訪問。即使使用者在離線狀態下按了重新整理按鈕，您的應用也會正常載入和執行。

引用清單檔案

要啟用某個應用的應用快取，請在文件的 html 標記中新增 manifest 屬性：
manifest 屬性可指向絕對網址或相對路徑，但絕對網址必須與相應的網路應用同源。清單檔案可使用任何副檔名，但必須以正確的 MIME 型別提供（參見下文）。

<html manifest="/cache.manifest">
  ...
</html>

或

<html manifest="http://www.example.com/example.mf">
  ...
</html>

您應在要快取的網路應用的每個頁面上都新增 manifest 屬性。如果網頁不包含 manifest 屬性，瀏覽器就不會快取該網頁（除非清單檔案中明確列出了該屬性）。
這就意味著使用者瀏覽的每個包含 manifest 的網頁都會隱式新增到應用快取。因此，您無需在清單中列出每個網頁。

清單檔案必須以 text/cache-manifest MIME型別提供。檔案字尾名可以自定義（建議為.manifest）所以我們需要現在服務端將.manifest字尾的檔案型別宣告為text/cache-manifest。
以apache為例，我們需要在httpd.conf中加上：AddType text/cache-manifest .manifest

清單檔案結構

簡單的清單格式如下：

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

該示例將在指定此清單檔案的網頁上快取四個檔案。

您需要注意以下幾點：

  • CACHE MANIFEST 字串應在第一行，且必不可少。
  • 網站的快取資料量不得超過 5 MB。不過，如果您要編寫的是針對 Chrome 網上應用店的應用，可使用 unlimitedStorage 取消該限制。
  • 如果清單檔案或其中指定的資源無法下載，就無法進行整個快取更新程式。在這種情況下，瀏覽器將繼續使用原應用快取。

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

CACHE MANIFEST
# 2010-06-18:v2

# Explicitly cached `master entries`.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

以“#”開頭的行是註釋行，但也可用於其他用途。例如更新快取
應用快取只在其清單檔案發生更改時才會更新。例如，如果您修改了圖片資源或更改了 JavaScript 函式，這些更改不會重新快取。您必須修改清單檔案本身才能讓瀏覽器重新整理快取檔案。使用生成的版本號、檔案雜湊值或時間戳建立註釋行，可確保使用者獲得您的軟體的最新版。
您還可以在出現新版本後，以程式設計方式更新快取，如更新快取部分中所述。

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

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

  • CACHE：

這是條目的預設部分。系統會在首次下載此標頭下列出的檔案（或緊跟在 CACHE MANIFEST 後的檔案）後顯式快取這些檔案。

  • NETWORK：

此部分下列出的檔案是需要連線到伺服器的白名單資源。無論使用者是否處於離線狀態，對這些資源的所有請求都會繞過快取。可使用萬用字元。

  • FALLBACK：

此部分是可選的，用於指定無法訪問資源時的後備網頁。其中第一個 URI 代表資源，第二個代表後備網頁。兩個 URI 必須相關，並且必須與清單檔案同源。可使用萬用字元。
請注意：這些部分可按任意順序排列，且每個部分均可在同一清單中重複出現。

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

CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
index.html
css/style.css

# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html

# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

請注意：系統會自動快取引用清單檔案的 HTML 檔案。因此您無需將其新增到清單中，但我們建議您這樣做。

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

更新快取

應用在離線後將保持快取狀態，除非發生以下某種情況：

  1. 使用者清除了瀏覽器對您網站的資料儲存。
  2. 清單檔案經過修改。請注意：更新清單中列出的某個檔案並不意味著瀏覽器會重新快取該資源。清單檔案本身必須進行更改。
  3. 應用快取通過程式設計方式進行更新。

歡迎訂閱「K叔區塊鏈」 – 專注於區塊鏈技術學習

部落格地址：http://www.jouypub.com
簡書主頁：https://www.jianshu.com/u/756c9c8ae984
segmentfault主頁：https://segmentfault.com/blog/jouypub
騰訊雲主頁：https://cloud.tencent.com/developer/column/72548

相關文章