HTML5 應用程式快取
什麼是應用程式快取(Application Cache)?
HTML5 引入了應用程式緩存,這表示 web 應用程式可進行緩存,並可在沒有網際網路連線時存取。
應用程式快取為應用程式帶來三個優點:
## 1. 離線瀏覽- 使用者可在應用離線時使用它們 2. 速度- 已快取資源加載更快 3. 減少伺服器負載- 瀏覽器只會從伺服器下載更新過或變更過的資源。 HTML5,透過建立 cache manifest 文件,可以輕鬆建立 web 應用的離線版本。瀏覽器支援
HTML5 Cache Manifest 實例
下面的範例展示了帶有cache manifest 的HTML 文件(供離線瀏覽):<!DOCTYPE html> <html manifest="demo_html.appcache"> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <script src="demo_time.js"> </script> <p id="timePara"><button onclick="getDateTime()">获取日期和时间</button></p> <p><img src="http://img.taopic.com/uploads/allimg/130512/240477-130512133S924.jpg" width="336" height="69"></p> <p>尝试打开 <a href="" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面,页面也可以访问。</p> </body> </html>
Cache Manifest 基礎
如需啟用應用程式緩存,請在文件的<html> 標籤中包含manifest 屬性:<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
' 每個指定了manifest 的頁面在使用者對其存取時都會被快取。如果未指定 manifest 屬性,則頁面不會被快取(除非在 manifest 檔案中直接指定了該頁面)。 manifest 檔案的建議的檔案副檔名是:".appcache"。
下面的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
##提示# :以"#" 開頭的是註解行,但也可滿足其他用途。應用程式的快取會在其 manifest 檔案更改時被更新。如果您編輯了一幅圖片,或修改了一個 JavaScript 函數,這些變更都不會重新快取。更新註解行中的日期和版本號碼是一種使瀏覽器重新快取檔案的方法。
關於應用程式快取的說明
請留心快取的內容。 一旦檔案被緩存,瀏覽器會繼續展示已快取的版本,即使您修改了伺服器上的檔案。為了確保瀏覽器更新緩存,您需要更新 manifest 檔案。 注意: 瀏覽器對快取資料的容量限制可能不太一樣(某些瀏覽器設定的限制是每個網站 5MB)。