本章我們要跟大家介紹用html5 如何做到application cache?簡要說明離線儲存技術。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
在HTML5之前,我們必須連接網路才能存取頁面。但隨著行動互聯網的興起,設備終端的位置不在固定。而行動裝置非常依賴無線訊號,可無線網路的可靠性並不穩定,例如在過隧道或是訊號強度弱的地方,無法存取網站,這無疑對使用者體驗是不好的,所以HTML5中的離線緩存(applicationCache)就解決了這個問題。
一:什麼是離線快取
##
HTML5離線快取又稱為applicationCache,為Html5新功能之一,簡單理解就是第一次載入後將資料緩存,在沒有清除快取前提下,下一次沒有網路也可以加載,用在靜態資料的網頁或遊戲比較好用。當然,Html5新的特性都不是所有瀏覽器都能支援的,離線快取也是一樣。反正IE9(包括)及IE9以下的瀏覽器目前是不支援的。如果用在行動端,應該都能支援。檢測是否支援離線快取也是比較簡單的。
<script> if(window.applicationCache){ alert("支持离线缓存"); } else{ alert("不支持离线缓存"); } </script>
二:使用方法
HTML5離線緩存,是從瀏覽器的快取中分出來的一塊快取區,若要在這個快取中保存數據,需要使用描述檔(. manifest),列出需要下載和快取的資源。
1.引入manifest檔
<!DOCTYPE html> <html> <head> <!--就是在这里引入,注意引入也是讲究路劲跟文件名的, 这里文件名是test,后缀是mainfest,路劲在当前的html下面 (一般放在html当前文件夹下面也没什么问题,我是这么放的)--> <html manifest="test.manifest"> <meta charset="UTF-8"> <title>html5 离线缓存</title> </head> <body> </body> </html>
2.引入完了之後,接下來就是test.mainfest檔案程式碼的寫了。
manifest 文件是簡單的文字文件,它會告知瀏覽器被快取的內容(以及不快取的內容)。
manifest 檔案可分為三個部分:
①CACHE MANIFEST - 在此標題下列出的檔案將在首次下載後進行快取
②NETWORK - 在此標題下列出的檔案需要與伺服器的連接,且不會被快取
③FALLBACK - 在此標題下列出的檔案規定當頁面無法存取時的回退頁面(例如404 頁面)
完整的程式碼
CACHE MANIFEST//必须以这个开头 version 1.0 //最好定义版本,更新的时候只需修改版本号 CACHE: m.png test.js test.css NETWORK: * FALLBACK online.html offline.html
manifest檔案需要設定正確的MIME-type,即“text/cache-manifest”,這個是在web伺服器上進行設定。
解析一下:
以#開頭的行表示的是註解。 CACHE下面的都是快取的文件,NETWORK表示每次都從網路請求,然後緩存,指定的文件總是從網路上請求最新的。 FALLBACK:指定的檔案若是找不到,會被重新導向到新的位址。規範都是大寫。
3.透過JS動態控制更新
應用程式在離線後將保持快取狀態,除非發生以下某種情況:
使用者清除了瀏覽器對您網站的資料儲存。
清單檔案經過修改。
請注意:更新清單中列出的某個檔案並不表示瀏覽器會重新快取該資源。清單文件本身必須進行更改。
1)快取狀態:window.applicationCache 物件是對瀏覽器的應用快取的程式存取方式。其 status 屬性可用於查看快取的目前狀態。
applicationCache.status的值如下:
0 === 未快取
1 === 空閒(快取為最新狀態)
2 === 檢查中
3 === 下載中
4 === 更新就緒
5 === 快取過期
var appCache = window.applicationCache; switch (appCache.status) { case appCache.UNCACHED: // UNCACHED == 0 return 'UNCACHED'; break; case appCache.IDLE: // IDLE == 1 return 'IDLE'; break; case appCache.CHECKING: // CHECKING == 2 return 'CHECKING'; break; case appCache.DOWNLOADING: // DOWNLOADING == 3 return 'DOWNLOADING'; break; case appCache.UPDATEREADY: // UPDATEREADY == 4 return 'UPDATEREADY'; break; case appCache.OBSOLETE: // OBSOLETE == 5 return 'OBSOLETE'; break; default: return 'UKNOWN CACHE STATUS'; break; };
2)主動更新快取:applicationCache.update()
<script> //利用定时器隔一定时间自动更新一下缓存 setInterval(function(){ applicationCache.update(); },50000);</script>
要以程式設計方式更新緩存,請先呼叫 applicationCache.update()。此操作將嘗試更新使用者的快取(前提是已更改清單檔案)。最後,當applicationCache.status 處於 UPDATEREADY 狀態時,呼叫 applicationCache.swapCache() 即可將原始快取換成新快取。
var appCache = window.applicationCache; appCache.update(); // Attempt to update the user's cache. ... if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache(); // The fetch was successful, swap in the new cache.
4.一個簡單的離線快取的應用程式
建立一個web工程AppCache,包含四個檔案:
appcache_offline.html
<html manifest="test.manifest"> <head> <title>AppCache Test</title> <link rel="stylesheet" href="test.css"> <script src="test.js"></script> </head> <body> <p><output id="test"></output></p> <div id="log"></div> </body> </html>
manifest檔案:test.manifest
CACHE MANIFEST #VERSION 1.0 CACHE: test.css
test.css
output { font: 2em sans-serif; }
test.js
setTimeout(function () { document.getElementById('test').value = new Date(); }, 1000);
以上是html5 如何做到application cache?離線儲存技術的簡要說明的詳細內容。更多資訊請關注PHP中文網其他相關文章!