HTML5 离线功能详解 – 构建 Offline Web Application

HTML5 提供的一种应用缓存机制可以让基于 Web 的应用离线运行。开发者可以指定让浏览器缓存哪些资源以便在离线状态下可用。这样即使在离线状态下,用户打开(或刷新)应用页面时,已经缓存过的应用程序还可以继续加载和运行。

使用应用程序缓存的三个好处:

  • 离线浏览:用户即使在离线状态下也可以访问网站
  • 速度:缓存的资源是保存在本地的,因此加载起来更快速
  • 降低服务器负载:浏览器只从服务器下载变更了的内容

讲义大纲

  • Quick Start: What & How?
    • 什么是 Offline Web applications?
    • 快速 Demo: 把网页转成离线应用的三个步骤
    • 浏览器支持情况和调试,及缓存空间大小限制
  • manifest 语法,编写和更新
  • 实用缓存技术
    • 访问未缓存内容
    • 添加后备内容
    • 网络连接检测的几种方法
    • 缓存过程的事件流
    • 使用 JavaScript API: applicationCache
    • 特性检测
  • 相关资源

在线阅读
PPT 下载

使用 IndexedDB

IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法。IndexedDB 为生成 Web Application 提供了丰富的查询能力,使我们的应用在在线和离线时都可以正常工作。

关于本文档

本篇教程将教会你如何使用 IndexedDB 的异步 API。如果你对 IndexedDB 还不熟悉,你应该首先阅读有关 IndexedDB 的基本概念

有关 IndexedDB API 的参考手册,请参见 IndexedDB 这篇文章及其子页面,包括 IndexedDB 使用的对象类型,以及同步和异步 API 的方法。

基本模式

IndexedDB 鼓励使用的基本模式如下所示:

  1. 打开数据库并且开始一个事务。
  2. 创建一个 object store。
  3. 构建一个请求来执行一些数据库操作,像增加或提取数据等。
  4. 通过监听正确类型的 DOM 事件以等待操作完成。
  5. 在操作结果上进行一些操作(可以在 request 对象中找到) (更多…)

没有 setVersion 了,现在是 onupgradeneeded !

默认情况下,IndexedDB 数据库是没有版本号的。新版本的 IndexedDB 规范不支持调用setVersion()方法为数据库指定一个版本号(传入一个表示版本号的字符串);代替的方法是在 open() 的时侯传入表示版本号的字符串,同时使用 onupgradeneeded 事件代替了 setVersion() 方法。onupgradeneeded 事件会在 onsuccess 之前被调用。[sourcecode lang=”javascript”]
tfan.indexedDB.open = function() {
var request = indexedDB.open(‘parser17103’, 1);

request.onupgradeneeded = function(event) {
console.log("onupgradeneeded", event.currentTarget.result);
var store = event.currentTarget.result.createObjectStore(‘question’, {keyPath: "question_id"});
tfan.indexedDB.getAllQuestionItems();
};

request.onsuccess = function(event) {
console.log("open success");
tfan.indexedDB.db = event.target.result;
};

request.onerror = tfan.indexedDB.onerror;
};</pre>
</article>
[/sourcecode]

更多请参考: