HTML5 離線應用程式打造零請求、無流量網站的解決方法_html5教學技巧

前言

今天Web應用程式已經很複雜了，以現在的發展，將會越來越複雜，但他有一個致命缺點，不能脫離internet鏈接，因此在HTML中新增了一API，

它使用一個本地儲存機制很好地解決了這個問題，為離線web應用鋪平了道路。
本地快取於瀏覽器快取

複製程式碼

複製程式碼

複製碼

本地快取是為整個web應用程式服務

瀏覽器快取只對單一網頁服務

任何網頁都有網頁快取
本地快取只快取那些你指定快取的頁面

網頁快取不可靠、不安全，因為我們不知道網站中到底快取了哪些頁面、哪些資源本地快取可以控制哪些內容進行快取

manifest文件

web應用程式本地快取是透過每個頁面的manifest檔案來管理的，manifest是一簡單文本，在該檔案中以清單的形式列舉了需要被快取的不需要被快取的檔案的名字、路徑。

可以為每個頁面單獨指定manifest也可以為整個應用程式指定，例我們為hello.htm的設定：

複製程式碼

複製程式碼


代碼如下:


CACHE MANIFEST
CACHE:
other.html
hellow.js
images/myphoto.jpgI> :
http://LuLinniu/NotOffline
NotOffline.asp

*
FALLBACK:
online.js locale.jsCACHE:

newh.htmlCACHE:
newh.html

在manifest檔案中，第一行必須是CACHE MANIFEST，以把文字的作用告訴瀏覽器，也就是對本地快取中的資源檔案進行具體設定。 同時真正運行離線web應用程式時，需要對伺服器進行配置，讓伺服器支援text/cache-manifest這個mime類型。 在指定文件源文件時可以把資源文件分為三類，CACHE、NETWORK、FALLBACK

複製代碼
代碼如下:

在CACHE類別中指定需要緩存在本地的資源文件，為某個頁面指定需要本地快取的資源文件時，不需要把這個頁面本身指定在CACHE類別中，
因為如果一個頁面具有manifest文件，瀏覽器會自動對該頁面進行本機快取

NETWORK類別為明確指定不進行快取的資源文件，這些文件只有建立伺服器端連結才能訪問，本例使用通配符*表示沒有進行記錄的都不緩存

FALLBACK類別中的每行中指定兩個資源文件，第一個資源文件為能夠在線訪問時使用的資源文件，第二個為不能在線訪問時使用的本地緩存文件

瀏覽器與伺服器互動過程 當使用離線web應用程式進行工作時，有必要了解瀏覽器與伺服器之間的互動過程：

複製程式碼


代碼如下:


例如一個http://LuLingniu，以index.htm為主頁，該主頁使用index.manifest，
在文件中緩存index.htm， hello.js，hello.jpg，首次造訪時流程如下：
瀏覽器請求url
伺服器返回index.htm首頁
瀏覽器解析index.htm網頁，請求頁面上所有資源檔案
伺服器返回資源檔案
瀏覽器處理manifest文件，請求manifest中需要快取的文件，即使請求過亦會再請求

伺服器傳回需要快取的文件 瀏覽器對本地快取更新，存入資源文件，並觸發一個事件通知本地快取更新

再次開啟該URL 請求url 瀏覽器發現頁面被緩存，於是使用本地快取檔案 解析檔案 瀏覽器像伺服器請求manifest檔 伺服器回傳304，通知manifest檔案沒有變更（若是變更將會有所不同）
applicationCache物件

該物件代表了本地緩存，可以用它來通知用戶本地快取已經更新，也允許手動更新本地快取。

前面當瀏覽器對本機快取做了更新裝入新資源檔案時，會觸發applicationCache物件的updateready事件，通知本機快取已被修改，然後提示使用者手動重新整理頁面。
swapCache

swapCache方法用來手動執行本地快取的更新，它只能在applicationCache物件的updateReady事件觸發時調用，

即當資源檔案改變時，可使用此方法手動快取更新。