javascript - 为什么我的 Service Worker 总是在等待激活？

Question

我有一个非常基本的问题

我正在努力了解 Service Worker 的生命周期，或者更好的是，实际上是什么初始化和更改状态。

我现在有 2 个问题:

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

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

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

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

3- 一般问题

• 什么结束了正常生命周期中的安装事件？
• 在正常的生命周期中是什么触发了 activate 事件？

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 给所有的 Service Worker 命名。就这样。

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

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

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

您应该真的阅读这篇精彩的文章:The Service Worker Lifecycle