# 注册

使用 service worker 的第一步就是注册, 注册完成后才会更进一步的操作。

# 语法

ServiceWorkerContainer.register(scriptURL, options)
    .then(
        function(ServiceWorkerRegistration) {
            // do something
        }
);

# options

  • scope 表示定义service worker注册范围的URL

# 返回值

注册的返回结果 ServiceWorkerRegistration

# 属性

名称 说明
scope 作用域
installing 是否在安装中
waiting 是否等待中
active 激活的 service worker 吗?
periodicSync -
pushManager -
sync -

# 事件

名称 说明
onupdatefound 更新被发现

# 方法

名称 说明
getNotifications -
showNotification -
update 主动检查更新
unregister 取消注册

# 示例

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js').then(function(reg) {
            console.log(reg);
        }, function(err) {
            console.log(err);
        })
    });
}

https://developer.mozilla.org/zh-CN/docs/Web/API/ServiceWorkerRegistration

# 运行环境

ServiceWorkerGlobalScope 接口,代表一个service worker的全局执行上下文。也就是常用的 sw.js 的上下文。

# 属性

clients

使用了 service worker 的客户端,如 "window", "worker" 等, 详情见 Clients

registration

就是注册返回的 ServiceWorkerRegistration 对象

caches

service worker 中使用的缓存

# 事件

名称 描述
oninstall 新的 service worker 被下载后触发安装事件
onactivate 激活新的 service worker 时触发
onfetch 当有请求时触发
onmessage 收到其他客户端发送的消息
onnotificationclick -
onnotificationclose -
onpush -
onpushsubscriptionchange -
onsync -

# 方法

skipWaiting

使 service worker 从等待状态直接到激活状态

fetch

网络请求