HTML5離線快取

它的優勢在於：

ie10以下不支援，其餘的瀏覽器都支援。

補充瀏覽器及其核心：

ie = trident

ff = gecko

chrome = blink

opera = blink(曾經使用presto)

safari = webkit

"">"

timepara
">"
getdatetime()
">獲取日期和時間
logo.png
" width="
336" height="
69">
嘗試開啟 "
tryhtml5_html_manifest.htm
" target="
_blank
">這個頁面, 在離線的狀態下重新載入這個頁面，頁面也可以訪問。

注意：請注意，manifest 檔案需要配置正確的 mime-type，即 "text/cache-manifest"。必須在 web 伺服器上進行配置。

manifest檔案說明

manifest檔案可以分為三個主要部分: 即

cache manifest - 即在這個選項後面的檔案都會被快取 

network - 即在這個選項後面的檔案都不會被快取，而是從網路獲取

fallback - 即這個選項表示如果404則去往那個頁面。

如下面是乙個manifest檔案。

注意 :  #是注釋， /用來表示相對路徑。

cache manifest

# 這下面的檔案會被快取
/test.css
/test.png
/test.js
network
#即這下面的檔案不能被快取，只能從伺服器端獲取
/test2.js
fallback
#即這下面的頁面時訪問出錯會導向的頁面
/404.html

即在快取中快取了4個檔案，乙個是js檔案，乙個是html檔案，還有乙個png檔案，最後就是不可缺少的 manifest配置檔案。   

注意：這裡我沒有為了方便演示，不再使用其他的兩項

第三步：這時我們先啟動本地伺服器（我使用的是xampp），然後開啟頁面。

第四步：關閉本地伺服器之後再使用localhost的方式開啟頁面，可以發現還是可以看到的，如下所示：

ok！  建立離線應用成功！

說明： 我使用在第四步中關閉本地伺服器的方式來模仿離線（本質是一樣的，都是不能通過http獲取到資源了）

第五步： 我在html原始檔中修改了文字，由 「這個頁面可以離線檢視」 修改為 「這個頁面可以離線檢視，內容已經修改...」，但是在頁面上的顯示還是原來的樣子，無論我開啟本地伺服器與否！！！！

問題：  那這樣，使用者就無法看到實時地資訊了，而是看到的都是第一次快取下來的資訊。

原因剖析：  頁面每次使用的都是快取的檔案，無論伺服器上的檔案更新與否！

並沒有用。。。。。

注意：一旦檔案被快取，則瀏覽器會繼續展示已快取的版本，即使您修改了伺服器上的檔案！！！

別急，想要解決這些問題，就接著往下看吧！

cache.swapcache()                             --- updateready 之後，更新到最新的應用快取

繼續回到剛才的例子：

如果我們是第一次開啟這個檔案，則是應該從狀態0開始檢測，然後快取檔案.....   而這裡已經快取過了，所以就只剩下下面這麼多步驟了。

當我們重新進入這個頁面的時候，可以看到控制台如下：

並且如果配置檔案沒有變，每次重新載入都是這樣的提示。

即狀態從0 到 5的過程全有了。

值得注意的是，只有我們修改配置檔案的時候，html的內容才會隨著改變，如果我們僅僅修改文字，而不改配置檔案（如之前的那樣），最終還是使用的快取，而不會自動修改為最新的html內容。

未完待續....

html5 離線快取

本文將介紹離線快取的方方面面，並在最後會介紹一下關於自動化的問題。html5之前的網頁，都是無連線，必須聯網才能訪問，這其實也是web的特色，這其實對於pc是時代問題並不大，但到了移動網際網路時代，裝置終端位置不再固定，依賴無線訊號，網路的可靠性變得降低，比如坐在火車上，過了乙個隧道 15分鐘 便無...

html5的離線快取

html5 引入了應用程式快取，這意味著web應用可以進行快取，並且可以在沒有網路連線的時候進行訪問。1 離線瀏覽 使用者可以在應用離線時使用它們 2 速度更快 已快取資源，載入得更快 有乙個web應用有三個檔案index.html,a.js,b.css，現在需要把js和css檔案快取起來 1.在i...

HTML 5 離線和快取

1.離線應用 cache manifest cache 之後的資源都會被快取 cache main.html style.css main.js network 之後的資源不會被快取，總是從線上獲取 network account 如果離線化應用程式，只需將 html 檔案 和 manifest 描...