ServiceWorkerRegistration.active не устанавливается в первый раз (Chrome)

Question

На Chrome Mac. Я пытаюсь зарегистрировать ServiceWorker и установить для него переменную. Когда я вызываю register(), и рабочий-сервис ранее не был установлен, свойство «active», кажется, сразу установлено на null, а затем вскоре после этого инициализируется (асинхронно?).

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); 
     } 
    }); 

Другими словами, я попадаю в if-блок при первом запуске сервисного работника. Консоль показывает активное свойство как установленное равным ServiceWorker в командах console.dir(), но переменная sw имеет значение null.

Обновление страницы устраняет проблему. Кто-нибудь знает, что может быть причиной этого?

Answer 1

Сервисный работник зарегистрирован, но он еще не активирован, и он еще не контролирует вашу страницу.

Если вы хотите, чтобы ваш сервисный работник стал активным, вы можете вызвать функцию skipWaiting в обработчике событий install.

Если вы хотите, чтобы ваш сервисный работник контролировал страницу сразу после ее активации, вы можете использовать функцию Clients.claim в обработчике событий activate.

Вы можете увидеть пример в ServiceWorker Cookbook Immediate Claim recipe.

Answer 2

Для первого посещения, которое вы описываете, регистрация еще не active, когда это обещание разрешается, но оно «устанавливается», поэтому свойство регистрации installing возвращает сервисного работника.

Поскольку в штате waiting не работает рабочий, он затем переходит на activating, затем active. Таким образом, вы правы в том, что свойство регистрации не изначально active, но при обновлении оно будет.

Следующий код иллюстрирует:

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', from, 'to', e.target.state); 
    } 
} 

На первом посещении console.log выход будет:

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 

изменения состояния асинхронно, как вы наблюдали.