移动Web应用程序开发HTML5篇 (八) Offline Web Applications

介绍

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具:HTML5,JavaScript, CSS3。

本篇是HTML5介绍的第八篇,主要介绍HTML5的离线应用Offline Web Applications)。

相关文章:

1. 离线应用(Offline Web Applications)介绍

离线应用也是HTML5引入的新的功能之一,当客户端处于离线状态时,浏览器可以加载之前预设的保存在Cache中的资源来实现Web应用的运行,这很多是用在离线Web游戏,连连看,拼图等小游戏,以及一些功能性的web应用中,如记账软件等可以不需要实时联网的应用。当然,需要联网的应用也可以写成离线应用,如Google的离线版Gmail,用户可以正常操作所有邮件,如回复邮件,归类邮件等等,只是这些要等有网络环境后,才会生效。

目前各大浏览器对离线应用的支持情况如下图:


2. 离线应用(Offline Web Applications)创建方法

一个简单的离线应用创建和运行流程如下图所示:


1. 在HTML Page中创建一个Manifest Attribute,如下图所示。这个Manifest Attribute是告诉浏览器,本应用有一个名叫a.manifest的文件。


2. 创建manifest文件,一个典型的cache manifest文件如下图所示。


CACHE MANIFEST后面跟的都是可以下载下来缓存的文件,

NETWORK 表明是需要联网的文件,不进行缓存,

FALLBACK 表明可以进行替代的文件,本例中,首先从网络端获取/app/ajax文件,如果没有获取到,则加载本地cache的default.html。

3. 检查是否在线,使用navigator.onLine这个函数来检测,如果是TRUE则在线,否则不在线。如下图所示:

4. 运行offline 应用,Offline应用在运行的时候会加载相应的Offline API, window.applicationCache.status函数可以准确判断在HTML5中Offline 应用运行过程中的详细情况,一共有以下六个状态:

window.applicationCache有一个update()函数,在运行的时候可以去update其状态。


3. 离线应用例子

这一节我们实现一个缓存地址位置的例子,本例中使用到了 移动Web应用程序开发 HTML5篇 (五) 地址位置 API 这篇文章中的一些知识。先看一下运行效果


点击check for update,能够得到更新的地理位置信息。(上图可以得到目前所在位置的经纬度,不小心泄露了我家的地址 :) )。然后在开发者工具中使用离线模式,如下图所示:


刷新一下,在离线状态下,可以获取之前缓存下来的信息。

本例中的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声明离线模式下加载的文件:

For more complete information about compiler optimizations, see our Optimization Notice.