Service Workers
Service worker是一个注册在指定源和路径下的事件驱动worker。
Service worker运行在worker上下文，因此它不能访问DOM。不同于主线程，它运行在其他线程中，所以不会造成主线程阻塞。它设计为完全异步，同步API（如XHR和localStorage）不能在service worker中使用。
Service workers 本质上充当Web应用程序(服务端)与浏览器(客户端)之间的代理服务器。
可以提供有效有效的离线体验，拦截网络请求。还可以推送通知。
Service Workers 需要注意的地方
- 需要支持 HTTPS 访问你的页面。出于安全原因，
Service Workers要求必须在HTTPS下才能运行。（其实好多API都需要HTTPS的支持）
- 资源路径为根目录的绝对路径。最大作用域 (
scope)，为资源路径。https://www.lilnong.top/static/js/sw-20190621.js的最大作用路径为/static/js/
- 为了便于本地开发，
localhost也被浏览器认为是安全源。
- 在已经支持
serivce workers的浏览器的版本中，很多特性没有默认开启。如果你发现示例代码在当前版本的浏览器中怎么样都无法正常运行，你可能需要开启一下浏览器的相关配置：
Firefox Nightly: 访问 about:config 并设置 dom.serviceWorkers.enabled 的值为 true; 重启浏览器；
Chrome Canary: 访问 chrome://flags 并开启 experimental-web-platform-features; 重启浏览器 (注意：有些特性在Chrome中没有默认开放支持)；
Opera: 访问 opera://flags 并开启 ServiceWorker 的支持; 重启浏览器。
service worker 声明周期
- 下载
- 首次访问
service worker控制的网站或页面时，service worker会立刻被下载。 - 至少每24小时它会被下载一次。
2.安装
- 首次下载会尝试安装，
- 下载的文件是新的，尝试进行安装
3.激活
- 安装成功后它会被激活
- 如果现有
service worker已启用，新版本会在后台安装，但不会被激活，这个时序称为worker in waiting - 直到所有已加载的页面不再使用旧的
service worker才会激活新的service worker。新的service worker会被激活（成为active worker）。
我们页面引入sw.js内容为a。当我们修改为b。
这时候a和b都是已经安装完毕的，但是a是当前正在用的。b需要等没有页面在用a，才会进入激活状态。
Cache
Cache 为缓存的 Request/Response 对象对提供存储机制。
当前我们作为 ServiceWorker 生命周期的一部分。尽管它被定义在 service worker 的标准中, 但是它不必一定要配合 service worker 使用。也暴露在 window 作用域下的。
- Cache.add(request)
request 是一个字符串类型的 URL。如
cache.add('https://www.lilnong.top/static/css/normalize-8.0.0.css')
功能上等于调用 fetch(), 然后使用 Cache.put()将 response 添加到 cache 中。
- Cache.addAll(requests)
功能同上，只不过入参为字符串数组
- Cache.match(request, options)返回一个
Promise对象，resolve的结果是跟Cache对象匹配已经缓存的请求。requres同上，是要匹配的URLoptions如下
a.ignoreSearch: 设置是否忽略url中的query。该选项默认为 false。
b.ignoreMethod: true匹配时就不会验证 Request 对象的 http 方法 (通常只允许是 GET 或 HEAD 。) 该参数默认值为 false。
c.ignoreVary: 为 true 时匹配不进行 VARY 部分的匹配。例如，如果一个URL匹配，此时无论Response对象是否包含VARY头部，都会认为是成功匹配。该参数默认为 false。
d.cacheName: 一个 DOMString ，代表一个具体的要被搜索的缓存。注意该选项被 Cache.match()方法忽略。
- Cache.matchAll(request, options)
同上，返回一个Promise 对象，resolve的结果是跟Cache对象匹配的所有请求组成的数组。
- Cache.put(request, response)
人为的，为一个URL设置response
- Cache.delete(request, options)
搜索条目。如果找到，则删除该Cache 条目，并且返回一个resolve为true的Promise对象；如果未找到，则返回一个resolve为false的Promise对象。
- Cache.keys(request, options)
返回一个Promise对象，resolve的结果是Cache对象key值(request 对象)组成的数组。
ServiceWorker 的使用
serviceWorkerContainer.register()来注册
- 注册成功的话，会开启另一个线程来做这件事。与我们的网页是互不相干的。
service worker现在可以接收事件。
service worker控制的页面打开后会尝试去安装service worker。
- 最先发送给
service worker的事件是安装事件(在这个事件里可以开始进行填充 IndexDB和缓存站点资源)，让所有资源可离线访问。
- 当
oninstall事件的处理程序执行完毕后，可以认为service worker安装完成了。
- 当
service worker安装完成后，会接收到一个激活事件onactivate主要用途是清理先前版本的service worker脚本中使用的资源。
Service Worker现在可以控制页面了，但仅是在register()成功后的打开的页面。
ServiceWorker 的注册
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); }).catch(function(error) { // registration failed console.log('Registration failed with ' + error); }); }
