首頁 > web前端 > H5教程 > html5之創建離線Web應用程式的範例程式碼

html5之創建離線Web應用程式的範例程式碼

黄舟
發布: 2017-03-15 15:57:24
原創
1680 人瀏覽過

離線應用程式快取功能允許我們指定網路應用程式所需的全部資源,

這樣瀏覽器就能在載入HTML文件時把它們都下載下來。

1)定義瀏覽器快取:

啟用離線快取-建立一個清單文件,並在html元素的manifest屬性引用它;

指定離線應用程式裡要快取的資源-在清單檔案的頂部或CACHE區域列出資源;

#指定資源不可用時要顯示的備用內容-在清單檔案的FALLBACK區域列出內容;

#指向總是向伺服器請求的資源-在清單檔案的BETWORK區域列出內容;

##範例:首先建立fruit.appcache的清單檔案

    CACHE MANIFEST  
      
    example.html  
    banana100.png  
      
    FALLBACK:  
    * 404.html  
      
    NETWORK:  
    cherries100.png  
      
    CACHE:   
    apple100.png
登入後複製


再建立404.html文件,用於連結指向的html文件不在離線快取中就可以用它來代替

<!DOCTYPE HTML>
<html manifest="fruit.appcache">
    <head>
        <title>Offline</title>
    </head>
    <body>
      <h1>您要的页面找不到了!</h1>
      或许您可以帮我们找找孩子!
    </body>
</html>
登入後複製

最後建立需要啟用離線快取的html檔案

<!DOCTYPE HTML>
<html manifest="fruit.appcache">
    <head>
        <title>Example</title>
        <style>
            img {border: medium double black; padding: 5px; margin: 5px;}
        </style>
    </head>
    <body>
        <img id="imgtarget" src="banana100.png"/>
        <p>
            <button id="banana">Banana</button>
            <button id="apple">Apple</button>
            <button id="cherries">Cherries</button>
        </p>
        <a href="otherpage.html">Link to another page</a>
        <script>
            var buttons = document.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }
            
            function handleButtonPress(e) {
                document.getElementById("imgtarget").src = e.target.id + "100.png";
            }
        </script>
    </body>
</html>
登入後複製

2)偵測瀏覽器狀態

window.navigator.online-如果瀏覽器確定為離線就回傳false,如果瀏覽器可能在線則回傳true;

3)使用離線快取:

   可以透過呼叫window. applicationCache屬性直接使用離線緩存,它會傳回一個ApplicationCache物件;  
ApplicationCache物件##成員:

#   update()——更新快取以確保清單中的項目都已下載了最新的版本;

   swapCache()-交換目前快取與較新的快取;

   status ——傳回快取的狀態;

   3.1)ApplicationCache物件#的status屬性值:

   0——UNCACHED——此文件沒有緩存,或快取資料尚未下載;

   1-IDLE-快取沒有執行任何動作;

2——CHECKING——浏览器正在检查清单或清单所指定项目的更新;

3——DOWNLOADING——浏览器正在下载清单或内容的更新;

4——UPDATEREADY——有更新后的缓存数据可用;

5——OBSOLETE——缓存数据已经废弃,不应该再使用了。这是请求清单文件时返回HTTP状态码4xx所造成的

(通常表明清单文件已被移走/删除);

3.2)ApplicationCache对象定义的事件,在缓存状态改变时触发:

checking——浏览器正在获取初始清单或者检查清单更新;

noupdate——没有更新可用,当前的清单是最新版;

downloading——浏览器正在下载清单里指定的内容;

progress——在下载阶段中触发;

cached——清单里指定的所有内容都已被下载和缓存了;

updateready——新资源已下载并且可以使用了;

obsolete——缓存已废弃;

CACHE MANIFEST

CACHE: 
example.html
banana100.png
cherries100.png
apple100.png

FALLBACK:
* offline2.html
登入後複製

<!DOCTYPE HTML>
<html manifest="fruit.appcache">
    <head>
        <title>Example</title>
        <style>
            img {border: medium double black; padding: 5px; margin: 5px;}
            p {margin-top: 10px; margin-bottom: 10px}
            table {margin: 10px; border-collapse: collapse;}
            th, td {padding: 2px;}
            body > * {float: left;}
        </style>
    </head>
    <body>
        <p>
            <img id="imgtarget" src="banana100.png"/>
            <p>
                <button id="banana">Banana</button>
                <button id="apple">Apple</button>
                <button id="cherries">Cherries</button>
            </p>
            <p>
                <button id="update">Update</button>
                <button id="swap">Swap Cache</button>
            </p>
            The status is: <span id="status"></span>
        </p>
        <table id="eventtable" border="1">
            <tr><th>Event Type</th></tr>
        </table>
        <script>
            var buttons = document.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }
            
            window.applicationCache.onchecking =  handleEvent;
            window.applicationCache.onnoupdate = handleEvent;
            window.applicationCache.ondownloading = handleEvent;
            window.applicationCache.onupdateready = handleEvent;
            window.applicationCache.oncached = handleEvent;
            window.applicationCache.onobselete = handleEvent;
            
            function handleEvent(e) {
                document.getElementById("eventtable").innerHTML +=
                    "<tr><td>" + e.type + "</td></td>";
                checkStatus();
            }
            
            function handleButtonPress(e) {
                switch (e.target.id) {
                    case &#39;swap&#39;:
                        window.applicationCache.swapCache();
                        break;
                    case &#39;update&#39;:
                        window.applicationCache.update();
                        checkStatus();
                        break;
                    default:
                        document.getElementById("imgtarget").src = e.target.id
                            + "100.png";
                }
            }
            
            function checkStatus() {
                var statusNames = ["UNCACHED", "IDLE", "CHECKING", "DOWNLOADING",
                                   "UPDATEREADY", "OBSOLETE"];
                var status = window.applicationCache.status;
                document.getElementById("status").innerHTML = statusNames[status];
            }
            
        </script>
    </body>
</html>
登入後複製

以上是html5之創建離線Web應用程式的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板