HTML5 manifest離線緩存

時間 2019-11-16

標籤 html5 html manifest 離線緩存欄目 HTML5 简体版

原文原文鏈接

簡介

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

使用緩存接口可爲您的應用帶來如下三個優點：css

離線瀏覽 - 用戶可在離線時瀏覽您的完整網站
速度 - 緩存資源爲本地資源，所以加載速度較快。
服務器負載更少 - 瀏覽器只會從發生了更改的服務器下載資源。

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

引用清單文件

要啓用某個應用的應用緩存，請在文檔的 html 標記中添加 manifest 屬性：
manifest 屬性可指向絕對網址或相對路徑，但絕對網址必須與相應的網絡應用同源。清單文件可以使用任何文件擴展名，但必須以正確的 MIME 類型提供（參見下文）。apache

<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 .manifestsegmentfault

清單文件結構

簡單的清單格式以下：api

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 提供的網頁可實現離線運行。