JavaScript Academy · 课时

后台同步与更新

Q: 「后台同步与更新」这节课中我会学到什么？

更新缓存，并在恢复联网后进行同步。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

更新缓存，并在恢复联网后进行同步。

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

保持缓存新鲜

支持离线的应用必须平稳地进行更新：发布新资源、清除旧资源，并在连接恢复后重试失败的操作。服务工作线程为这三项任务都提供了工具。

版本化的缓存名称

最简单的更新机制是使用版本化的缓存名称。提升版本号会创建一个新的缓存，而旧缓存会留待激活时清理。

const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE).then(c => c.addAll(ASSETS))
  );
});

清理旧缓存

在 activate 事件中列出所有缓存名称，并删除任何不是当前版本的缓存。这样可以释放存储空间并移除过时资源。

self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys().then(names =>
      Promise.all(
        names.filter(n => n !== CACHE)
             .map(n => caches.delete(n))
      )
    )
  );
});

处于等待状态的工作线程

默认情况下，新工作线程完成安装后会保持等待状态，直到所有由旧工作线程控制的页面都关闭。这样可以避免会话中途出现版本不匹配。

skipWaiting

self.skipWaiting() 会告诉处于等待状态的工作线程立即激活并接管控制权，而不必等待标签页关闭。如果您希望更新立即生效，可以在 install 中调用它。

self.addEventListener('install', (event) => {
  self.skipWaiting(); // activate as soon as installed
});

clients.claim

激活后，self.clients.claim() 允许新工作线程立即接管已经打开的页面，而不必等到未来的导航操作才进行控制。

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

从页面检测更新

页面可以通过注册对象的 updatefound 事件监听新工作线程，然后提示用户重新加载以获取最新版本。

reg.addEventListener('updatefound', () => {
  const sw = reg.installing;
  sw.addEventListener('statechange', () => {
    if (sw.state === 'installed') {
      console.log('new version available - reload to update');
    }
  });
});

后台同步

后台同步接口允许您将某项操作（例如发送表单）推迟到设备恢复连接后执行。您注册一个同步标签，浏览器会在联网时触发 sync 事件。

// In the page, after queuing data:
reg.sync.register('send-messages')
  .then(() => console.log('sync scheduled'));

处理同步事件

在服务工作线程中监听 sync 并匹配标签。使用 waitUntil，这样浏览器会让工作线程保持活动状态，直到重试完成。

self.addEventListener('sync', (event) => {
  if (event.tag === 'send-messages') {
    event.waitUntil(sendQueuedMessages());
  }
});

先入队再同步模式

一种可靠的离线流程是：将待处理操作保存到 IndexedDB，注册同步，然后在 sync 处理程序中读取队列并 POST 每个项目，成功后将其清除。

async function sendQueuedMessages() {
  const items = await readQueueFromIndexedDB();
  for (const item of items) {
    await fetch('/api/messages', {
      method: 'POST',
      body: JSON.stringify(item)
    });
  }
  await clearQueue();
}

更新与同步回顾

这些功能结合起来可以让应用更具弹性：版本化缓存和清理机制保持资源新鲜，skipWaiting/clients.claim 控制发布时机，而后台同步则确保用户恢复联网后可靠地完成操作。

快速检查

测试您对更新和后台同步的理解。

回顾

您学习了后台同步和更新：

使用版本化的缓存名称，并在 activate 时清理旧缓存。
skipWaiting 和 clients.claim 控制更新时机。
通过 updatefound 检测新版本。
后台同步通过 sync 事件将操作推迟到联网后执行。
将操作加入 IndexedDB 队列，然后在同步时批量处理。

您已经完成了服务工作线程和离线缓存的学习。

常见问题解答

「后台同步与更新」课时是免费的吗？

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

「后台同步与更新」这节课中我会学到什么？

更新缓存，并在恢复联网后进行同步。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「后台同步与更新」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy