为什么我的服务人员总是等待激活？

Question

我有个很基本的问题

我正在努力了解Service Worker的生命周期，或者更好地了解实际情况下初始化和更改状态的内容。

我现在有两个问题：

1-在<代码>chrome://inspect/#service-工人始终有2行ou 3行，显示所有服务工人都以相同的PID运行。为什么？为什么不止一个？

2-当我在刷新时检查我的服务人员时，我得到以下信息：

• #566已激活并正在运行[停止]

这是什么意思？什么是566，什么是570？我想它们是sw的实例，但为什么有两个呢？为什么570还在等待？我必须做些什么来确保它将被注册、安装和激活？

3-一般问题

• 在正常生命周期中，安装事件的结束是什么
• 在正常生命周期中，什么触发激活事件

指数html

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('./sw.js')
      .then(function(registration) {
        // successful
        console.log('Success: ', registration);
      }).catch(function(err) {
        // registration failed
        console.log('Error: ', err);
      });
    });
  }
  </script>

sw.js

var cache_name = 'v1';

var cache_files = [
  './',
  './index.html',
  './style.css'
]

self.addEventListener('install', function(e){
  console.log('SW install:', e);
  e.waitUntil(
    caches.open(cache_name)
    .then(function(cache){
      console.log('cache', cache);
      return cache.addAll(cache_files);
    })
    .then(function(cache){
      console.log('Cache completed');
    })
  )
});

self.addEventListener('activate', function(event) {
  console.log('SW activate:', event);
});

self.addEventListener('fetch', function(e){
  console.log('SW fetch:', e.request.url)

  e.respondWith(
    caches.match(e.request)
    .then(function(cache_response){
      if(cache_response) return cache_response;

      return fetch(e.request);
    })
    .catch(function(err){
      console.log('Cache error', err)
    })
  );
});

谢谢！

Answer 1

Chrome开发工具显示的id是内部的。只是想指出。所以他们用一个id来命名所有的服务人员。仅此而已。

同时拥有两个SWs的原因是，你有一个SWs，然后你重新加载页面，导航离开并返回，或者沿着这些路线，然后你得到了另一个SWs。但此时，当您“刚刚获得另一个”时，它还没有被激活，并且之前的软件仍在控制页面。当您从其他地方导航回站点时，新软件将控制以前的软件，刷新页面是不够的。基本上，这意味着关闭页面的所有选项卡和窗口，然后再次加载，然后新的软件接管。

新软件尚未接管的时间称为等待状态，发生在安装和激活之间。这可以通过调用self跳过。从软件的安装处理程序内部执行skipWaiting（）。

此流程背后的基本思想是，页面不应由加载页面时未控制页面的软件控制–因此，对注册软件的站点的第一次访问将不受该软件控制，只有第二次激活该软件等。

您真的应该阅读这篇精彩的文章：服务人员生命周期