событие, связанное с событием рабочего рабочего, до завершения регистрационного события.

Question

. Я установил событие установки для сервисного работника, как показано ниже. Но событие установки, запущенное перед событием регистрации, завершено. См. Фрагменты кода и журналы консоли ниже.

Мое беспокойство заключается в том, как запускается событие установки до завершения регистрационного события?

if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('./service-worker.js',{scope : '/'}).then(function(registration) { 
    // Registration was successful 
    console.log('ServiceWorker registration successful with scope: ', registration.scope); 
    }).catch(function(err) { 
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err); 
    }); 
} 


var cacheName = 'V-1'; 
var filesToCache = [ 
    '/', '/index.html', 
    '/css/all.css', '/css/material.min.css', 
    '/js/all.js', '/js/material.min.js', 
    '/images/service-worker-1.png','/images/service-worker-2.png','/images/service-worker-3.png', 
]; 

self.addEventListener('install', function(e) { 
    console.log('[ServiceWorker] Installing'); 
    e.waitUntil(
    caches.open(cacheName).then(function(cache) { 
     console.log('[ServiceWorker] Caching app shell'); 
     return cache 
       .addAll(filesToCache) //this is atomic in nature i.e. if any of the file fails the entire cache step fails. 
       .then(() => {console.log('[ServiceWorker] App shell Caching Successful');}) 
       .catch(() => {console.log('[ServiceWorker] App shell Caching Failed');}) 
    }) 
); 
}); 

Answer 1

navigator.serviceWorker.register() не является событием. Это функция, которая возвращает обещание, а затем обещание будет разрешено с помощью объекта ServiceWorkerRegistration, который соответствует регистрации.

Действительная логика рабочего рабочего выполняется в другом потоке/процессе, а события жизненного цикла, которые обрабатывает рабочий сервис, например, событие install, происходят независимо от веб-страницы, которая зарегистрировала работника службы. Ожидается то, что вы видите на своем выходе console.log().

Если вы хотите отслеживать состояние сервисного работника со своей веб-страницы, вы можете добавить прослушиватели событий к объекту ServiceWorkerRegistration. Вот пример этого: https://googlechrome.github.io/samples/service-worker/registration-events/index.html

Если вы хотите написать код, который заставит вашу веб-страницу подождать, пока не появится активный сервисный работник, прежде чем предпринять какие-либо действия, вы можете воспользоваться обещанием navigator.serviceWorker.ready.