PWA-生命周期

《PWA实战》记录。[以]塔勒·埃特尔 著 张俊达 译

理解service worker作用域

我们如果把serviceworker.js文件放置到根目录中，那么其就可以控制来自站点中任何地方的所有请求。
如果我们把它放置到js目录中，只有源于该子目录的请求才会通过它。

你可以在注册的时候传一个service worker的时候传入一个scope选项，用来覆盖service worker默认的作用域。
这样可以将它的作用域限制在目录较小的子集。（但是不能扩大作用域）

//这两个具有相同的作用域
navigator.serviceWorker.register("/sw.js");
navigator.serviceWorker.register("/sw.js",{scope:"/"});

//这两个各自控制了一个不同的目录
navigator.serviceWorker.register("/sw-login.js",{scope:"/login"});
navigator.serviceWorker.register("/sw-regist.js",{scope:"/regist"});

生命周期

1. 解析成功=> Parsed : 首次注册Service Worker，一般用来判断游览器是否支持Service Worker。

2. 安装=> Installing : 这个状态发生在Service Worker注册之后，一般用waitUntil来对一些静态资源进行缓存。
   该事件有两个回调方法
   event.waitUntil() : 传入一个Promise参数，该函数会延长事件的存在时间，直到传入的Promise完成。
   self.skipWaiting() : self 是当前context的global变量，执行该方法表示，强制把当前正处在等待（waiting）状态的Service Worker 进入激活（activate）状态

   在install事件中，可以通过waitUntil等待缓存完成，这样确保了在整个链条中如果遇到任何问题，service sorker都不会被安装。

3. 安装后=> Installed/waiting : 一旦Service Worker安装成功，就会进入installed状态。
   除非另一个激活的Service Worker依然在控制应用，在这种情况下会维持waiting的状态，等待其他的Service Worker线程关闭。

4. 激活=> Activating : 在这个状态下允许 其他 没有被Service Worker控制的客户端，完成worker的安装，并且清除了其他的worker以及关联缓存的旧缓存资源，等待新的Service Worker线程被激活。
   该事件有两个回调方法
   event.waitUntil()： 传入一个Promise参数，该函数会延长事件的存在时间，直到传入的Promise完成。
   self.clients.claim()：在 activate 事件回调中执行该方法表示取得页面的控制权, 这样之后打开页面都会使用版本更新的缓存。旧的 Service Worker 脚本不再控制着页面，之后会被停止。

5. 激活后( Activated )：在这个状态会处理 activate 事件回调 (提供了更新缓存策略的机会)。并可以处理功能性的事件 fetch (请求)、sync (后台同步)、push (推送)。

6. 废弃状态 ( Redundant )：这个状态表示一个 Service Worker 的生命周期结束。
   进入redundant状态的原因可能为这几种：
   a. 安装 (install) 失败
   b. 激活 (activating) 失败
   c. 新版本的 Service Worker 替换了它并成为激活状态

结束🐟

无限枝头好颜色，可怜开不为重阳。——「咏菊」丘浚