在注册事件完成之前调用服务工作者安装事件

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()不是一个事件。它是一个返回promise的函数，然后promise将使用与注册对应的ServiceWorkerRegistration对象来解析。

实际的服务工作者逻辑在不同的线程/进程中执行，服务工作者处理的生命周期事件（如install事件）独立于注册服务工作者的网页发生。您希望在console.log()输出中看到的内容。

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

的一个例子

如果您想编写的代码会导致您的网页在采取某些操作之前等待有效的服务工作者，那么您可以使用navigator.serviceWorker.ready承诺。