在註冊事件完成之前調用服務人員安裝事件

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承諾。