registration.ready promise

[jakearchibald]

To wait for the current registration to get an active worker. This helps explain navigator.serviceWorker.ready

[jakearchibald]

Here's a rough polyfill for those looking for one:

function regReady(reg) {
  return new Promise((resolve, reject) => {
    if (reg.active) {
      resolve();
      return;
    }

    if (!reg.installing && !reg.waiting) {
      reject(Error('Install failed'));
      return;
    }

    (reg.installing || reg.waiting).addEventListener('statechange', function() {
      if (this.state == 'redundant') {
        reject(Error('Install failed'));
      } else if (this.state == 'activated') {
        resolve();
      }
    });
  });
}

[ithinkihaveacat]

It would be also useful if there were a way to wait for a specific worker to become active and controlling the page. (If, for example, you have versioned your service worker (and JS, CSS, etc.) and your HTML depends on a particular version.)

I think the following accomplishes this, though I keep finding edge cases I've missed:

function registerReady(script, options) {
  return navigator.serviceWorker.register(script, options).then(r => {
    const incoming = r.installing || r.waiting;
    if (r.active && !incoming) {
      return r;
    }
    return new Promise(resolve => {
      const l = e => {
        if (e.target.state === 'activated' || e.target.state === 'redundant') {
          incoming.removeEventListener('statechange', l);
          if (e.target === navigator.serviceWorker.controller) {
            resolve(r);
          }
        }
      };
      incoming.addEventListener('statechange', l);
    });
  });
}

It can be used as a direct replacement for navigator.serviceWorker.register():

// Fulfilled when '/sw.06fdc991c6a4.js' is active *and* controlling the page (maybe never)
const reg1 = registerReady('/sw.06fdc991c6a4.js', options);

To contrast with some other options:

// Fulfilled when browser "starts executing" '/sw.06fdc991c6a4.js'
const reg2 = navigator.serviceWorker.register('/sw.06fdc991c6a4.js', options);

// Fulfilled when (some) service worker is active (may not be controlling the page)
const reg3 = navigator.serviceWorker.ready;

// Fulfilled when '/sw.06fdc991c6a4.js' is active (may not be controlling the page)
const reg4 = regReady(reg2); // as above