从 HTML 注册服务工作线程
使用脚本标签和 navigator API 注册服务工作线程
从 HTML 注册服务工作线程 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
服务工作线程是什么
服务工作线程是一个在后台运行、独立于任何页面的 JavaScript 文件，会拦截其 scope 范围内的网络请求。它通过缓存提供离线支持、推送通知、后台同步，以及更快的重复加载。
注册
从页面脚本注册工作线程：navigator.serviceWorker.register("/sw.js")。浏览器会获取 /sw.js，解析它，运行其安装事件，并开始拦截注册范围内的请求。
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then((reg) => console.log("Registered, scope:", reg.scope))
.catch((err) => console.error("Registration failed:", err));
}先进行特性检测
旧版浏览器不支持服务工作线程。调用 register 前，请始终使用 "serviceWorker" in navigator 进行特性检测，否则在不具备该 API 的浏览器中调用会抛出错误。无法通过填充兼容层实现支持——服务工作线程需要浏览器级集成，因此无法进行填充。
scope
scope 是工作线程控制的路径前缀。默认情况下，scope 是工作线程文件所在的目录：/sw.js 控制 / 下的所有 URL。若要从不同的文件位置注册一个 scope 更深的工作线程，请设置 scope 选项 AND 提供 Service-Worker-Allowed 响应头。
sw.js 的放置位置
将 sw.js 放在应用根目录（/sw.js），这样它的默认 scope 就能覆盖整个网站。更深的路径（/app/sw.js）会将 scope 限制在 /app/ 及其下级路径，这通常不是您想要的结果。
注册时机
页面加载后再注册工作线程，以避免在关键渲染期间争用带宽：window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js"))。PWA 功能会在后续访问时生效，不会延迟首次访问。
更新
浏览器会自动检查是否有更新的 sw.js（通常每 24 小时一次，并且在大多数页面加载时检查）。如果文件内容发生变化，新的工作线程会被下载、安装，并处于“waiting”状态，直到所有现有标签页关闭——随后它才会激活。
强制更新
registration.update() 会手动触发更新检查。在新的 sw.js 中使用 self.skipWaiting()，可以立即激活它，而不必等待标签页关闭。将两者结合起来即可实现“始终运行最新工作线程”的行为，但代价是会在会话中途重新获取资源。
取消注册
registration.unregister() 会移除工作线程。如果有问题的工作线程导致网站无法正常运行，这在开发过程中很有用。在 Chrome DevTools 中，Application → Service Workers 提供了用于调试的“取消注册”按钮，可以实现同样的目的。
常见错误
通过 HTTP 注册工作线程（没有 HTTPS）会静默失败——服务工作线程要求安全来源（HTTPS，或开发时使用 localhost）。如果注册没有生效，请检查控制台中是否有“发生了 SSL 证书错误”消息。
协调工作线程与页面
工作线程无法访问 DOM。要传递消息，请在页面中使用 navigator.serviceWorker.controller.postMessage()，并在工作线程中使用 self.addEventListener("message", handler)（反之亦然）。这对缓存失效、版本检查和自定义事件很有用。
首次访问与重复访问
首次访问时，工作线程会安装，但只有页面重新加载后才开始控制页面。要立即控制首次导航，请在 activate 事件中调用 self.clients.claim()，这对离线优先应用很有用。
知识检查
为什么服务工作线程必须通过 HTTPS（或 localhost）提供？
总结
完成特性检测后，通过页面 JS 使用 navigator.serviceWorker.register("/sw.js") 注册服务工作线程。将 sw.js 放在应用根目录以获得完整 scope。在页面加载时注册，以避免与关键渲染争用资源。浏览器会定期自动检查更新；可使用 registration.update 或 skipWaiting 强制更新。必须使用 HTTPS，以防止恶意注入工作线程。
常见问题解答
「从 HTML 注册服务工作线程」课时是免费的吗？
是的 — 「从 HTML 注册服务工作线程」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「从 HTML 注册服务工作线程」这节课中我会学到什么？
使用脚本标签和 navigator API 注册服务工作线程 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「从 HTML 注册服务工作线程」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。