service worker install 事件在 register 事件完成之前被调用

Question

我已将安装事件附加到服务工作者，如下所示。但是在注册事件完成之前触发了 Install 事件。请参阅下面的代码片段和控制台日志。

我关心的是如何在注册事件完成之前触发安装事件？

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() 不是事件。它是一个returns一个promise的函数，然后promise会解析一个对应注册的ServiceWorkerRegistration对象

实际的 service worker 逻辑在不同的 thread/process 中执行，service worker 处理的生命周期事件，如 install 事件，独立于注册服务的网页发生工人。您在 console.log() 输出中看到的是预期的。

如果您想从您的网页跟踪服务工作者的状态，您可以将事件侦听器添加到 ServiceWorkerRegistration 对象。在 https://googlechrome.github.io/samples/service-worker/registration-events/index.html

有一个这样的例子

如果您想编写代码，让您的网页在执行某些操作之前等待，直到有一个活跃的服务工作者，您可以使用 navigator.serviceWorker.ready promise。

service worker install 事件在 register 事件完成之前被调用

service worker install event is called before register event is completed

service-worker

progressive-web-apps