17

我有这个非常基本的问题

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

我现在有2个问题:

1 -chrome://inspect/#service-workers总有 2 或 3 行,显示服务工作者都以相同的 PID 运行。为什么?为什么不是只有一个?

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

  • 第566章 启动并运行【停止】
  • 第570章 等待激活【skipWaiting】

这意味着什么?什么是 566,什么是 570?我想它们是 sw 的实例,但为什么有两个呢?为什么 570 还在等待?我必须做些什么来确保它会被注册-安装-激活?

3- 一般问题

  • 在正常生命周期中结束安装事件的原因是什么?
  • 在正常生命周期中触发激活事件的原因是什么?

索引.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)
    })
  );
});

谢谢!

4

1 回答 1

37

Chrome Devtools 显示的 id 是内部的。只是要指出。所以他们用一个 id 来命名所有的 Service Worker。就这样。

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

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

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

真的应该阅读这篇精彩的文章:Service Worker 生命周期

于 2018-02-19T05:20:43.833 回答