ServiceWorkerRegistration.active not being set first time (Chrome) - service-worker

Question

On Chrome Mac. I am trying to register a ServiceWorker and set a variable to it. When I call register() and the service worker has not previously been installed, the "active" property seems to be set to null immediately and then get initialized (asynchronously?) very soon after.
var sw = null;
navigator.serviceWorker.register('preview/sw.js', {scope: 'preview/'}).
then(function(registration) {
console.dir(registration);
sw = registration.active;
if (!sw) {
console.log('wat');
console.dir(registration);
}
});
In other words, I get into the if-block the first time the service worker has been installed. The console shows the active property as being set equal to the ServiceWorker in both console.dir() commands, yet the sw variable is null.
Refreshing the page fixes the problem. Anybody know what could be causing this?

Answer 1

For the first visit you're describing, the registration is not yet active when that promise resolves but it is "installing", so the registration's installing property will return a service worker.
Since no service worker is in the waiting state, it will then transition to activating then active. So you're right in that registration property is not initially active but on refresh, it will be.
The following code will illustrate:
navigator.serviceWorker.register('/serviceworker.js').then(onRegistration);
function onRegistration(registration) {
if (registration.waiting) {
console.log('waiting', registration.waiting);
registration.waiting.addEventListener('statechange', onStateChange('waiting'));
}
if (registration.installing) {
console.log('installing', registration.installing);
registration.installing.addEventListener('statechange', onStateChange('installing'));
}
if (registration.active) {
console.log('active', registration.active);
registration.active.addEventListener('statechange', onStateChange('active'));
}
}
function onStateChange(from) {
return function(e) {
console.log('statechange initial state ', from, 'changed to', e.target.state);
}
}
On first visit, the console.log output would be:
installing ServiceWorker {scriptURL: "http://...", state: "installing", onstatechange: null, onerror: null}
statechange initial state installing changed to installed
statechange initial state installing changed to activating
statechange initial state installing changed to activated
The state changes happen asynchronously as you observed.

Answer 2

The service worker is registered, but it isn't active yet and it isn't controlling your page yet.
If you want your service worker to become active, you can call the function skipWaiting in the install event handler.
If you want your service worker to control the page as soon as it becomes active, you can use the Clients.claim function in the activate event handler.
You can see an example in the ServiceWorker Cookbook Immediate Claim recipe.