為什么我的服務工作者總是在等待激活？

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被激活等。

你應該真正閱讀這篇精彩的文章： 服務工作者生命周期