介绍
本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具:HTML5,JavaScript, CSS3。
本篇是HTML5介绍的第八篇,主要介绍HTML5的离线应用Offline Web Applications)。
相关文章:
1. 离线应用(Offline Web Applications)介绍
离线应用也是HTML5引入的新的功能之一,当客户端处于离线状态时,浏览器可以加载之前预设的保存在Cache中的资源来实现Web应用的运行,这很多是用在离线Web游戏,连连看,拼图等小游戏,以及一些功能性的web应用中,如记账软件等可以不需要实时联网的应用。当然,需要联网的应用也可以写成离线应用,如Google的离线版Gmail,用户可以正常操作所有邮件,如回复邮件,归类邮件等等,只是这些要等有网络环境后,才会生效。
目前各大浏览器对离线应用的支持情况如下图:
![](http://software.intel.com/zh-cn/blogs/wordpress/wp-content/uploads/2012/03/81.jpg)
2. 离线应用(Offline Web Applications)创建方法
一个简单的离线应用创建和运行流程如下图所示:
![](http://software.intel.com/zh-cn/blogs/wordpress/wp-content/uploads/2012/03/82.jpg)
1. 在HTML Page中创建一个Manifest Attribute,如下图所示。这个Manifest Attribute是告诉浏览器,本应用有一个名叫a.manifest的文件。
![](http://software.intel.com/zh-cn/blogs/wordpress/wp-content/uploads/2012/03/83.jpg)
2. 创建manifest文件,一个典型的cache manifest文件如下图所示。
![](http://software.intel.com/zh-cn/blogs/wordpress/wp-content/uploads/2012/03/84.jpg)
CACHE MANIFEST后面跟的都是可以下载下来缓存的文件,
NETWORK 表明是需要联网的文件,不进行缓存,
FALLBACK 表明可以进行替代的文件,本例中,首先从网络端获取/app/ajax文件,如果没有获取到,则加载本地cache的default.html。
3. 检查是否在线,使用navigator.onLine这个函数来检测,如果是TRUE则在线,否则不在线。如下图所示:
![](http://software.intel.com/zh-cn/blogs/wordpress/wp-content/uploads/2012/03/85.jpg)
4. 运行offline 应用,Offline应用在运行的时候会加载相应的Offline API, window.applicationCache.status函数可以准确判断在HTML5中Offline 应用运行过程中的详细情况,一共有以下六个状态:
![](http://software.intel.com/zh-cn/blogs/wordpress/wp-content/uploads/2012/03/86.jpg)
window.applicationCache有一个update()函数,在运行的时候可以去update其状态。
3. 离线应用例子
这一节我们实现一个缓存地址位置的例子,本例中使用到了 移动Web应用程序开发 HTML5篇 (五) 地址位置 API 这篇文章中的一些知识。先看一下运行效果
![](http://software.intel.com/zh-cn/blogs/wordpress/wp-content/uploads/2012/03/87.jpg)
点击check for update,能够得到更新的地理位置信息。(上图可以得到目前所在位置的经纬度,不小心泄露了我家的地址 :) )。然后在开发者工具中使用离线模式,如下图所示:
![](http://software.intel.com/zh-cn/blogs/wordpress/wp-content/uploads/2012/03/88.jpg)
刷新一下,在离线状态下,可以获取之前缓存下来的信息。
本例中的tracker.html 文件如下所示。设定Title,加载对应的脚本文件。
<!DOCTYPE html>
<html lang="en" manifest="tracker.manifest">
<head>
<title>HTML5 Offline Application</title>
<script src="log.js"></script>
<script src="offline.js"></script>
<script src="tracker.js"></script>
<link rel="stylesheet" href="html5.css">
</head>
<body>
<header>
<h1>Offline Example</h1>
</header>
<section>
<article>
<button id="installButton">Check for Updates</button>
<h3>Log</h3>
<div id="info">
</div>
</article>
</section>
</body>
</html>
tracker.js中进行地理位置的获取和加载,主要函数如下:
/*
* Track and report the current location
*/
var handlePositionUpdate = function(e) {
var latitude = e.coords.latitude;
var longitude = e.coords.longitude;
log("Position update:", latitude, longitude);
if(navigator.onLine) {
uploadLocations(latitude, longitude);
}
storeLocation(latitude, longitude);
}
tracker.manifest声明离线模式下加载的文件:
CACHE MANIFEST
# r128
# JavaScript
./offline.js
#./tracker.js
./log.js
# stylesheets
./html5.css
# images
整个应用代码下载地址: 下载