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

Question

我有这个非常基本的问题

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

我现在有两个问题:

1 - chrome://inspect/#service-workers总共有2个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被激活等.

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