[w3c/ServiceWorker] Provide an easier way to listen for waiting/activating/redundant Service Workers (#1247)

Breaking off from #1222.

`ServiceWorker.state` has five states: `installing`, `installed` (waiting), `activating`, `activated`, and `redundant`.

Today, client-side code can listen for `installing` SWs with `ServiceWorkerRegistration.onupdatefound`; `activated` can be tracked with `navigator.serviceWorker.oncontrollerchange`.

Some users apparently want to track `redundant` SWs for error handling, and perhaps someone would want to log the `activating` event for performance tracking. Lots of users want to track the `installed` state so they can show a refresh banner.

The other three states are annoying to listen for.

```js
function listenForStateChanges(reg, callback) {
  if (reg.installing) reg.installing.addEventListener('statechange', callback);
  if (reg.waiting) reg.waiting.addEventListener('statechange', callback);
  reg.addEventListener('updatefound', function() {
    reg.installing.addEventListener('statechange', callback);
  });
}
```

In #1222 I suggested a promise-based API for a waiting SW, but it seems like it might be nice if `statechange` bubbled up to the registration, so users who wanted to track the `redundant` and `activating` states would just do this:

```js
reg.addEventListener('statechange', callback);
```

Listening for a redundant service worker might look like this:

```js
navigator.serviceWorker.ready.then(function(reg) {
  reg.addEventListener('statechange', function(e) {
    if (e.target.state === 'redundant') console.log('redundant');
  });
});
```

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/ServiceWorker/issues/1247