PWA系列 - Service Workers 生命周期

浏览器一般有三类Worker,

(1) Dedicated Worker, 专用worker, 只能被创建它的JS访问. 创建它的页面关闭, 它的生命周期就结束了.

(2)Shared Worker, 共享worker, 可以被同一域名下的JS访问. 关联的页面都关闭时, 它的生命周期就结束了.

(3)ServiceWorker, 是事件驱动的worker, 生命周期与页面无关. 关联页面未关闭时, 它也可以退出, 没有关联页面时, 它也可以启动.

这三类Worker, 一个非常重要的区别在于不同的生命周期.ServiceWorker与文档无关的生命周期, 是它能提供可靠Web服务的一个重要基础.

本文重点描述ServiceWorker如果管理它与文档无关的生命周期, 以及如何管理各种版本状态.

二 生命周期

官方文档提到, ServiceWorker生命周期的目的是,

实现离线优先.

在不打断现有ServiceWorker的情况下，准备好一个新的ServiceWorker.

ServiceWorker注册的scope下的页面, 同一时间只由一个ServiceWorker控制.

确保你的网站只有一个版本在运行.

Service Worker 可能有以下几种状态：解析成功（parsed），正在安装（installing），安装成功（installed），正在激活（activating），激活成功（activated），废弃（redundant）。

(1) Service Worker 注册成功，navigator.serviceWorker.register返回成功, 并不意味着它已经完成安装或已经激活，仅仅是worker的脚本被成功解析，比如, 注册worker的URL与文档同源，协议是 HTTPS。

(2) Service Worker 注册成功后，会转入installing状态, 此时, install事件会被触发, 比较典型的做法是在install事件的处理函数中提前加载相关静态文件进缓存.

self.addEventListener('install',function(event) {event.waitUntil(caches.open(currentCacheName).then(function(cache) {returncache.addAll(arrayOfFilesToCache);}));});

如果有event.waitUntil方法, 必须等待它里面的操作成功完成, 否则会失败, 转入redundant状态.

(3) Service Worker 安装成功后, 会转入installed/waiting状态, 此时, ServiceWorker已准备好, 在等待接管页面已有的worker, 从而可以控制页面.

(4) Service Worker在满足下面条件之一时, 可以转入activating状态:

没有active worker在运行.

JS调用self.skipWaiting()跳过waiting状态.

用户关闭页面, 释放了当前处于active状态的worker.

一定时间之后, 系统释放了当前处于active状态的worker.