使用 HTML 5 支持移动 Web 应用程序离线工作
使您的应用程序无论有无 Internet 连接都能正常工作
Michael Galpin 是 eBay 的一名架构师。他经常为 developerWorks 撰写文章，同时在 TheServerSide.com 和 Java Developer 期刊上发表文章，他还有自己的 博客。他从 1998 年开始做职业程序员，并拥有加州理工学院数学专业的学士学位。?
简介：?移动应用程序的部分魅力是无论您走到哪里，都可以带着您的应用程序及其数据。但移动应用程序面临的一个现实是，有时候，移动设备没有到 Internet 的工作连接。这似乎是移动 Web 应用程序的一个不可逾越的障碍。然而，Web 应用程序已经发展为能够离线工作。在本文中，您将了解如何使您的移动 Web 应用程序离线工作，并检测您的应用程序何时从离线转为在线或从在线转为离线。
平均分 （共 7 个评分 ）<script type="text/javascript"></script><!-- Rating_Area_End -->
?
<!-- dW_Summary_Area_END --><!-- CONTENT_BODY --><!-- MAIN_COLUMN_BEGIN --><!-- Related_Searches_Area_And_Overlays_Begin --><!-- MAIN_COLUMN_CONTAINER_BEGIN -->这个 HTML 最重要的一点是根 html 元素。注意，该元素拥有一个称为 manifest 的属性。正是这个属性告知浏览器这个页面可以离线工作。manifest 参数的值是到该 Web 页面的缓存清单文件的 URL。重申一遍，这个 URL 可以是一个完整 URL，尽管它在这里是一个相对（于指定 Web 页面的）URL。这里需要注意的另一点是该页面的 DOCTYPE。这是用于 HTML 5 Web 页面的规范 doctype。离线 Web 应用程序规范并不强制您使用这个 DOCTYPE；但是，建议您这样做。否则，某些浏览器可能不会将页面识别为 HTML 5 页面，并且可能会忽略缓存清单。这个 HTML 的剩余部分只是使用 iUI 的一个简单示例。图 1 展示了这个页面在 iPhone 模拟器上的外观。
测试离线应用程序可能有点麻烦。如果可能，最简单的测试方式是将您的应用程序部署到一个 Web 服务器上。然后，您可以访问这个页面一次，关闭您的 Internet 连接，然后尝试再次访问。如果出现任何失败，那么您可能在缓存清单中遗漏了一些文件。在进行上述测试之前，您需要对您的 Web 服务器进行一些关键配置。
显然，这里的关键部分是 mime-mapping 元素。在本例中，您的设置的含义是：对于以 .mf 扩展名结尾的任意文件，将它们的 MIME 类型设置为 text/cache-manifest。当然，一种甚至更有效的方法是从专用于提供静态内容的服务器（比如一个 Apache Web 服务器）提供这样的文件。在一个典型 Apache 安装中，您只需修改 httpd/conf 目录中的 mime.types 文件，如 清单 5 所示。
主要区别是现在列示了 gym 和 soccer 元素，且这两个元素为空。您将分别使用来自 Twitter 的关于体操和足球的 tweets 来填充它们。还要注意一个 id 为 online 的列表项元素，该元素显示一个图像，用于向用户表明应用程序是在线还是离线。但是，这个元素默认隐藏，也就是说，默认模式是离线。 这个 body 元素规定：一旦这个 body 加载，就会调用一个 init() 函数。清单 7 展示了这个函数。
Michael Galpin 是 eBay 的一名架构师。他经常为 developerWorks 撰写文章，同时在 TheServerSide.com 和 Java Developer 期刊上发表文章，他还有自己的 博客。他从 1998 年开始做职业程序员，并拥有加州理工学院数学专业的学士学位。
