在注册事件完成之前调用服务工作者安装事件 [英] service worker install event is called before register event is completed

问题描述

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

I have attached install event to service worker as below. But Install event fired before register event is completed. See code snippets and console logs below.

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

My concern is how install event is fired before register event is completed?

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

推荐答案

navigator.serviceWorker.register() 不是事件.这是一个返回承诺的函数，然后承诺将通过 ServiceWorkerRegistration 注册对应的对象.

navigator.serviceWorker.register() is not an event. It's a function that returns a promise, and then promise will resolve with a ServiceWorkerRegistration object that corresponds to the registration.

实际的 Service Worker 逻辑在不同的线程/进程中执行，Service Worker 处理的生命周期事件，如 install 事件，独立于注册 Service Worker 的网页发生.您在 console.log() 输出中看到的内容是预期的.

The actual service worker logic is executed in a different thread/process, and the lifecycle events that the service worker handles, like the install event, happen independently of the web page that registered the service worker. What you're seeing in your console.log() output is expected.

如果您想从您的网页跟踪 Service Worker 的状态，您可以将事件侦听器添加到 ServiceWorkerRegistration 对象.https://googlechrome.github 上有一个示例.io/samples/service-worker/registration-events/index.html

If you want to keep track of the state of the service worker from your web page, you can add event listeners to the ServiceWorkerRegistration object. There's an example of this at https://googlechrome.github.io/samples/service-worker/registration-events/index.html

如果您想编写代码，让您的网页在执行某些操作之前等待有活动的服务工作者，您可以使用 navigator.serviceWorker.ready 承诺.

If you want to write code that will cause your web page to wait until there's an active service worker before it takes some action, you could make use of the navigator.serviceWorker.ready promise.

这篇关于在注册事件完成之前调用服务工作者安装事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！