Question

我有这个非常基本的问题

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

我现在有两个问题：

1 - 在chrome://inspect/#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的原因＆＃34;是你有一个，然后你重新加载页面，导航离开，回来，或沿着这些线，你又得到了另一个。但是在这个时间点，当你刚刚得到另一个＆＃34;时，它还没有激活，之前的SW仍在控制页面。当您从其他地方导航回网站时，新SW将控制之前的SW，刷新页面不够。基本上这意味着关闭页面的所有选项卡和窗口，然后再次加载它，然后新的SW接管。

新SW未被接管的时间称为安装和激活之间发生的等待状态。可以通过从SW的安装处理程序中调用self.skipWaiting（）来跳过这一点。

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

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

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

1 个答案: