zoukankan html css js c++ java

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

查看全文

相关阅读:
【Azure Redis 缓存】Azure Redis 功能性讨论二
 【Azure Developer】如何用Microsoft Graph API管理AAD Application里面的Permissions
【Azure 环境】通过Python SDK收集所有订阅简略信息，例如订阅id 名称, 资源组及组内资源信息等，如何给Python应用赋予相应的权限才能获取到信息呢？
【Azure 应用服务】App Service与APIM同时集成到同一个虚拟网络后，如何通过内网访问内部VNET的APIM呢？
【Azure 云服务】如何从Azure Cloud Service中获取项目的部署文件
 【Azure Redis 缓存】Azure Redis 异常
 【Azure 微服务】基于已经存在的虚拟网络(VNET)及子网创建新的Service Fabric并且为所有节点配置自定义DNS服务
 【Azure Redis 缓存】遇见Azure Redis不能创建成功的问题：至少一个资源部署操作失败，因为 Microsoft.Cache 资源提供程序未注册。
【Azure Redis 缓存】如何得知Azure Redis服务有更新行为？
【Azure API 管理】在 Azure API 管理中使用 OAuth 2.0 授权和 Azure AD 保护 Web API 后端，在请求中携带Token访问后报401的错误

原文地址：https://www.cnblogs.com/wangshuo1/p/5859424.html

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

一 应用缓存(Application Cache)

1 应用缓存

2 浏览器支持

3 离线服务器配置

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

5 Manifest 文件

5.1 CACHE

5.2 NETWORK

5.3 FALLBACK

二 ApplicationCache API

一应用缓存(Application Cache)

5.2 NETWORK　　