JavaScript 如何做 Service Worker
打开浏览器，在网页上点右键选“检查”，切换到“应用程序”面板，你会看到一个叫“Service Workers”的选项——这就是今天要聊的主角，一个能让网页像APP一样离线能用、加载更快的小工具。很多人觉得它是复杂的“前端黑科技”，其实用JavaScript写，就像给网页装了个“后台小助手”，步骤清晰到像拼乐高积木，咱们一步步拆明白。
第一步：先搭好“小助手的落脚点”——写个简单的SW脚本
Service Worker需要一个单独的JS文件当“本体”，比如取名叫sw.js，这个文件得放在网站根目录，这样它才能控制整个网站的页面。不用写复杂的代码，先做个最基础的“缓存助手”：
`javascript
// 定义缓存名，换内容时改个名字就能清旧缓存
const CACHE_NAME = 'my-site-cache-v1';
// 要缓存的文件，比如首页、CSS、JS这些核心资源
const urlsToCache = [
'/',
'/styles/main.css',
'/scripts/main.js'
];
`
这里举个生活化的例子：把缓存名当成你家冰箱的“保鲜盒标签”，比如“水果盒v1”，你换种水果存，标签改成“水果盒v2”，旧盒子就不用了，不会串味。
第二步：给网页“请小助手”——注册Service Worker
有了sw.js，得告诉网页“我要你帮我把这个小助手装进来”。在网页的JS文件（比如main.js）里加一段注册代码：
`javascript
if ('serviceWorker' in navigator) {
// 检查浏览器支不支持，旧浏览器会忽略这段代码
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('小助手注册成功啦，范围是：', registration.scope);
})
.catch(err => {
console.log('小助手注册失败：', err);
});
});
}
`
就像你请钟点工，得先给她打电话说“来我家干活，我家地址是XX”，浏览器就是“雇主”，注册代码就是“打电话请人”，成功了就会在控制台看到提示。
第三步：给小助手派活——监听它的“生命周期事件”
Service Worker有自己的“一生”：安装、激活、拦截请求，咱们要给它安排不同阶段的任务，这就靠监听事件：
**安装阶段：把要存的东西放进“缓存冰箱”**
小助手刚到家里，先干“整理冰箱”的活，把提前说好的urlsToCache里的文件都存起来，代码写在sw.js里：
`javascript
self.addEventListener('install', event => {
// waitUntil是让小助手等缓存完再算“安装完成”
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
`
比如你搬新家，请了收纳师，收纳师先把你提前列好的常用餐具、食材都放进冰箱，这样你一到家就能用。
**激活阶段：清理旧的“保鲜盒”**
如果之前装过旧版本的Service Worker，小助手激活时得把旧缓存删掉，避免新旧内容打架：
`javascript
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.filter(name => name !== CACHE_NAME)
.map(name => caches.delete(name))
);
})
);
});
`
就像你换了新的保鲜盒，把旧的、没用完的食材都清掉，冰箱不会乱。
**拦截请求：让小助手管“找资源”的事**
这是Service Worker最实用的功能：用户打开网页要找资源时，小助手先看看“冰箱里有没有”，有就直接拿，没有再去网上下载，这样加载更快，还能离线用：
`javascript
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(cachedResponse => {
// 有缓存就用缓存，没有就去网上拿
return cachedResponse || fetch(event.request);
})
);
});
`
比如你想吃苹果，先看看冰箱有没有，有就直接拿，没有再去超市买，不用每次都跑超市，省时间还方便。
最后：别踩这几个小坑
很多人第一次做会踩坑：一是sw.js必须放根目录，放子目录的话控制范围有限，相当于钟点工只能在你房间干活，不能去客厅；二是缓存名一定要改，改了内容却没改缓存名，用户看不到新内容；三是本地调试要开HTTPS，浏览器只允许安全的网站用Service Worker，本地用localhost也可以调试。
这样一套下来，你就用JavaScript做了一个基础的Service Worker，网页加载更快、断网也能打开核心内容，是不是没想象中难？