Vue Academy · 课时

离线支持与后台同步

Q: 「离线支持与后台同步」这节课中我会学到什么？

缓存 API 响应、使用 IndexedDB 存储离线数据，以及为延迟操作实现后台同步 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

缓存 API 响应、使用 IndexedDB 存储离线数据，以及为延迟操作实现后台同步

第 3 / 4 课13 个步骤

离线支持与后台同步 是 CoddyKit 上的免费 Vue Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

离线优先思维

真正的离线支持意味着应用在没有网络时仍能继续工作：读取操作来自本地存储，写入操作会排队，并在网络连接恢复后同步。

使用 IndexedDB 进行本地存储

IndexedDB 是浏览器提供的大型、结构化异步存储。它的原始 API 较为冗长，因此大多数应用会使用小型的 idb 封装库。

npm install idb

使用 idb 打开数据库

openDB 会返回基于 promise 的数据库句柄。请在 upgrade 回调中定义对象存储。

import { openDB } from "idb";

const db = await openDB("app-db", 1, {
  upgrade(db) {
    db.createObjectStore("todos", { keyPath: "id" });
    db.createObjectStore("outbox", { keyPath: "id", autoIncrement: true });
  }
});

读取和写入

使用 get、getAll 和 put 读取并存储记录。这些操作会返回可供您等待的 promise。

await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");

使用 navigator.onLine 检测离线状态

navigator.onLine 是一个表示连接状态的布尔值。读取它即可在网络行为和本地行为之间进行分支。

if (!navigator.onLine) {
  // work from IndexedDB only
}

响应连接状态事件

窗口会触发 online 和 offline 事件。将响应式引用绑定到这些事件，使界面实时反映状态。

import { ref, onMounted, onUnmounted } from "vue";

const online = ref(navigator.onLine);
const on = () => (online.value = true);
const off = () => (online.value = false);
onMounted(() => {
  window.addEventListener("online", on);
  window.addEventListener("offline", off);
});
onUnmounted(() => {
  window.removeEventListener("online", on);
  window.removeEventListener("offline", off);
});

离线时将变更排队

离线时发生写入操作，应将其存储在待发送箱存储中，而不是发送出去。界面会根据本地状态进行乐观更新。

async function saveTodo(todo) {
  await db.put("todos", todo);
  if (!navigator.onLine) {
    await db.add("outbox", { type: "saveTodo", payload: todo });
  } else {
    await api.save(todo);
  }
}

重新连接时同步

触发 online 事件时，清空待发送箱：将每个排队的变更重新发送到服务器，然后清除待发送箱。

async function flushOutbox() {
  const items = await db.getAll("outbox");
  for (const item of items) {
    await api.send(item);
    await db.delete("outbox", item.id);
  }
}
window.addEventListener("online", flushOutbox);

后台同步 API

即使选项卡关闭后仍要同步时，服务工作线程的后台同步 API 会注册一个同步标签，浏览器会在网络连接恢复后触发该标签。

const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");

在 Worker 中处理同步

服务工作线程会监听 sync 事件，并在后台运行清空逻辑。

// service worker
self.addEventListener("sync", (event) => {
  if (event.tag === "flush-outbox") {
    event.waitUntil(flushOutbox());
  }
});

冲突处理注意事项

重放排队的写入可能会与服务器上的更改发生冲突。请使用版本号、时间戳或最后写入者获胜规则，并将未解决的冲突呈现给用户。

快速检查

应用离线时应如何处理写入操作？

在交互式课程中回答

回顾

离线支持会将数据存储在 IndexedDB 中（通过 idb 库），使用 navigator.onLine 以及 online/offline 事件检测连接状态，离线时将变更操作排入发件箱，并在重新连接时同步这些操作——还可以选择使用服务工作线程的后台同步接口。重放排队的写入时，请提前规划冲突处理方案。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 42
课程: 156

免费开始学习查看完整课程

常见问题解答

「离线支持与后台同步」课时是免费的吗？

是的 — 「离线支持与后台同步」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「离线支持与后台同步」这节课中我会学到什么？

缓存 API 响应、使用 IndexedDB 存储离线数据，以及为延迟操作实现后台同步你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「离线支持与后台同步」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy