當前位置 : IT培訓網 > Web前端 > Web教程 > 如何快速學會HTML5應用程序緩存

如何快速學會HTML5應用程序緩存

時間:2016-12-09 15:29:39??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
如果你也有自己的小站,是網頁設計者一員,趕緊使用HTML5應用程序緩存來設置下吧,讓自己的網頁離線也可以瀏覽,讓自己的網頁加載速度更快,讓自己的服務器負載更小,想要學習趕快來,HTML5培訓班已經開始了,早日報名早日

網頁天天在更新,為何在首頁看不到更新的內容呢,很多不懂的人都感覺很神奇,其實沒有什么神奇的,這是因為網頁開啟了緩存,當你再次瀏覽這個頁面的時候都會調用本地的緩存,只有再次刷新頁面之后才會顯示最新的頁面。這樣做的好處就是減少服務器的壓力,提升網頁打開的速度,那么這個功能是如何實現的呢,哪些瀏覽器支持緩存呢?

HTML5 應用程序緩存

使用 HTML5,通過創建 cache manifest 文件,可以輕松地創建 web 應用的離線版本。

什么是應用程序緩存(Application Cache)?

HTML5 引入了應用程序緩存,這意味著 web 應用可進行緩存,并可在沒有因特網連接時進行訪問。

應用程序緩存為應用帶來三個優勢:

離線瀏覽 - 用戶可在應用離線時使用它們

速度 - 已緩存資源加載得更快

減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。

瀏覽器支持

如何快速學會HTML5應用程序緩存_www.oalvodamoda.com

Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 支持應用程序緩存.

HTML5 Cache Manifest 實例

下面的例子展示了帶有 cache manifest 的 HTML 文檔(供離線瀏覽):

實例

<!DOCTYPE HTML>

<html manifest="demo.appcache">

 

<body>

文檔內容......

</body>

</html>

源代碼:

<!DOCTYPE html>

<html manifest="demo_html.appcache">

<head>

<meta charset="UTF-8">

<title>IT培訓網(www.oalvodamoda.com)</title>

</head>

<body>

<script src="demo_time.js">

</script>

<p id="timePara"><button onclick="getDateTime()">獲取日期和時間</button></p>

<p><img src="logo.png" width="336" height="69"></p>

<p>嘗試打開 <a href="tryhtml5_html_manifest.htm" target="_blank">這個頁面</a>, 在離線的狀態下重新載入這個頁面,頁面也可以訪問。</p>

</body>

</html>

運行結果:

Fri Dec 09 2016 15:18:48 GMT+0800 (中國標準時間)

嘗試打開 這個頁面, 在離線的狀態下重新載入這個頁面,頁面也可以訪問。

Cache Manifest 基礎

如需啟用應用程序緩存,請在文檔的<html> 標簽中包含 manifest 屬性:

<!DOCTYPE HTML>

<html manifest="demo.appcache">

...

</html>

每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定 manifest 屬性,則頁面不會被緩存(除非在 manifest 文件中直接指定了該頁面)。

manifest 文件的建議的文件擴展名是:".appcache"。

Remark 請注意,manifest 文件需要配置正確的 MIME-type,即 "text/cache-manifest"。必須在 web 服務器上進行配置。

Manifest 文件

manifest 文件是簡單的文本文件,它告知瀏覽器被緩存的內容(以及不緩存的內容)。

manifest 文件可分為三個部分:

CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存

NETWORK - 在此標題下列出的文件需要與服務器的連接,且不會被緩存

FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面(比如 404 頁面)

CACHE MANIFEST

第一行,CACHE MANIFEST,是必需的:

CACHE MANIFEST

/theme.css

/logo.gif

/main.js

上面的 manifest 文件列出了三個資源:一個 CSS 文件,一個 GIF 圖像,以及一個 JavaScript 文件。當 manifest 文件加載后,瀏覽器會從網站的根目錄下載這三個文件。然后,無論用戶何時與因特網斷開連接,這些資源依然是可用的。

NETWORK

下面的 NETWORK 小節規定文件 "login.php" 永遠不會被緩存,且離線時是不可用的:

NETWORK:

login.php

可以使用星號來指示所有其他其他資源/文件都需要因特網連接:

NETWORK:

*

FALLBACK

下面的 FALLBACK 小節規定如果無法建立因特網連接,則用 "offline.html" 替代 /html5/ 目錄中的所有文件:

FALLBACK:

/html/ /offline.html

注意: 第一個 URI 是資源,第二個是替補。

更新緩存

一旦應用被緩存,它就會保持緩存直到發生下列情況:

用戶清空瀏覽器緩存

manifest 文件被修改(參閱下面的提示)

由程序來更新應用緩存

實例 - 完整的 Manifest 文件

CACHE MANIFEST

# 2012-02-21 v1.0.0

/theme.css

/logo.gif

/main.js

 

NETWORK:

login.php

 

FALLBACK:

/html/ /offline.html

Remark提示:以 "#" 開頭的是注釋行,但也可滿足其他用途。應用的緩存會在其 manifest 文件更改時被更新。如果您編輯了一幅圖片,或者修改了一個 JavaScript 函數,這些改變都不會被重新緩存。更新注釋行中的日期和版本號是一種使瀏覽器重新緩存文件的辦法。

關于應用程序緩存的說明

請留心緩存的內容。

一旦文件被緩存,則瀏覽器會繼續展示已緩存的版本,即使您修改了服務器上的文件。為了確保瀏覽器更新緩存,您需要更新 manifest 文件。

注意: 瀏覽器對緩存數據的容量限制可能不太一樣(某些瀏覽器設置的限制是每個站點 5MB)。

如果你也有自己的小站,是網頁設計者一員,趕緊使用HTML5應用程序緩存來設置下吧,讓自己的網頁離線也可以瀏覽,讓自己的網頁加載速度更快,讓自己的服務器負載更小,想要學習趕快來,HTML5培訓班已經開始了,早日報名早日學會HTML5。

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天