有什么用`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

服务人员在注册后接受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()的组合，以便服务人员在激活后立即开始提供内容。

P.S：

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

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