注册 Service Worker
安装并激活 Service Worker。
注册 Service Worker 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
什么是服务工作线程
服务工作线程是浏览器在后台运行的脚本，与页面彼此独立。它充当可编程的网络代理：可以拦截请求、提供缓存响应，并支持离线体验。
功能检测
并非所有环境都支持服务工作线程。注册之前，请检查 navigator.serviceWorker，这样较旧的浏览器也能平稳降级。
if ('serviceWorker' in navigator) {
// safe to register
}注册
将服务工作线程的脚本 URL 传递给 navigator.serviceWorker.register 即可注册。它会返回一个 Promise，该 Promise 解析为注册对象。
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('registered, scope:', reg.scope))
.catch(err => console.log('registration failed:', err));注册作用域
作用域是工作线程可以控制的 URL 集合。默认情况下，作用域是脚本所在的目录。位于 /sw.js 的工作线程可以控制整个网站；位于 /app/sw.js 的工作线程只能控制 /app/。
navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.设置显式作用域
您可以使用选项缩小作用域，但除非服务器设置了特殊标头，否则不能将作用域扩大到脚本所在目录之外。
navigator.serviceWorker.register('/sw.js', {
scope: '/dashboard/'
});HTTPS 要求
服务工作线程要求使用安全上下文：生产环境中必须使用 HTTPS。开发时，localhost 会被视为安全来源。这样可以防止攻击者劫持网络代理。
install 事件
工作线程首次注册时，会运行其 install 事件。通常可以在这里预先缓存必需资源，使应用能够离线运行。
// sw.js
self.addEventListener('install', (event) => {
console.log('service worker installing');
});activate 事件
安装完成后，工作线程会触发 activate。这是清理旧版本缓存的地方，之后它才会开始控制页面。
// sw.js
self.addEventListener('activate', (event) => {
console.log('service worker activated');
});生命周期
服务工作线程会经历以下状态：
- installing — 正在运行安装处理程序
- installed/waiting — 已就绪，等待接管
- activating / activated — 现在正在控制页面
默认情况下，新的工作线程会等待旧页面关闭后才激活。
拦截请求
激活后，工作线程会通过 fetch 事件接收其作用域内的每个网络请求。您可以从缓存、网络或两者的组合中返回响应。
// sw.js
self.addEventListener('fetch', (event) => {
// event.request describes the outgoing request
console.log('intercepted', event.request.url);
});注册回顾
注册服务工作线程的步骤是：进行功能检测，使用脚本 URL 调用 register，注意作用域和 HTTPS 要求，并在工作线程脚本中处理 install、activate 和 fetch 事件。
快速检查
测试您对注册服务工作线程的理解。
回顾
您学习了如何注册服务工作线程：
- 使用
'serviceWorker' in navigator进行功能检测。 register(url, { scope })会返回一个 Promise。- 作用域默认为脚本所在的目录；同时必须使用 HTTPS。
- 在工作线程中处理
install、activate和fetch。
接下来学习 Cache API。
常见问题解答
「注册 Service Worker」课时是免费的吗？
是的 — 「注册 Service Worker」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「注册 Service Worker」这节课中我会学到什么？
安装并激活 Service Worker。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「注册 Service Worker」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗？
能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。