Service Worker 学习笔记
一、Service Worker 是什么
Service Worker是一个注册在指定源和路径下的事件驱动worker，本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。
二、Servic Worker 做什么
Service Worker 采用JavaScript控制关联的页面和网站，拦截并修改访问和资源请求，细粒度的缓存资源，最常见的情形就是 离线资源缓存。
三、Service Worker 的好处
Service Worker 运行在worker上下文，它不能访问DOM，现对于驱动应用的主JavaScript线程，它 运行在其他线程中 ，所以不会造成阻塞，它设计为完全异步，同步API（如XHR和localStorage）不能在 Servier Worker 中使用。
四、Service Worker 的一些方法
1. register 注册方法
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
// registration worked
console.log('Registration succeeded. Scope is ' + reg.scope);
})
}
2.install 安装、更新方法
self.addEventListener('install', function(event) {
// ...
});
3.activate 清理旧缓存方法
self.addEventListener('activate', function(event) {
// ...
});
4.waitUntil() 方法
说明：ExtendableEvent.waitUntil() 方法扩展了事件的生命周期。在服务工作线程中，延长事件的寿命从而阻止浏览器在事件中的异步操作完成之前终止服务工作线程。
self.addEventListener('install', function(event) {
event.waitUntil(Promise);
});
5.open() 方法
说明：打开或创建一个新的缓存,返回一个Promise
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
// ...
})
);
});
6.addAll()
说明：添加缓存资源的列表，接收一个由一组现对于origin的URL组成的数组
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/sw-test/',
'/sw-test/index.html',
'/sw-test/style.css',
'/sw-test/app.js',
'/sw-test/image-list.js',
'/sw-test/star-wars-logo.jpg',
'/sw-test/gallery/',
'/sw-test/gallery/bountyHunters.jpg',
'/sw-test/gallery/myLittleVader.jpg',
'/sw-test/gallery/snowTroopers.jpg'
]);
})
);
});
7. fetch 拦截请求事件
说明：每次任何被 service worker 控制的资源被请求到时，都会触发 fetch 事件
self.addEventListener('fetch', function(event) {
event.respondWith(
// magic goes here
);
});
8. respondWith()
说明：劫持HTTP响应
self.addEventListener('fetch', function(event) {
event.respondWith(
// ....
);
});
9. match()
说明：对网络请求的资源和cache里可获取的资源进行匹配，查看是否缓存中相应的资源
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
);
});
五、注意
- Service Worker 只能运行在 HTTPS协议 或 localhost 环境下，这是出于安全考量；
- Service Worker 大量使用 Promise，因为通常它们会等待响应后继续，并根据响应返回一个成功或者失败的操作。
