小猿圈web前端開發之HTML5 manifest離線緩存的示例

在學習前端的小伙伴都在迷茫，遇到問題該怎么辦？怎么去處理，找不到老師怎么辦？這些也是小猿圈web前端老師擔心的，以后每天小猿圈都會為大家分享一些關于學習前端中的一些小問題，今天分享的是HTML5 manifest離線緩存的示例。

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

使用緩存接口可為您的應用帶來以下三個優勢：

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

速度-緩存資源為本地資源，因此加載速度較快。

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

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

引用清單文件

要啟用某個應用的應用緩存，請在文檔的html標記中添加manifest屬性：

manifest屬性可指向絕對網址或相對路徑，但絕對網址必須與相應的網絡應用同源。清單文件可使用任何文件擴展名，但必須以正確的MIME類型提供。

<htmlmanifest="/cache.manifest">

...

</html>

或

<htmlmanifest="http://www.example.com/example.mf">

...

</html>

您應在要緩存的網絡應用的每個頁面上都添加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

#2010-06-18:v2

#Explicitlycached'masterentries'.

CACHE:

/favicon.ico

index.html

stylesheet.css

images/logo.png

scripts/main.js

#Resourcesthatrequiretheusertobeonline.

NETWORK:

/myapi

http://api.twitter.com

#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

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

更新緩存

應用在離線后將保持緩存狀態，除非發生以下某種情況：

用戶清除了瀏覽器對您網站的數據存儲。

清單文件經過修改。請注意：更新清單中列出的某個文件并不意味著瀏覽器會重新緩存該資源。清單文件本身必須進行更改。

應用緩存通過編程方式進行更新。

今天的知識點就分享到這里了，有需要的朋友歡迎點贊評論轉發，想了解更對web前端內容的朋友可以關注小猿圈的每天的動態，會不定時更新很多更好的內容奉獻給大家，希望對你的學習有所幫助。

、XHTML與HTML的區別

文檔結構

XHTML DOCTYPE 是強制性的

<html>中的 XML namespace 屬性是強制性的

<html>、<head>、<title>以及 <body>也是強制性的

元素語法

XHTML 元素必須正確嵌套

XHTML 元素必須始終關閉

XHTML 元素必須小寫

XHTML 文檔必須有一個根元素

屬性語法

XHTML 屬性必須使用小寫

XHTML 屬性值必須用引號包圍

XHTML 屬性最小化也是禁止的

二、HTML5中一些新特性

用于繪畫的 canvas 元素

用于媒介回放的 video 和 audio 元素

對本地離線存儲的更好的支持

新的特殊內容元素，比如 article、footer、header、nav、section

新的表單控件，比如 calendar、date、time、email、url、search

注意：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。

IE9 以下版本瀏覽器兼容HTML5的方法，使用本站的靜態資源的html5shiv包：

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

? ?/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

三、HTML5web存儲

使用HTML5可以在本地存儲用戶的瀏覽數據。

早些時候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速. 這些數據不會被保存在服務器上，但是這些數據只用于用戶請求網站數據上.它也可以存儲大量的數據，而不影響網站的性能.

數據以鍵/值對存在, web網頁的數據只允許該網頁訪問使用。

瀏覽器支持：

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲。

注意: Internet Explorer 7 及更早IE版本不支持web 存儲.

localStorage 和 sessionStorage

客戶端存儲數據的兩個對象為：

localStorage - 用于長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。

sessionStorage - 用于臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。

在使用 web 存儲前,應檢查瀏覽器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 對象!
    // 一些代碼.....
} else {
    // 抱歉! 不支持 web 存儲。
}

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：

保存數據：localStorage.setItem(key,value);

讀取數據：localStorage.getItem(key);

刪除單個數據：localStorage.removeItem(key);

刪除所有數據：localStorage.clear();

得到某個索引的key：localStorage.key(index);

四、HTML5 應用程序緩存

HTML5 -應用程序緩存=>使用文章鏈接跳轉點這里

五、HTML5 服務器發送事件（Server-Sent Events）

Server-Sent 事件指的是網頁自動獲取來自服務器的更新。

以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件，更新能夠自動到達。

例子：Facebook/Twitter 更新、股價更新、新的博文、賽事結果等。

所有主流瀏覽器均支持服務器發送事件，除了 Internet Explorer。

<h1>獲取服務端更新數據</h1>
<div id="result"></div>

if(typeof(EventSource)!=="undefined")
{
	var source=new EventSource("demo_sse.php");
	source.onmessage=function(event)
	{
		document.getElementById("result").innerHTML+=event.data + "<br>";
	};
}
else
{
	document.getElementById("result").innerHTML="抱歉，你的瀏覽器不支持 server-sent 事件...";
}

六、HTML5 WebSocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸。

在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

現在，很多網站為了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。

HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，并且能夠更實時地進行通訊。

詳情和代碼示例：.

七、HTTP狀態消息

1xx: 信息

2xx: 成功

3xx: 重定向

4xx: 客戶端錯誤

5xx: 服務器錯誤

詳情

八、HTTP 方法：GET 對比 POST

兩種最常用的 HTTP 方法是：GET 和 POST。

什么是 HTTP ？

超文本傳輸協議（HTTP）的設計目的是保證客戶端與服務器之間的通信。

HTTP 的工作方式是客戶端與服務器之間的請求-應答協議。

web 瀏覽器可能是客戶端，而計算機上的網絡應用程序也可能作為服務器端。

舉例：客戶端（瀏覽器）向服務器提交 HTTP 請求；服務器向客戶端返回響應。響應包含關于請求的狀態信息以及可能被請求的內容。

GET - 從指定的資源請求數據。

POST - 向指定的資源提交要被處理的數據。

GET 方法

請注意，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的：

/test/demo_form.php?name1=value1&name2=value2

有關 GET 請求的其他一些注釋：

GET 請求可被緩存

GET 請求保留在瀏覽器歷史記錄中

GET 請求可被收藏為書簽

GET 請求不應在處理敏感數據時使用

GET 請求有長度限制

GET 請求只應當用于取回數據

POST 方法

請注意，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的：

有關 POST 請求的其他一些注釋：

POST 請求不會被緩存

POST 請求不會保留在瀏覽器歷史記錄中

POST 不能被收藏為書簽

POST 請求對數據長度沒有要求

其他 HTTP 請求方法

下面的表格列出了其他一些 HTTP 請求方法：

原文鏈接：https://blog.csdn.net/weixin_39834961/article/details/103765680
作者：yhlyeah

、XHTML與HTML的區別

文檔結構

XHTML DOCTYPE 是強制性的

<html>中的 XML namespace 屬性是強制性的

<html>、<head>、<title>以及 <body>也是強制性的

元素語法

XHTML 元素必須正確嵌套

XHTML 元素必須始終關閉

XHTML 元素必須小寫

XHTML 文檔必須有一個根元素

屬性語法

XHTML 屬性必須使用小寫

XHTML 屬性值必須用引號包圍

XHTML 屬性最小化也是禁止的

二、HTML5中一些新特性

用于繪畫的 canvas 元素

用于媒介回放的 video 和 audio 元素

對本地離線存儲的更好的支持

新的特殊內容元素，比如 article、footer、header、nav、section

新的表單控件，比如 calendar、date、time、email、url、search

注意：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。

IE9 以下版本瀏覽器兼容HTML5的方法，使用本站的靜態資源的html5shiv包：

三、HTML5web存儲

使用HTML5可以在本地存儲用戶的瀏覽數據。

數據以鍵/值對存在, web網頁的數據只允許該網頁訪問使用。

瀏覽器支持：

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲。

注意: Internet Explorer 7 及更早IE版本不支持web 存儲.

localStorage 和 sessionStorage

客戶端存儲數據的兩個對象為：

localStorage - 用于長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。

sessionStorage - 用于臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。

在使用 web 存儲前,應檢查瀏覽器是否支持 localStorage 和sessionStorage:

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：

保存數據：localStorage.setItem(key,value);

讀取數據：localStorage.getItem(key);

刪除單個數據：localStorage.removeItem(key);

刪除所有數據：localStorage.clear();

得到某個索引的key：localStorage.key(index);

四、HTML5 應用程序緩存

HTML5 -應用程序緩存=>使用文章鏈接跳轉點這里

五、HTML5 服務器發送事件（Server-Sent Events）

Server-Sent 事件指的是網頁自動獲取來自服務器的更新。

以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件，更新能夠自動到達。

例子：Facebook/Twitter 更新、股價更新、新的博文、賽事結果等。

所有主流瀏覽器均支持服務器發送事件，除了 Internet Explorer。

六、HTML5 WebSocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，并且能夠更實時地進行通訊。

詳情和代碼示例：

七、HTTP狀態消息

1xx: 信息

2xx: 成功

3xx: 重定向

4xx: 客戶端錯誤

5xx: 服務器錯誤

詳情

八、HTTP 方法：GET 對比 POST

兩種最常用的 HTTP 方法是：GET 和 POST。

什么是 HTTP ？

超文本傳輸協議（HTTP）的設計目的是保證客戶端與服務器之間的通信。

HTTP 的工作方式是客戶端與服務器之間的請求-應答協議。

web 瀏覽器可能是客戶端，而計算機上的網絡應用程序也可能作為服務器端。

舉例：客戶端（瀏覽器）向服務器提交 HTTP 請求；服務器向客戶端返回響應。響應包含關于請求的狀態信息以及可能被請求的內容。

GET - 從指定的資源請求數據。

POST - 向指定的資源提交要被處理的數據。

GET 方法

請注意，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的：

有關 GET 請求的其他一些注釋：

GET 請求可被緩存

GET 請求保留在瀏覽器歷史記錄中

GET 請求可被收藏為書簽

GET 請求不應在處理敏感數據時使用

GET 請求有長度限制

GET 請求只應當用于取回數據

POST 方法

請注意，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的：

有關 POST 請求的其他一些注釋：

POST 請求不會被緩存

POST 請求不會保留在瀏覽器歷史記錄中

POST 不能被收藏為書簽

POST 請求對數據長度沒有要求

下面的表格列出了其他一些 HTTP 請求方法：

最后送福利了，自己是從事了五年的前端工程師，整理了一份最全面前端學習資料，只要私信：“前端"等3秒后即可獲取地址，

里面概括應用網站開發，css，html，JavaScript，jQuery，Ajax，node，angular等。等多個知識點高級進階干貨的相關視頻資料，等你來拿

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

小猿圈web前端開發之HTML5 manifest離線緩存的示例

您的項目需求