首頁  >  文章  >  web前端  >  html5 如何做到application cache?離線儲存技術的簡要說明

html5 如何做到application cache?離線儲存技術的簡要說明

青灯夜游
青灯夜游原創
2018-09-08 17:07:421586瀏覽

本章我們要跟大家介紹用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 &#39;UNCACHED&#39;; 
    break; 
  case appCache.IDLE: // IDLE == 1 
    return &#39;IDLE&#39;; 
    break; 
  case appCache.CHECKING: // CHECKING == 2 
    return &#39;CHECKING&#39;; 
    break; 
  case appCache.DOWNLOADING: // DOWNLOADING == 3 
    return &#39;DOWNLOADING&#39;; 
    break; 
  case appCache.UPDATEREADY: // UPDATEREADY == 4 
    return &#39;UPDATEREADY&#39;; 
    break; 
  case appCache.OBSOLETE: // OBSOLETE == 5 
    return &#39;OBSOLETE&#39;; 
    break; 
  default: 
    return &#39;UKNOWN CACHE STATUS&#39;; 
    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&#39;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(&#39;test&#39;).value = new Date();
}, 1000);



以上是html5 如何做到application cache?離線儲存技術的簡要說明的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn