h5離線快取是什麼? h5 manifest離線快取的應用(附代碼)

不言
發布: 2018-08-08 15:10:37
原創
2963 人瀏覽過

什麼是manifest? manifest是一個後綴名為minifest的文件,在文件中定義那些需要快取的文件,支援manifest的瀏覽器,會將按照manifest文件的規則,像文件保存在本地,從而在沒有網絡鏈接的情況下,也能訪問頁面。

離線存取對基於網路的應用而言越來越重要。雖然所有瀏覽器都有快取機制,但它們並不可靠,也不一定總是能起到預期的作用。 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. 應用程式快取透過程式設計方式進行更新。

相關文章推薦:

HTML5離線快取Manifest是什麼_html5教學技巧

H5應用快取-Manifest的具體介紹

#

以上是h5離線快取是什麼? h5 manifest離線快取的應用(附代碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板