扣丁學堂HTML5開發manifest離線快取示例詳解

yifanwu發表於2021-09-09

  今天扣丁學堂老師給大家介紹一下關於HTML5開發manifest離線快取示例詳解,目前來說離線訪問對基於網路的應用而言越來越重要。雖然所有瀏覽器都有快取機制,但它們並不可靠,也不一定總能起到預期的作用。HTML5使用ApplicationCache介面解決了由離線帶來的部分難題,下面我們一起來看一下吧。

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

  離線瀏覽-使用者可在離線時瀏覽您的完整網站

  速度-快取資源為本地資源,因此載入速度較快。

  伺服器負載更少-瀏覽器只會從發生了更改的伺服器下載資源。

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

  引用清單檔案

  要啟用某個應用的應用快取,請在文件的html標記中新增manifest屬性:

  manifest屬性可指向絕對網址或相對路徑,但絕對網址必須與相應的網路應用同源。清單檔案可使用任何副檔名,但必須以正確的MIME型別提供(參見下文)。

  

  或

  

  您應在要快取的網路應用的每個頁面上都新增manifest屬性。如果網頁不包含manifest屬性,瀏覽器就不會快取該網頁(除非清單檔案中明確列出了該屬性)。

  這就意味著使用者瀏覽的每個包含manifest的網頁都會隱式新增到應用快取。因此,您無需在清單中列出每個網頁。

  清單檔案必須以text/cache-manifestMIME型別提供。檔案字尾名可以自定義(建議為.manifest)所以我們需要現在服務端將.manifest字尾的檔案型別宣告為text/cache-manifest。

  以apache為例,我們需要在httpd.conf中加上:AddTypetext/cache-manifest.manifest

  清單檔案結構

  簡單的清單格式如下:

  CACHEMANIFEST

  index.html

  stylesheet.css

  images/logo.png

  scripts/main.js

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

  您需要注意以下幾點:

  CACHEMANIFEST字串應在第一行,且必不可少。

  網站的快取資料量不得超過5MB。不過,如果您要編寫的是針對Chrome網上應用店的應用,可使用unlimitedStorage取消該限制。

  如果清單檔案或其中指定的資源無法下載,就無法進行整個快取更新程式。在這種情況下,瀏覽器將繼續使用原應用快取。

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

  CACHEMANIFEST

  #2018-08-14:v2

  #Explicitlycached'masterentries'.

  CACHE:

  /favicon.ico

  index.html

  stylesheet.css

  images/logo.png

  scripts/main.js

  #Resourcesthatrequiretheusertobeonline.

  NETWORK:

  login.php

  /myapi

  

  #static.htmlwillbeservedifmain.pyisinaccessible

  #offline.jpgwillbeservedinplaceofallimagesinimages/large/

  #offline.htmlwillbeservedinplaceofallother.htmlfiles

  FALLBACK:

  /main.py/static.html

  images/large/images/offline.jpg

  *.html/offline.html

  以“#”開頭的行是註釋行,但也可用於其他用途。例如更新快取

  應用快取只在其清單檔案發生更改時才會更新。例如,如果您修改了圖片資源或更改了JavaScript函式,這些更改不會重新快取。您必須修改清單檔案本身才能讓瀏覽器重新整理快取檔案。使用生成的版本號、檔案雜湊值或時間戳建立註釋行,可確保使用者獲得您的軟體的最新版。

  您還可以在出現新版本後,以程式設計方式更新快取,如更新快取部分中所述。

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

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

  CACHE:

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

  NETWORK:

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

  FALLBACK:

  此部分是可選的,用於指定無法訪問資源時的後備網頁。其中第一個URI代表資源,第二個代表後備網頁。兩個URI必須相關,並且必須與清單檔案同源。可使用萬用字元。

  請注意:這些部分可按任意順序排列,且每個部分均可在同一清單中重複出現。

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

  CACHEMANIFEST

  #2018-08-14:v3

  #Explicitlycachedentries

  index.html

  css/style.css

  #offline.htmlwillbedisplayediftheuserisoffline

  FALLBACK:

  //offline.html

  #Allotherresources(e.g.sites)requiretheusertobeonline.

  NETWORK:

  *

  #Additionalresourcestocache

  CACHE:

  images/logo1.png

  images/logo2.png

  images/logo3.png

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

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

  更新快取

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

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

  以上就是扣丁學堂HTML5開發manifest離線快取示例詳解的全部內容,希望對大家的學習有所幫助,也希望大家多多支援扣丁學堂。



作者:扣丁學堂
連結:


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2157/viewspace-2812485/,如需轉載,請註明出處,否則將追究法律責任。

相關文章