各位好，欢迎来到今天的“Service Worker那些事儿”讲座。我是你们的老朋友，今天咱们就来聊聊这个在Web开发领域越来越重要的家伙 – Service Worker。
开场白：网页，你慢些走！
大家有没有遇到过这种情况：手机信号不好，或者干脆没信号，打开一个网页，半天刷不出来，然后屏幕上出现一个大大的“网络错误”？是不是很扫兴？
Service Worker，就像一个网页的“贴身保镖”，专门来解决这些问题。它能让你的网页在离线状态下也能访问，还能实现消息推送等高级功能。听起来是不是很厉害？别怕，其实它并没有那么神秘，今天我们就来一层层揭开它的面纱。
Service Worker：网页的幕后英雄
Service Worker 本质上就是一个运行在浏览器后台的JavaScript脚本。它独立于你的网页，可以拦截和处理网络请求，缓存资源，甚至在网页关闭后仍然运行。
你可以把它想象成一个快递分拣员，网页（也就是你）发出请求（比如“我要显示首页”），这个“分拣员”会先看看自己有没有缓存好的“包裹”（比如首页的HTML、CSS、JS），如果有，直接给你，速度飞快。如果没有，再去真正的服务器取货。
Service Worker解决了什么问题？
Service Worker主要解决了以下几个痛点：
- 离线访问 (Offline Access): 这是Service Worker最核心的功能。通过缓存网页资源，即使在没有网络连接的情况下，用户也能访问部分或全部内容。想象一下，在地铁里也能刷朋友圈，是不是很爽？
- 提升性能 (Performance Improvement): 从缓存中直接获取资源，避免了每次都从服务器请求，大大缩短了加载时间，提升了用户体验。
- 消息推送 (Push Notifications): 即使网页关闭，也能通过Service Worker接收和显示推送消息。这对于新闻App、社交应用等非常有用。
- 后台同步 (Background Sync): 允许在后台进行数据同步，比如用户在离线状态下提交了表单，Service Worker可以在网络恢复后自动提交。
Service Worker的生命周期：从出生到退休
Service Worker的生命周期有点复杂，但理解了它，才能更好地使用它。主要分为以下几个阶段：
-
注册 (Registration): 首先，你需要在你的网页中注册Service Worker。这告诉浏览器，你要使用Service Worker来管理你的网站。
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') // sw.js是你的Service Worker脚本文件 .then(function(registration) { console.log('Service Worker 注册成功，作用域:', registration.scope); }) .catch(function(error) { console.log('Service Worker 注册失败:', error); }); }这段代码检查浏览器是否支持Service Worker，如果支持，就注册
sw.js文件。registration.scope指的是Service Worker控制的范围，默认是Service Worker脚本所在的目录及其子目录。 -
安装 (Installation): 注册成功后，浏览器会尝试安装Service Worker。在这个阶段，你可以缓存一些静态资源，比如HTML、CSS、JS、图片等。
// sw.js 文件内容 const CACHE_NAME = 'my-site-cache-v1'; // 缓存名称，每次更新Service Worker时需要修改，强制浏览器更新缓存 const urlsToCache = [ '/', '/index.html', '/style.css', '/script.js', '/images/logo.png' ]; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); // 将需要缓存的资源添加到缓存 }) ); });event.waitUntil()用于告诉浏览器，安装过程还没有完成，直到promise resolve。caches.open()用于打开一个名为my-site-cache-v1的缓存。cache.addAll()用于将urlsToCache数组中的资源添加到缓存中。 -
激活 (Activation): 安装成功后，Service Worker会进入激活阶段。在这个阶段，你可以清理旧的缓存，准备处理网络请求。
self.addEventListener('activate', function(event) { const cacheWhitelist = [CACHE_NAME]; // 白名单，保留的缓存名称 event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); // 删除不在白名单中的缓存 } }) ); }) ); });这段代码遍历所有缓存，删除不在
cacheWhitelist中的缓存。这是一种常见的清理旧缓存的方法。 -
运行 (Running): 激活后，Service Worker就可以拦截和处理网络请求了。这是Service Worker发挥作用的主要阶段。
self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) // 尝试从缓存中查找请求的资源 .then(function(response) { // Cache hit - return response if (response) { return response; // 如果缓存中有，直接返回 } // 重要：克隆 request。request 是一个 stream，只能消费一次 const fetchRequest = event.request.clone(); return fetch(fetchRequest).then( // 如果缓存中没有，从网络请求 function(response) { // 检查是否收到了有效的响应 if(!response || response.status !== 200 || response.type !== 'basic') { return response; // 如果响应无效，直接返回 } // 重要：克隆 response。response 也是一个 stream，需要 consume const responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); // 将响应添加到缓存 }); return response; } ); }) ); });这段代码拦截所有
fetch事件，首先尝试从缓存中查找请求的资源。如果缓存中有，直接返回。如果没有，从网络请求，并将响应添加到缓存中。注意request和response都是stream，只能消费一次，所以需要clone()。response.type !== 'basic'是保证只有同源的请求才会被缓存。 -
更新 (Update): 当浏览器检测到Service Worker脚本文件发生变化时，会重新开始安装过程。新的Service Worker安装成功后，会进入等待状态，直到旧的Service Worker不再被使用时才会被激活。
-
废弃 (Redundant): 当Service Worker被新的Service Worker替换，或者被手动取消注册时，就会进入废弃状态。
生命周期流程图：
| 阶段 | 描述 | 代码示例
| 安装阶段 | 缓存静态资源 (HTML、CSS、JavaScript、图片等)，通常会使用 caches.addAll() 方法。 | “`javascript
self.addEventListener(‘install’, function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});