为什么我的服务工作者总是在等待激活？

Question

我有这个非常基本的问题

我正在努力了解服务工作者的生命周期，甚至更好地理解实际上初始化和改变状态的内容。

我现在有两个问题：

1 - 在chrome://inspect/#service-workers service- workers中总共有2 ou 3行，显示服务工作者都使用相同的PID运行。 为什么？ 为什么不只有一个？

2-当我在刷新时检查我的服务人员时，我得到了这个：

• ＃566已激活且正在运行 [停止]
• ＃570等待激活 [skipWaiting]

这意味着什么？ 什么是566什么是570？ 我想他们是sw的实例，但为什么有两个呢？ 为什么570还在等待？ 我该怎么做以确保它将被注册安装激活？

3-一般问题

• 什么在正常生命周期中结束安装事件？
• 在正常生命周期中激活事件的原因是什么？

的index.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 Devtools显示的ID是内部的。 只是要指出。 所以他们用id命名所有服务工作者。 就这样。

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

新SW未被接管的时间称为等待状态，其在安装和激活之间发生。 可以通过从SW的安装处理程序内部调用self.skipWaiting（）来跳过此操作。

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

你应该真正阅读这篇精彩的文章： 服务工作者生命周期