一、什么是Service workers
Service workers 本质上充当 Web 应用程序、浏览器与网络（可用时）之间的代理服务器。这个 API 旨在创建有效的离线体验，它会拦截网络请求并根据网络是否可用采取来适当的动作、更新来自服务器的的资源。它还提供入口以推送通知和访问后台同步 API。
简单来说就是：Service workers在浏览器与服务器之间充当中间人的角色。他会拦截网站中的所有请求，判断直接读取本地缓存还是请求服务器。
注意：
基于web worker（一个独立于JavaScript主线程的独立线程，在里面执行需要消耗大量资源的操作不会堵塞主线程）
在web worker的基础上增加了离线缓存的能力
本质上充当Web应用程序（服务器）与浏览器之间的代理服务器（可以拦截全站的请求，并作出相应的动作->由开发者指定的动作）
创建有效的离线体验（将一些不常更新的内容缓存在浏览器，提高访问体验）
由事件驱动的,具有生命周期
可以访问cache和indexDB
支持推送
并且可以让开发者自己控制管理缓存的内容以及版本
出于安全考量，Service workers只能由HTTPS承载，毕竟修改网络请求的能力暴露给中间人攻击会非常危险。
二、Service workers的使用步骤
网站中应用Service workers需要进行：注册、下载、安装、激活
注册Service workers
注册Service workers之前需要先创建Service workers文件例如创建sw.js 文件：
// sw.js 文件
// 安装
self.addEventListener('install', function (e) {
// 缓存 App Shell 等关键静态资源和 html (保证能缓存的内容能在离线状态跑起来)
});
// 激活
self.addEventListener('activate', function (e) {
// 激活的状态，这里就做一做老的缓存的清理工作
});
// 缓存请求和返回（这是个简单的缓存优先的例子）
self.addEventListener('fetch', function (e) {
e.respondWith(caches.match(e.request)
.then(function (response) {
if (response) {
return response;
}
// fetchAndCache 方法并不存在，需要自己定义，这里只是示意代码
return fetchAndCache(e.request);
})
);
});
然后将sw.js放到网站根目录使用ServiceWorkerContainer.register()方法进行注册
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/sw.js');
}
语法
ServiceWorkerContainer.register(scriptURL, options)
.then(
function(ServiceWorkerRegistration) {
// do something
}
);
scriptURL:service worker脚本的URL.
options 可选:注册时提供选项的配置对象。 目前可用的选项包括：* scope: 一个 USVString，表示定义service worker注册范围的URL ；service worker可以控制的URL范围。通常是相对URL。默认值是基于当前的location，并以此来解析传入的路径.
Service Worker 的载入是完全异步的（Chrome DevTools 中 Network 的 XHR 中可以找到），注册的时候不用担心 block 的问题。
下载、安装和激活
用户首次访问service worker控制的网站或页面时，Service worker会立刻被下载。
在默认情况下，Service Worker 必定会每24小时被下载一次，如果下载的文件是最新文件，那么它就会被重新注册和安装，但不会被激活，当不再有页面使用旧的 Service Worker 的时候，它就会被激活。
注意事项
Service worker运行在worker上下文 --> 不能访问DOM
它设计为完全异步，同步API（如XHR和localStorage）不能在service worker中使用
出于安全考量，Service workers只能由HTTPS承载
在Firefox浏览器的用户隐私模式，Service Worker不可用
其生命周期与页面无关（关联页面未关闭时，它也可以退出，没有关联页面时，它也可以启动）
具体详情请查看以下参考文章
参考
如何优雅的为 PWA 注册 Service Worker
Service Worker ——这应该是一个挺全面的整理
service worker 是什么？看这篇就够了
Service Worker API
ServiceWorkerContainer.register()
网友评论