ServiceWorker 让你的网页拥抱服务端的能力
前言
ServiceWorker 是一个运行在浏览器背后的独立线程，它拥有访问网络的能力，可以用来实现缓存、消息推送、后台自动更新等功能，甚至可以用来实现一个完整的 Web 服务器。
因为 ServiceWorker 运行在浏览器背后，这个特性使它可以实现一些不需要服务器参与的功能，比如消息推送、后台自动更新等。
什么是 ServiceWorker
ServiceWorker 提供了一个一对一的代理服务器，它可以拦截浏览器的请求，并根据自己的逻辑处理这些请求，比如直接返回缓存的资源，或从网络获取资源后缓存起来再返回给浏览器。
作为一个服务器，ServiceWorker 也有生命周期管理，不过它的生命周期相对简单，只有两个阶段：安装和激活。可以通过 ServiceWorker.state 获取状态。
为了更好地理解 ServiceWorker，接下来我们将通过代码示例了解它的使用方法、生命周期以及一些实用功能。
ServiceWorker 的使用
注册 ServiceWorker
ServiceWorker 的注册通过 navigator.serviceWorker.register 来完成，接收两个参数：
- ServiceWorker 脚本地址。
- 一个配置对象，目前只有一个属性
scope，用于指定 ServiceWorker 的作用域，默认值为 ServiceWorker 脚本所在目录。
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js', {
scope: '/'
}).then(function (registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function (err) {
console.log('ServiceWorker registration failed: ', err);
});
}
注册函数签名说明
/**
* 注册 ServiceWorker
* @param {string} scriptURL ServiceWorker 脚本地址
* @param {Object} options 配置项
* @param {string} options.scope ServiceWorker 作用域
* @returns {Promise<ServiceWorkerRegistration>}
*/
register(scriptURL, options)
ServiceWorker 生命周期
ServiceWorker 的生命周期包括三个阶段：安装、激活和运行。
安装
在 ServiceWorker 注册成功后，浏览器开始下载 ServiceWorker 脚本。这个阶段是异步的，可以在 install 事件中监听，并使用 event.waitUntil 等待异步操作完成。
self.addEventListener('install', function (event) {
console.log('install');
event.waitUntil(
// 这里可以做一些缓存操作
);
});
激活
在安装完成后，浏览器开始激活 ServiceWorker。同样是异步的，可以在 activate 事件中监听。
self.addEventListener('activate', function (event) {
console.log('activate');
event.waitUntil(
// 这里可以做一些清理缓存的操作
);
});
运行
激活完成后，ServiceWorker 开始运行。此时可以在 fetch 事件中拦截请求，处理逻辑并返回响应。
self.addEventListener('fetch', function (event) {
console.log('fetch');
});
ServiceWorker 请求拦截
ServiceWorker 可以拦截所有请求，甚至包括插件的请求。下面的例子演示了拦截不同类型的请求：
self.addEventListener('fetch', function (event) {
console.log('fetch', event.request.url);
});
ServiceWorker 事件监听
除了生命周期事件，ServiceWorker 还可以监听其他事件，如推送（push）、同步（sync）和消息（message）等。
self.addEventListener('push', function (event) {
console.log('push');
});
self.addEventListener('sync', function (event) {
console.log('sync');
});
self.addEventListener('message', function (event) {
console.log('message');
});
ServiceWorker 缓存
ServiceWorker 提供了强大的缓存功能，可以通过 Cache API 缓存静态资源，支持离线访问。
self.addEventListener('install', function (event) {
event.waitUntil(
caches.open('my-cache').then(function (cache) {
return cache.addAll([
'/',
'/index.css',
'/axios.js',
'/index.html'
]);
})
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request).then(function (response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
缓存更新
在激活阶段，可以删除旧的缓存并添加新的缓存，以实现资源更新。
self.addEventListener('activate', function (event) {
event.waitUntil(
caches.keys().then(function (cacheNames) {
return Promise.all(
cacheNames.map(function (cacheName) {
if (cacheName !== 'my-cache') {
return caches.delete(cacheName);
}
})
);
})
);
});
实战
结合之前讲解的内容，实现一个简单的离线访问功能，缓存必要的资源，并拦截请求返回缓存的内容。
总结
ServiceWorker 是一个非常强大的功能，它可以帮助我们实现诸如缓存、离线访问、消息推送等功能。本文介绍了 ServiceWorker 的基本使用和缓存策略，并实现了离线访问的功能。后续我们还会探讨更多 ServiceWorker 的高级功能，如消息推送和后台同步。