HTML5
HTML5 脱机应用程序： 同心圆洞缓存
Craig Shoemaker
HTML 脱机应用程序使您得以创建工作，而不使用 Web 浏览器的本机技术连接到 Internet 的应用程序。脱机应用程序中包含的网页应用程序清单中列出，因此从应用程序缓存中提供互联网连接是否存在或不。有时，但是，如果可用的互联网连接，您可能希望显示服务器中的某些数据，而不要求用户更改页面。
Scott Guthrie 引入了"同心圆洞"缓存的概念在 ASP 中。NET，缓存的页可以包含的内容独立于缓存的页面进行更新的小窗口的位置。本教程演示如何实现进行 AJAX 调用时连接到 Web，以便向用户显示实时数据脱机页。脱机时，只是呈现页的页中的默认数据。
有多种实现脱机应用程序的实际原因。虽然大多数开发人员首先考虑移动上下文的考虑可能使用脱机应用程序的用户时，几乎任何 Web 站点可以从具有连接状态而无需考虑的一些可用性中受益。站点的主页和与我们联系页是脱机可用性极好的候选项，因此用户可以获取有关组织，一些基本信息，即使当断开。
生成应用程序
在本教程中的示例演示如何缓存"联系我们"显示的页面的即将发生的事件通知给用户。当用户连接到网络时，将显示实时活动列表；否则，将提示用户拨打相应的电话号码了解活动信息。无论是否可以访问公共网络，该方法均可以确保用户随时了解信息并保持联系。
图 1 描述了如何进行脱机查看，呈现页面时图 2 显示了如何从应用程序缓存中提供时，网页看起来，但计算机连接到 Web。
.png)
图 1 脱机工作的用户时，该应用程序提示他要调用的事件信息
.png)
图 2，当用户连接到 Internet 时，该应用程序演示从服务器的事件信息
该清单
应用程序清单作为资源包括在脱机应用程序的主列表。图 3 显示了此示例的完整清单文件。
图 3 清单文件 (manifest.aspx)
CACHE MANIFEST
# version 1
CACHE:
contact.htm
style.css
jquery-1.6.3.min.js
map.png
NETWORK:
events.htm
<%@Page
ContentType="text/cache-manifest"
ResponseEncoding = "utf-8"
Language="C#" AutoEventWireup="true"
CodeBehind="manifest.aspx.cs"
Inherits="ConditionalCaching.manifest" %>
<script language="CS" runat="server">
void Page_Load(object sender, System.EventArgs e)
{
Response.Cache.SetCacheability(HttpCacheability.NoCache);
}
</script>
文件开头的必不可少的缓存清单标题，包括版本控制注释允许传播给客户端列出的文件中的更改。
接下来，缓存部分引用应是用户可用的连接状态而不考虑联系人页。联系人页引用的样式表、 jQuery 和表示的物理办公地点置换图图像。
网络部分最后，以确保对 events.htm 页访问需要在这种情况 （所示图 4)。此页没有包含在缓存部分的原因是因为在现实世界中事件页面会动态地构建为服务器生成的页。缓存页像下面这样将击败进行实时连接到 Web 时，向用户可用的事件数据的目的。事件页面中的网络部分，而不是高速缓存部分中列出，与应用程序缓存 API 不会试图取消页的请求。从根本上讲，页面包含在网络部分将告诉浏览器总是尝试提取连接状态而无需考虑的 Web 页。
图 4 事件页面 （events.htm）
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td>Aug 15</td>
<td><a href="/events/anaheim">Anahiem Convention Center</a></td>
</tr>
<tr>
<td>Sept 5</td>
<td><a href="/events/los-angeles">Los Angeles Convention Center</a></td>
</tr>
<tr>
<td>Oct 3</td>
<td><a href="/events/las-vegas">Las Vegas Convention Center</a></td>
</tr>
<tr>
<td>Nov 14</td>
<td><a href="/events/denver">Colorado Convention Center</a></td>
</tr>
</table>
若要禁用浏览器缓存文件的清单作为一个 ASPX 文件实现的注意。您可能希望禁用缓存配置设置，通过在 Web 服务器上，但这种方法用于此处的示例代码用于演示目的可移植性。
我们页面联系人
联系信息页面 HTML，所示图 5，如您所料无论脱机访问的优化页面是否实现。注意在 HTML 页面中的最重要的详细信息是 localMessage 的 ID 与段落的内容。此容器包含当用户使用脱机 ； 联机时所显示的内容 该内容是替换上即时互联网连接可用。
图 5 联系人页 (contact.htm)
<!DOCTYPE html>
<html manifest="manifest.aspx">
<head>
<title></title>
<link rel="Stylesheet" href="style.css" type="text/css" />
<script src="jquery-1.6.3.min.js" type="text/javascript"></script>
<script>
$(function () {
window.applicationCache.onupdateready = function (e) {
applicationCache.swapCache();
window.location.reload();
}
function isOnLine() {
//return false;
return navigator.onLine;
}
function showEventInfo() {
if (isOnLine()) {
$("#localMessage").hide();
$.get("/events.htm", function (data) {
$("#eventList").html(data);
$("#eventList table tr:odd").addClass("alt");
});
}
else {
$("#localMessage").show();
}
}
showEventInfo();
});
</script>
</head>
<body>
<div id="container">
<h1>Awesome Company</h1>
<h2>Contact Us</h2>
<p>
Awesome Company<br />
1800 Main Street<br />
Anytown, CA 90210<br />
(800) 555-5555<br />
<a href="mailto:awesome@company.com">awesome@company.com</a>
</p>
<img src="map.png" />
<div id="events">
<h2>Events</h2>
<p>We are coming to a city near you!</p>
<p id="localMessage">Give us a call at (800) 555-5555
to hear about our upcoming conference dates.</p>
<div id="eventList"></div>
</div>
<div id="version">Version 1</div>
</div>
</body>
</html>
请注意，在页的脚本部分中，所有功能的定义和运行嵌套在 jQuery 准备文档的处理程序中：
$(function () {
...
});
第一个订单的业务是处理由处理 updateready 事件加载应用程序缓存中的页的任何更新。 如果应用程序清单的更改，其缓存一节中列出的所有文件都复制到客户端。 文件的新版本可用时，updateready 事件将触发和页可以加载最新版本的联系人页从高速缓存通过调用 applicationCache.swapCache。 最后，一旦加载到内存中的最新版本，并重新加载该页以向用户显示所做的更改：
window.applicationCache.onupdateready = function (e) {
applicationCache.swapCache();
window.location.reload();
}
接下来，网页依次需要一种机制来检测计算机是否已连接或断开连接的状态中工作。 IsOnLine 函数只是形成了只读的 navigator.onLine 布尔属性的调用。 这种封装是很方便的因为，应该要重写的值用于测试目的，您可以取消注释返回 false 行，而无需实际断开连接从 Web 测试页的脱机行为：
function isOnLine() {
//return false;
return navigator.onLine;
}
顺便说一下，使用 navigator.onLine 作为检测到联机状态的唯一机制是有点尚不完善。 更可靠的方法来检测的联机状态，请阅读教程，为"关闭栅格，HTML5 脱机并使用，"通过 Paul Kinlan。
ShowEvent 函数将负责实施 HTML 脱机应用程序的"同心圆孔缓存"功能。 函数首先检测到计算机，然后任一回迁的连接状态和呈现实时事件数据或只是在页中显示已存在的事件信息。
IsOnLine 函数返回 true，如果本地邮件用户隐藏的，并启动事件页面的 AJAX 调用。 识别来自异步调用的响应后，生成 HTML 亦到事件列表的容器和表的样式与斑马条带化。
如果，另一方面，计算机脱机工作时，本地邮件则向用户显示如下所示：
function showEventInfo() {
if (isOnLine()) {
$("#localMessage").hide();
$.get("/events.htm", function (data) {
$("#eventList").html(data);
$("#eventList table tr:odd").addClass("alt");
});
}
else {
$("#localMessage").show();
}
}
最后，清单文件由填充清单指向清单文件的 html 元素的属性，可以引用在 HTML 页的顶部：
<html manifest="manifest.aspx">
图 6 显示了清单中列出和引用的联系人页的 style.css 文件。
图 6 样式表 (style.css)
body
{
font-family:Segoe UI, Arial, Helvetica, Sans-Serif;
background-color:#eee;
}
h1
{
text-transform:uppercase;
letter-spacing:-2px;
width:400px;
margin-top:0px;
}
#container
{
position:relative;
margin-left:auto;
margin-right:auto;
padding:20px;
width:700px;
-webkit-box-shadow: 3px 3px 7px #999;
box-shadow: 6px 6px 24px #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-top:20px;
background-color:#fff;
}
#events
{
position:absolute;
width:210px;
right:20px;
top:255px;
border:1px solid #ccc;
padding:10px;
font-size:.7em;
background-color:#eee;
}
#events h2
{
margin:0px;
}
#version
{
font-size:.7em;
color:#ccc;
}
table
{
border-collapse:collapse;
}
table, tr, td
{
border:1px solid #999;
}
.alt
{
background-color:#ccc;
}
总结
即使网页加载到是否计算机连接到 Internet 或不应用程序缓存从缓存中提供，您可以构建您的网页，它们可用时，才能利用在线资源。"圆环孔缓存"的工作原理是 AJAX 调用服务器连接可用时，然后向用户呈现结果。如果该页处于断开状态时，应用程序将以安静模式呈现已经可以在页中的数据 — 它是这两个领域的最佳产品 ！