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

最新推荐文章于 2025-08-15 21:07:05 发布

转载最新推荐文章于 2025-08-15 21:07:05 发布 · 385 阅读

文章标签：

#web #html5 #程序开发 #api #stylesheet #cache

Web App 专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨HTML5离线应用OfflineWebApplications，包括离线应用的原理、创建方法、实例演示及状态判断。重点介绍了如何利用离线应用实现离线环境下Web应用的运行，以及使用navigator.onLine检测网络状态，确保用户体验不受网络限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

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

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

移动Web应用程序开发 HTML5篇 (一) HTML5简介

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

移动Web应用程序开发 HTML5篇 (三) Canvas API

移动Web应用程序开发 HTML5篇 (四) 多媒体 API

移动Web应用程序开发 HTML5篇 (五) 地址位置 API

移动Web应用程序开发 HTML5篇 (六) 通信(Communication) API

移动Web应用程序开发 HTML5篇 (七) Web Sockets API

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

CACHE MANIFEST
# r128
# JavaScript
./offline.js
#./tracker.js
./log.js

# stylesheets
./html5.css

# images

整个应用代码下载地址：下载