90. 离线应用与历史注脚

本节目标：了解让网页离线可用的技术演变，明白哪些已废弃、哪些是现代方案，知道 Service Worker 是当下做离线缓存的正确方向。

AppCache 已废弃

HTML5 曾经引入过 Application Cache（简称 AppCache），通过一个 manifest 文件声明哪些资源要缓存。

<!-- 过去这样用，现在不要这样做了 -->
<html manifest="cache.appcache">

AppCache 设计上有不少问题：缓存更新机制容易出错、整个站点要么全缓存要么全不缓存、出错后很难修复。这个技术已经被 W3C 废弃，所有现代浏览器都已移除或正在移除支持。

Warning

AppCache 是历史遗留技术，不要再使用它。如果你在老项目中看到 manifest 属性，知道它已经不推荐即可。详细 API 不用学。

Web SQL 也过时了

HTML5 早期还有一个 Web SQL Database 规范，允许用 SQL 语句操作浏览器数据库：

// Web SQL 示例（已废弃，不要学不用）
db.transaction(function (tx) {
  tx.executeSql("CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY, name TEXT)");
});

W3C 在 2010 年就停止推进 Web SQL 规范了。IndexedDB 是 Web SQL 的正式替代品。

Note

如果你看到老教程提到”HTML5 Web SQL”，知道它已经被 IndexedDB 取代就够了。不需要花时间学习 Web SQL 的 API。

Service Worker 是现代方案

目前做离线应用、资源缓存的正确方式是 Service Worker。它是一个在浏览器后台运行的脚本，独立于网页。

Service Worker 的核心能力：

拦截网络请求：决定哪些走缓存、哪些走网络
离线访问：没网时返回缓存内容
后台同步：网络恢复后自动同步数据
推送通知：配合 Push API 实现消息推送

最小化 Service Worker 注册

// 在主页面中注册
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js")
    .then(function (reg) {
      console.log("Service Worker 注册成功");
    })
    .catch(function (err) {
      console.error("注册失败:", err);
    });
}

最简 Service Worker 文件（sw.js）

const CACHE_NAME = "my-cache-v1";
const urlsToCache = ["/", "/style.css", "/app.js"];

// 安装阶段：缓存核心文件
self.addEventListener("install", function (event) {
  event.waitUntil(
    caches.open(CACHE_NAME).then(function (cache) {
      return cache.addAll(urlsToCache);
    })
  );
});

// 拦截请求：先查缓存，没有再走网络
self.addEventListener("fetch", function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      return response || fetch(event.request);
    })
  );
});

Note

Service Worker 是个大话题，本教程只作入门了解。深入学习可以参考 MDN 的 Service Worker 文档。

各方案时间线

技术	状态	出现时间
Cookie	可用但不推荐存数据	1994
AppCache	已废弃	2011 ~ 2016
Web SQL	已废弃	2009 ~ 2010
localStorage/sessionStorage	当前可用	2011 至今
IndexedDB	当前可用，推荐	2015 至今
Service Worker	当前可用，推荐	2015 至今

总结

如果你需要做：

简单的键值存储 → localStorage
会话级临时数据 → sessionStorage
大量结构化数据 + 复杂查询 → IndexedDB
离线访问整个网站 → Service Worker + Cache API

记住一条主线：localStorage/IndexedDB/Service Worker 是当前该用的，AppCache 和 Web SQL 是过去式。

Tip

新手不用急着学 Service Worker。它涉及 HTTPS 要求、生命周期管理、缓存策略等复杂概念。先把 localStorage 和 IndexedDB 用熟，再进阶到 Service Worker。