HTML5 應用程式快取

Created: October-16, 2018

你可以使用 HTML5 快取功能建立離線應用程式。

什麼是應用快取

通常，大多數基於 Web 的應用程式僅在你線上時才有效。但是 HTML5 引入了一種應用程式快取機制，允許瀏覽器自動儲存 HTML 檔案以及需要在本地計算機上正確顯示它的所有其他資源，這樣瀏覽器仍然可以訪問網頁及其資源而無需網際網路連線。

以下是使用 HTML5 應用程式快取功能的一些優點：

離線瀏覽 - 即使使用者離線或網路連線出現意外中斷，使用者也可以使用該應用程式。
提高效能 - 快取資源直接從使用者的計算機而不是遠端伺服器載入，因此網頁載入速度更快，效能更好。
減少 HTTP 請求和伺服器負載 - 瀏覽器只需從遠端伺服器下載更新/更改的資源，以最小化 HTTP 請求並減少伺服器負載。

提示： 所有主要的現代瀏覽器（如 Firefox，Chrome，Opera，Safari 和 Internet Explorer 10+）都支援 HTML5 的應用程式快取功能。

使用清單快取檔案

要快取檔案以供離線使用，你需要完成以下步驟：

第 1 步：建立快取清單檔案

清單是一個特殊的文字檔案，它告訴瀏覽器要儲存哪些檔案，不儲存哪些檔案以及要用其他檔案替換哪些檔案。清單檔案始終以單詞 CACHE MANIFEST （大寫）開頭。以下是一個簡單的清單檔案的示例：

CACHE MANIFEST
# v1.0 : 10-08-2014
 
CACHE:
# pages
index.html
 
# styles & scripts
css/theme.css
js/jquery.min.js
js/default.js
 
# images
/favicon.ico
images/logo.png
 
NETWORK:
login.php
 
FALLBACK:
/ /offline.html

程式碼說明

你可能會想到該程式碼的全部內容。好的，讓我們直接進入它。清單檔案可以有三個不同的部分：CACHE，NETWORK 和 FALLBACK。

CACHE: 部分標題下列出的檔案（或緊接 CACHE MANIFEST 在行之後）在第一次下載後顯式快取。
NETWORK: 部分標題下列出的檔案是列出白名單的資源，這些資源從不快取且不可離線使用。
FALLBACK: 部分指定瀏覽器在無法建立與伺服器的連線時應使用的回退頁面。本節中的每個條目都列出了兩個 URI - 第一個是資源，第二個是後備。
以 # 開頭的行是註釋行。

警告： 不要在快取清單檔案中指定清單檔案本身，否則幾乎不可能通知瀏覽器新的清單可用。

第 2 步：使用你的快取清單檔案

建立後，在 Web 伺服器上上載快取清單檔案 - 確保 Web 伺服器配置為使用 MIME 型別 text/cache-manifest 提供清單檔案。

現在要使快取清單生效，你需要在網頁中啟用它，方法是將清單屬性新增到根元素，如下所示： <html>

<!DOCTYPE html>
<html lang="en" manifest="example.appcache">
<head>
    <title>HTML5 Application Cache</title>
</head>
<body>
    <!--The document content will be inserted here-->
</body>
</html>

注意： 在 Apache Web 伺服器上，可以通過新增 AddType text/cache-manifest .appcache 到 .htaccess 應用程式根目錄中的檔案來設定 manifest（ .appcache）檔案的 MIME 型別。