简介
Service worker是pwa实现的关键,理解service worker，它有什么特征，是如何工作的？
特征
- 运行在自己的全局脚本上下文中
- 不绑定到具体的页面
- 无法修改页面中的元素，因为它无法访问dom
- 只能使用https
如何工作的
Worker的生命周期
- 注册
- 下载，解析和执行
- 安装
- 激活
注册
调用register函数, service worker开始下载
下载，解析和执行
在注册过程中, 浏览器会开始下载, 解析并执行service worker，如果在此步骤出现任何的错误，resigter返回的promise都会执行reject操作，并且service worker会被废弃.
安装
一旦service worker成功执行，安装事件就会激活， service worker是基于事件的，意味着我们可以利用这些事件来实现超快速缓存技术。
激活
一旦安装完成，worker就被激活，并控制其范围内的一切，如果生命周期中的所有事件都成功了，worker便准备就绪，随时可以使用。
实例代码
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img{
width: 300px;
}
</style>
</head>
<body>
<img src="/images/xxx.jpg" alt="">
<script>
// 注册service worker.
registerWorker();
function registerWorker(){
// 判断是否支持serviceWorker.
if('serviceWorker' in navigator){
navigator.serviceWorker.register('/sw.js').then(
registration => {
// 注册成功
console.log('注册成功，', registration.scope);
}
).catch(err => {
// 注册失败
console.log(err);
})
}
}
</script>
</body>
</html>
sw.js文件
// 为fetch事件添加监听器
self.addEventListener('fetch', event => {
// 拦截.jpg结尾的文件, 获取demo.jpg作为代替图片来响应请求.
if(/\.jpg$/.test(event.request.url)){
event.respondWith(fetch('/images/demo.jpg'));
}
});
github
备注
当第一次加载页面时，service worker还没有激活，所以它不会处理任何的请求，只有当它安装和激活后，才能控制其范围内的一切，这意味着，只有刷新页面或导航到另一个页面。service worker内的逻辑才会启动。如果要让它立即工作, 我们也有一定的办法, 后面会介绍对于的解决方案.
