HTML5学习总结-08 应用缓存(Application Cache)

一 应用缓存(Application Cache)

1 应用缓存

　　HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

　　应用程序缓存为应用带来三个优势：

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

2 浏览器支持

、

　　FireFox浏览器查看页面缓存：

在FireFox浏览器中输入: about:cache

　　FireFox ->选项->高级

 　　Chrome浏览器查看页面缓存：

在Chrome浏览器中输入: about:cache 或 chrome://cache/

 　　Chrome -> 更多工具 -> 开发者工具 -> Resources

 3 离线服务器配置

　　实验使用的离线服务器是 Tomcat8, 离线应用的服务器需要设置mime类型，才可以支持缓存,具体配置如下：
　　在tomcat根目录 -> conf -> web.xml 中的<web-app>内添加以下配置信息。

<!-- support Html5 applicationCache -->
<mime-mapping>
　　<extension>manifest</extension>
　　<mime-type>text/cache-manifest</mime-type>
</mime-mapping>

注意:
　　manifest文件后缀需要与<extension>中的内容相同,上面配置为manifest,所有manifest文件也应该为xxx.manifest, 比如 offline.manifest, cache.manifest .

4 带有 cache manifest 的 HTML 文档（供离线浏览）

　　下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：

<!DOCTYPE HTML>
<html manifest="demo.manifest">
<body>
　　The content of the document......
</body>
</html>

　　如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性，如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性，每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）

 　　manifest 文件的扩展名需要与服务器配置的扩展名一致。

5 Manifest 文件

　　manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
　　manifest 文件可分为三个部分：

  •     CACHE 在此标题下列出的文件将在首次下载后进行缓存
  •     NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  •     FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

　　MANIFEST文件第一行中的 CACHE MANIFEST 是必需的。 注释必须以”#”开头

CACHE MANIFEST
###version 1.0

CACHE:
clock.html
clock.css
clock.js
waitan.jpg

5.1 CACHE

　　上面的 manifest 文件列出了四个资源：一个 html文件，一个 CSS 文件，一个jpg 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

　　新建web工程,把缓存的文件放在 web工程的cache1目录下，建立样式，html,js和图片资源。

clock.html

<!DOCTYPE html>
<html manifest="clock.mainifest" >

    <head>
        <meta charset="UTF-8">
        <title>clock</title>
    </head>
    <link rel="stylesheet" href="clock.css" />
    <body>

        <div id="main">
            <img src="./waitan.jpg"/>
        </div>
        <p>
            The time is : <output id="clock"></output>
        </p>

<script type="text/javascript" src="clock.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                startTime();
            }
        </script>
    </body>
</html>

clock.css

#main {
    background-color: olive;
     500px;
    height: 300px;
    border: 5px solid yellow;
}

#clock {
    background-color: yellow;
    font-size: 50px;
}

clock.js

function startTime() {
    setInterval(function() {
        var clock = document.getElementById("clock");
        clock.value = new Date();
    }, 1000);
}

noCacheClock.html

<!DOCTYPE html>
<html  >

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <link rel="stylesheet" href="clock.css" />
    <body>

        <div id="main">
            <img src="./waitan.jpg"/>

        </div>
        <p>
            The time is : <output id="clock"></output>
        </p>

<script type="text/javascript" src="clock.js"></script>
        <script type="text/javascript">
        
            window.onload = function() {
                startTime();
            }
        </script>
    </body>
</html>

clock.mainifest

CACHE MANIFEST
###version 1.0

CACHE:
clock.html
clock.css
clock.js
waitan.jpg

实验1：将服务器停止，访问缓存页面 clock.html，查看其是否还能正常显示。

　　在服务器运行中，修改 clock.html页面内容，然后刷新页面查看页面是否发生变化。

实验2：将服务器停止，访问非缓存页面 noCacheClock.html ，查看其是否还能正常显示。

　　注意： 在浏览器输入 about:cache,查看文件是否缓存成功，然后按住 ctrl + alt + del清空缓存，在查看缓存文件是否还能正常访问。

FireFox下缓存文件如下图所示：

Chrome下缓存文件如下图所示：

5.2 NETWORK　　

　　下面的 NETWORK 规定文件 "online.html" 永远不会被缓存，且离线时是不可用的：

注意： NETWORK部分罗列的资源，无论缓存中存在与否，均很网络获取。

CACHE MANIFEST
###version 1.0

CACHE:
clock.html
clock.css
clock.js
waitan.jpg

NETWORK:
online.html

　　可以使用星号来指示所有其他资源/文件都需要因特网连接：

CACHE MANIFEST
###version 1.0

CACHE:
clock.html
clock.css
clock.js
waitan.jpg

NETWORK:
*

实验3：将服务器停止，访问缓存页面 online.html，查看其是否还能正常显示。

online.html

<!DOCTYPE html>
<html>
<head>
<title>online.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
</head>

<body>
    <h1>oneline !</h1>
    <h2>oneline !</h2>
    <h3>oneline !</h3>
</body>
</html>

修改clock.mainifest的内容如下：

CACHE MANIFEST
###version 1.0

CACHE:
clock.html
clock.css
clock.js
waitan.jpg

NETWORK:
online.html

5.3 FALLBACK

　　FALLBACK部分提供了获取不到缓存资源时的备选资源。 规定如果无法建立因特网连接，则用 "404" 替代 / 目录中的所有文件：

clock.mainifest

CACHE MANIFEST
###version 1.0

CACHE:
clock.html
clock.css
clock.js
waitan.jpg

NETWORK:
online.html

FALLBACK:
/ 404.html

　　尝试使用另外的离线配置清单

CACHE MANIFEST
###version 1.0 333

CACHE:
clock.css
clock.js
waitan.jpg

#### 不需要缓存的资源
NETWORK:
online.html

### 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件
FALLBACK:
/MobileWeb0927/cache 404.html

404.html

<html><head>
<meta http-equiv="content-type" content="text/html; charset=GB2312">
<title>404 NOT FOUND</title>
</head>

<body bgcolor="linen" text="black">
<div style="font-size: 400px; text-align: center;">404</div>
<div style="font-size: 128px; text-align: center; font-variant: small-caps;">Not Found</div>
<div style="text-align: center;">The document you requested could not be found. Please check the URL and try again. This is a recording.</div>


</body></html>

实验4：将服务器停止，访问缓存页面 online.html，查看其是否还能正常显示。

实验5：将服务器停止，访问缓存页面 test.html，查看其是否还能正常显示。

test.html

<!DOCTYPE html>
<html>
<head>
<title>test.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
</head>
<body>
    <h1>test.html</h1>
    <h2>test.html</h2>
    <h3>test.html</h3>

</body>
</html>

 　　然后把在 web工程中WebRoot下 cache1目录中新建一个文件夹html,把test.html放入html目录中。修改缓存清单文件 clock.mainifest：

FALLBACK:
/ 404.html
/cache1/html 404.html

实验6：将服务器停止，访问文件夹cache1/html下的缓存页面 test.html，查看其是否还能正常显示。 

使用的访问路径如下所示：

http://127.0.0.1:8080/TestH5/cache1/clock.html
http://127.0.0.1:8080/TestH5/cache1/online.html
http://127.0.0.1:8080/TestH5/cache1/test.html
http://127.0.0.1:8080/TestH5/cache1/html/test.html

二 ApplicationCache API

1 离线事件

2 离线状态

　　对应的方法如下：

function initCheckApplicationEvent(){
             var msg=document.getElementById("msg");
            applicationCache.addEventListener("checking", function() {
                msg.innerHTML+="checking<br/>";
            }, true);
            applicationCache.addEventListener("noupdate", function() {
                msg.innerHTML+="noupdate<br/>";
            }, true);
            applicationCache.addEventListener("downloading", function() {
                msg.innerHTML+="downloading<br/>";
            }, true);
            applicationCache.addEventListener("progress", function() {
                msg.innerHTML+="progress<br/>";
            }, true);
            applicationCache.addEventListener("updateready", function() {
                msg.innerHTML+="updateready<br/>";  
            }, true);
            applicationCache.addEventListener("cached", function() {
                msg.innerHTML+="cached<br/>";
            }, true);
            applicationCache.addEventListener("error", function() {
            msg.innerHTML+="error<br/>";
            }, true);
    }

3 更新缓存方法

 　　对应的方法如下：

function updateApplicationCache() {
    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.
    }
}

　　请注意：以这种方式使用 update() 和 swapCache() 不会向用户提供更新的资源。此流程只是让浏览器检查是否有新的清单、下载指定的更新内容以及重新填充应用缓存。因此，还需要对网页进行两次重新加载才能向用户提供新的内容，其中第一次是获得新的应用缓存，第二次是刷新网页内容。  

实验7：将服务器运行中，修改clock.htm和clock.mainifest ,然后刷新页面，查看clock.html是否保持最新的状态。 

clock.html

<!DOCTYPE html>
<html manifest="clock.mainifest">

<head>
<meta charset="UTF-8">
<title>clock</title>
</head>
<link rel="stylesheet" href="clock.css" />
<body>

    <div id="main">
        <img src="./waitan.jpg" />

    </div>
    <p>
        The time is :
        <output id="clock"></output>
    </p>
    <p>
        #version 1.1111
    </p>
    <p id="msg"></p>
    

    <input type="button" value="updateApplicationCache" onclick="updateApplicationCache()"/>

    <script type="text/javascript" src="clock.js"></script>
    <script type="text/javascript">
    
        window.onload = function() {
             console.log("------------- offline ready-----------");
             startTime();
             initCheckApplicationEvent();
        }
    
        function updateApplicationCache() {
            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.
            }
        }
        
        function initCheckApplicationEvent(){
             var msg=document.getElementById("msg");
            applicationCache.addEventListener("checking", function() {
                msg.innerHTML+="checking<br/>";
            }, true);
            applicationCache.addEventListener("noupdate", function() {
                msg.innerHTML+="noupdate<br/>";
            }, true);
            applicationCache.addEventListener("downloading", function() {
                msg.innerHTML+="downloading<br/>";
            }, true);
            applicationCache.addEventListener("progress", function() {
                msg.innerHTML+="progress<br/>";
            }, true);
            applicationCache.addEventListener("updateready", function() {
                msg.innerHTML+="updateready<br/>";  
            }, true);
            applicationCache.addEventListener("cached", function() {
                msg.innerHTML+="cached<br/>";
            }, true);
            applicationCache.addEventListener("error", function() {
            msg.innerHTML+="error<br/>";
            }, true);
    } 
       
       
    </script>
</body>

</html>

clock.mainifest

CACHE MANIFEST
###version 1.111

CACHE:
clock.html
clock.css
clock.js
waitan.jpg

NETWORK:
online.html

FALLBACK:
/ 404.html
/cache1/html 404.html

另外的实验缓存清单。

CACHE MANIFEST
###version 1.0 333

CACHE:
clock.css
clock.js
waitan.jpg

#### 不需要缓存的资源
NETWORK:
online.html

### 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件
FALLBACK:
/MobileWeb0927/cache 404.html

 

参考资料：

http://www.w3school.com.cn/html5/html_5_app_cache.asp

http://jingyan.baidu.com/article/fa4125acd9baf828ac709286.html 

http://www.jb51.net/html5/67850.html

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wangshuo1/p/5859424.html