`self.Clients.claim()`有什么用

Question

要注册服务工作者，我可以调用

navigator.serviceWorker.register('/worker.js')

每次页面加载时，它都会检查worker.js的更新版本。如果找到更新，则在关闭页面的所有选项卡并重新打开之前，不会使用新的工作线程。我读到的解决方案是：

self.addEventListener('install', function(event) {
  event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', function(event) {
  event.waitUntil(self.clients.claim());
});

我可以理解skipWaiting部分，但是clients.claim()到底是做什么的？我做了一些简单的测试，即使没有它，它似乎也能正常工作。

Answer 1

我从guide to the service worker lifecycle中摘录了以下内容

clients.claim

一旦激活服务工作线程，您就可以通过调用服务工作线程中的clients.claim()来控制不受控制的客户端。

Here's是上面演示的一个变体，它在激活事件中调用clients.claim()。你应该第一时间看到一只猫。我说“应该”，因为这是对时间敏感的。只有当服务工作者激活并且clients.claim()在图像尝试加载之前生效时，您才会看到一只猫。

如果您使用服务工作人员加载页面的方式与通过网络加载页面的方式不同，那么clients.claim()可能会带来麻烦，因为您的服务工作人员最终会控制一些没有使用它进行加载的客户端。

注释：我看到很多人，包括clients.claim()作为样板，但我自己很少这样做。它只在第一次加载时才真正重要，而且由于渐进式的增强，页面通常在没有服务人员的情况下也能正常工作。

Answer 2

Service worker在注册后从next page-reload接管控制权。通过使用self.skipWaiting()和self.clients.claim()，您可以要求客户端控制first load本身上的服务工作者。

e.g

假设我缓存了一个文件hello.txt，如果我再次调用hello.txt，即使缓存中有资源，它也会进行服务器调用。这就是我不使用self.clients.claim()的场景。但是，在下一页面重新加载时调用hello.txt服务器时，它将服务于缓存中的资源。

为了解决这个问题，我必须使用self.skipWaiting()和self.clients.claim()的组合，以便服务工作者在内容被激活时立即开始提供内容。

附言：

next page-reload意味着页面重访。

first load表示页面第一次被访问的时刻。

Answer 3

当您第一次注册服务工作者时，Clients.claim()会让服务工作者控制页面。如果页面上已有服务工作者，则不会有任何差异。skipWaiting()使新的服务工作者替换旧的服务工作者。如果没有它，则必须在激活新的服务工作线程之前关闭该页面(以及包含相同范围内的页面的任何其他打开的选项卡)。