ServiceWorkerRegistration

ServiceWorkerRegistration控制ServiceWorker，如作用范围等。
注册对象是WorkerServiceGlobalScope和WindowScope沟通的桥梁。在两个上下文中都可以操作ServiceWorkerRegistration对象控制ServiceWorker。

1. 通过ServiceWorkerContainer.register方法用给定的scriptURL创建或者更新一个注册对象（ServiceWorkerRegistration）。
2. 浏览器会持久化已激活的注册对象。
   ServiceWorkerRegistration会被持久化的，多次注册相同的SW，其对应的Registraction对象是相等的。

unregister

到底这个操作是干嘛的？试了只是导致SW的运行状态改成STOPPED，本身的状态没变，并且页面依旧被SW控制着。再试试，是可以把SW变成redundant状态的。

from note.

ServiceWorker

ServiceWorker本身很简单，没有方法，只有属性和事件监听方法。

1. ServiceWorker的父对象是Worker
2. terminater方法不能用

from note.

WindowScope和ServiceWorkerGlobalScope通讯

ServiceWorkerContainer和ServiceWorkerGlobalScope都可以绑定message事件，来监听来自postMessage的消息

The ServiceWorkerGlobalScope.onmessage event of the ServiceWorkerGlobalScope interface is called whenever incoming messages are received.

但是到底在监听谁调用的postMessage方法呢？

1. WindowScope向ServiceWorkerGlobalScope发送信息

通过ServiceWorker.postMssage方法，如：

// page js
navigator.serviceWorker.ready.then(function(registration) {
    registration.active.postMessage('hello');
 })

// sw js
self.addEventListener('message', function(event) {
    event.source.postMessage(`Hi, I got you with "${event.data}"`)
})

还可以在ServiceWorkerContainer.register方法获取ServiceWorker对象。

注意：
通过ServiceWorkerGlobalScope.registration也可以获取ServiceWorker, 其postMessage方法也是向当前ServiceWorkerGlobalScope发送消息。

2. ServiceWorkerGlobalScope向WindowScope发送信息

在ServiceWorkerGlobalScope中使用WindowClient.postMessage向WindowScope发送信息。在WindowScope中通过ServiceWorkerContainer监听message事件。
ServiceWorkerGlobalScope可以有多个客户端（clients属性），所以可以实现对指定的Client发送信息也可以向多个client广播信息。

// pageJS
navigator.serviceWorker.addEventListener('message', function(event) {
            console.log('Msg from sw: ' + event.data)
        })

// sw js
self.addEventListener('message', function(event) {
    console.log(`Msg from Client ${event.source.id}: "${event.data}"`)
    event.source.postMessage(`Hi, I got you with "${event.data}"`)
})

当然了在ServiceWorkerGlobalScope中有很多场景下使用WindowClient，见clients属性， 如：

• Demo1 在fetch回调函数里使用

// sw js
self.addEventListener('fetch', event => {
    self.clients.get(event.clientId).then(client => {
        client && client.postMessage('Wow！ SW 增长处理我发出的请求')
    })
})

注意：

1. ServiceWorkerContainer和ServiceWorkerGlobalScope的message事件的event对象的类型是不一样的：前者是MessageEvent后者是ExtendableMessageEvent。

from note.

Issues

1. 浏览器是如何加载scriptsURL脚本的？缓存测试时怎样的？
   常见的是scripts标签
2. 如何评估性能指标？chrome-devtools
3. 兼容性
4. ServiceWorkerGlobalScope不准许同步IO？那importScripts函数呢？

参考：

1. Lavas Service Worker 版本更新

from note.

SW的功能

1. 代理功能（fetch, 缓存）
2. 推送 ？
3. 通知 ？
4. 同步 ？

参考

1. MDN 使用 Service Workers
   

from note.

from note.

参考

1. Google Dev搜索

1.1. Introduction to Service Worker
1.2. 服务工作线程生命周期
1.3. 服务工作线程：简介

from note.