扣丁學堂HTML5開發manifest離線快取示例詳解
今天扣丁學堂老師給大家介紹一下關於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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- HTML5 manifest離線快取HTML快取
- HTML5離線儲存Manifest原理及使用詳解HTML
- 扣丁學堂大資料開發之Hive基礎知識精華講解大資料Hive
- 快取專題:HTML5離線快取與HTTP快取快取HTMLHTTP
- 離線快取快取
- 如何學好Python 扣丁學堂Python好學不Python
- 深入理解HTML5離線快取機制HTML快取
- 離線儲存manifest
- ServiceWorker 快取離線化快取
- 實現AVPlayer離線快取快取
- Service Worker學習與實踐(一)——離線快取快取
- HTML5應用程式快取Application Cache詳解HTML快取APP
- Mybatis快取詳解MyBatis快取
- Redis詳解(十二)------ 快取穿透、快取擊穿、快取雪崩Redis快取穿透
- 詳解NSURLCache快取引發的安全漏洞快取
- 借用workbox實現離線快取應用快取
- 給Retrofit新增離線快取,支援Post請求快取
- Android WebView 實現離線快取閱讀AndroidWebView快取
- 快點說小程式開發詳解
- 深入Nginx + PHP 快取詳解NginxPHP快取
- JuiceFS 快取預熱詳解UI快取
- 瀏覽器快取詳解瀏覽器快取
- 快取問題(四) 快取穿透、快取雪崩、快取併發 解決案例快取穿透
- 【高併發簡單解決方案】redis快取佇列+mysql 批量入庫+php離線整合Redis快取佇列MySqlPHP
- 快取穿透詳解及解決方案快取穿透
- 聊一聊 H5 應用快取 - ManifestH5快取
- nginx快取使用詳解,nginx快取使用及配置步驟Nginx快取
- http強制快取、協商快取、指紋ETag詳解HTTP快取
- 詳解cookie、session和HTTP快取CookieSessionHTTP快取
- 前端離線開發指南前端
- HTML5 學習筆記 應用程式快取HTML筆記快取
- 咖啡汪日誌——實際開發中如何避免快取穿透和快取雪崩(程式碼示例實際展示)快取穿透
- iOS OpenGL ES FBO 幀快取區 渲染快取區詳解iOS快取
- Hibernate中一級快取和二級快取使用詳解快取
- 深度詳解GaussDB bufferpool快取策略快取
- 瀏覽器快取機制詳解瀏覽器快取
- Spring 整合 Ehcache 管理快取詳解Spring快取
- MySQL查詢快取引數詳解MySql快取