Web離線應用程序-CSDN博客

本文链接：https://blog.csdn.net/lulu_jiang/article/details/7779477

<!DOCTYPE html />
<!-- 可以為每個頁面單獨指定一個manifest文件，也可以為整個Web程序指定一總manifest文件 -->
<html manifest="Demo.manifest">
    <head>
        <meta charset="utf-8" />
    </head>
    <body οnlοad="initEvent();">
        <!--
        離線Web應用程序：
        Web應用程序沒有和Internet連接，就無法適用
        因此，HTML5新增一個API，使用本地緩存保存HTML,CSS,JS等文件

        本地緩存與瀏覽器網頁緩存區別：
        1.本地緩存為整個Web程序，瀏覽器網頁緩存只服務于單個網頁
        2.本地緩存可靠，可控制。瀏覽器網頁緩存不安全，不可靠，因為我們不知道到底緩存了哪些網頁
        
        manifest文件：
        Web應用程序本地緩存通過每個頁面的manifest文件管理
        manifest文件是一個簡單文本文件，其中列舉了需要被緩存或不緩存的資源文件名稱，以及資源文件訪問路徑
        manifest文件第一行必須為“CACHE MANIFEST”以告知瀏覽器文件的作用
        所以，必須對服務器配置，讓服務器支持text/cache-manifest這個MIME類型

        IIS服務器配置步驟：
        1.右鍵選擇網站，彈出屬性對話框
        2.選擇“HTTP頭”標籤
        3.在MIME映射下，單擊文件類型按鈕
        4.在打開的MIME類型對話框中單擊新建按鈕
        5.在關聯擴展名文本框中輸入“manifest”，在內容類型文本框中輸入“text/cache-manifest”，單擊確定

        manifest文件中資源文件分3類：
        CACHE類型：指定需要被緩存的本地資源文件
        NETWORK類型：指定不需要緩存到本地的資源文件，這些資源只有在連接網絡時才可訪問
                    *為通配符，表示沒有在manifest文件中指定的資源文件都不緩存
        FALLBACK類型：每行指定2個資源文件，第一個資源文件為能夠在在線使用的資源
                    第二個資源文件為不在線時使用的備用資源文件
        每個類別都可選，如果未指定，默認為CACHE類型

        離線Web應用程序，瀏覽器與服務器交互過程：
        首次訪問網站：
        1.瀏覽器訪問http://lulu，服務器返回index.html頁面
        2.瀏覽器解析index.html,請求頁面上所有資源(HTML，CSS，JS，圖片，manifest文件)，服務器返回所有資源
        3.瀏覽器處理manifest文件，請求manifest中所有本地緩存文件(即時已經請求過)，服務器返回所有本地緩存資源
        4.瀏覽器更新本地緩存，存入所有要求本地緩存的資源，并觸發一事件，通知本地緩存被更新

        再次訪問網站，且manifest文件為被修改：
        1.瀏覽器再次訪問http://lulu，瀏覽器發現這個頁面被本地緩存，使用本地緩存中index.html頁面
        2.瀏覽器解析index.html頁面，使用本地緩存中的資源文件
        3.瀏覽器向服務器請求manifest文件，服務器返回304代碼，通知瀏覽器manifest文件沒有變化
        只要頁面上資源文件被本地緩存過，下次再開這個頁面，總是先使用本地緩存中的資源，讓后請求manifest文件

        再次訪問網站，manifest文件已經更新：
        1.瀏覽器再次訪問http://lulu，瀏覽器發現這個頁面被本地緩存，使用本地緩存中index.html頁面
        2.瀏覽器解析index.html頁面，使用本地緩存中的資源文件
        3.瀏覽器向服務器請求manifest文件，服務器返回跟新過的manifest文件
        4.瀏覽器發現manifest文件已更新，再次請求所有要進行本地緩存的資源文件，服務器返回所有本地緩存資源
        5.瀏覽器更新本地緩存，存入所有要求本地緩存的資源，并觸發一事件，通知本地緩存被更新
        注意：此時，即時資源文件被修改過，這是跟新后的本地緩存中內容還不能被使用，必須重新打開這個頁面，才被加載

        applicationCache對象：
        代表本地緩存，可用來通知用戶本地緩存中已經被更新，也允許用戶手工跟新本地緩存
        onUpdateReady事件(本地緩存準備被更新)：當瀏覽器對本地緩存更新，裝入新資源文件時觸發，通知本地緩存已更新
        applicationCache.onUpdateReady = function(){
            alert("本地緩存已更新，請您刷新頁面來的到本程序的最新版本。");
        };
        swapCache方法：手工執行本地緩存的更新，只能在updateReady事件觸發時調用
        applicationCache.onUpdateReady = function(){
            alert("正在更新本地緩存...");
            //不調用該方法，本地緩存也會更新，不過會在下一次打開本頁面時更新
            //調用該方法，本地緩存會立刻更新(但並不意味會立刻改變頁面上圖片腳本等，需要刷新才會生效)
            applicationCache.swapCache();
            alert("本地緩存已更新，請您刷新頁面來的到本程序的最新版本。");
        };

        applicationCache對象的事件：
        1.瀏覽器訪問http://lulu，服務器返回index.html頁面
        2.瀏覽器發現網頁具有manifest屬性，觸發checking事件，檢查manifest文件是否存在
        3.manifest文件不存在，觸發error事件，不執行步5驟開始的交互
        4.瀏覽器解析index.html,請求頁面上所有資源(HTML，CSS，JS，圖片，manifest文件)，服務器返回所有資源
        5.瀏覽器處理manifest文件，請求manifest中所有本地緩存文件(即時已經請求過)，服務器返回所有本地緩存資源
        6.瀏覽器觸發downloading事件，開始下載資源，下載同時，週期性觸發progress事件，可獲得下載進度
        7.下載結束，觸發cached事件，表示首次緩存成功
        6.瀏覽器更新本地緩存，存入所有要求本地緩存的資源，并觸發一事件，通知本地緩存被更新
        再次訪問網站，1~4同上，5之後瀏覽器核對manifest文件是否更新，沒有觸發noupdate事件
        如果更新了，將繼續後面的步驟，在步驟7中不觸發cached事件，而觸發updateready事件，表示下載結束
        -->

        <script type="text/javascript">
            function init() {
                //設置定時檢查
                setInterval(function () {
                    //手動檢查服務器是否manifest文件有更新
                    applicationCache.update();
                }, 5000);

                applicationCache.addEventListener("updateready", function () {
                    if (confirm("本地緩存已更新，需要刷新頁面來獲取最新版本么?")) {
                        //手工更新本地緩存
                        applicationCache.swapCache();
                        location.reload();
                    }
                });
            };

            //init();
        </script>

        <div id="msg"></div>
        <script type="text/javascript">
            function initEvent() {
                var msg = document.getElementById("msg");

                applicationCache.addEventListener("checking", function () {
                    msg.innerHTML += "checking<br/>";
                });
                applicationCache.addEventListener("noupdate", function () {
                    msg.innerHTML += "noupdate<br/>";
                });
                applicationCache.addEventListener("downloading", function () {
                    msg.innerHTML += "downloading<br/>";
                });
                applicationCache.addEventListener("progress", function () {
                    msg.innerHTML += "progress<br/>";
                });
                applicationCache.addEventListener("updateready", function () {
                    msg.innerHTML += "updateready<br/>";
                });
                applicationCache.addEventListener("cached", function () {
                    msg.innerHTML += "cached<br/>";
                });
                applicationCache.addEventListener("error", function () {
                    msg.innerHTML += "error<br/>";
                });
            };
        </script>
    </body>
</html>

Demo.msnifest文件

CACHE MANIFEST
#文件開頭必須書寫CACHE MANIFEST
#version 1
#這個manifest文件版本號
CACHE:
#需要緩存在本地的資源文件
other.html
hello.js
image/myphoto.jpg
NETWORK:
#不需要緩存在本地的資源文件
http://lulu/NotOffLine
NotOffLine.aspx
*
FALLBACK:
#在線時使用資源，離線時使用資源
online.js locale.js
CACHE:
newhello.html
newhello.js