首頁 >web前端 >H5教程 >html5 如何做到application cache？離線儲存技術的簡要說明

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

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

本章我們要跟大家介紹用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中文網其他相關文章！

html5 JS 对象

陳述：

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

上一篇：如何使用插件數字滾動插件numberAnimate.js？下一篇：如何使用插件數字滾動插件numberAnimate.js？

看更多