title: Why my Service Worker is always waiting to activate?
body: <p>I have this very basic question</p>
  
  <p>I'm striving to understand the Service Worker life cycle, or even better, what in practical terms initialize and change the states.</p>
  
  <p>I got 2 questions right now:</p>
  
  <p>1 - in <code>chrome://inspect/#service-workers</code> there are always 2 ou 3 lines, showing service workers all running with the same PID. Why? Why not only one?</p>
  
  <p>2- When i inspect my service worker on refresh i got this:</p>
  
  <ul>
  <li><strong>#566 activated and is running</strong> [stop]</li>
  <li><strong>#570 waiting to activate</strong> [skipWaiting]</li>
  </ul>
  
  <p>What does that mean? What is 566 and what is 570? I suppose they are instances of the the sw, but why there are two of them? And why 570 is still waiting? What do I have to do to make sure it will be registered-installed-activated?</p>
  
  <p>3- General questions</p>
  
  <ul>
  <li>What ends the <strong>install</strong> event in a normal life cycle?</li>
  <li>What fires the <strong>activate</strong> event in a normal life cycle?</li>
  </ul>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;script&gt;
    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);
        });
      });
    }
    &lt;/script&gt;
  </code></pre>
  
  <p><strong>sw.js</strong></p>
  
  <pre><code>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)
      })
    );
  });
  </code></pre>
  
  <p>Thanks!</p>