`self.Clients.claim()` 有啥用

Posted 2023-02-23

【中文标题】`self.Clients.claim()` 有啥用

【英文标题】：What is the use of `self.Clients.claim()``self.Clients.claim()` 有什么用

【发布时间】：2017-04-21 21:46:00

【问题描述】：

要注册 Service Worker，我可以调用

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() 到底是做什么的？我做了一些简单的测试，即使没有它，它似乎也能按预期工作。

【问题讨论】：

快速评论：调用registration.update() 不是必需来检查更新的服务工作者脚本。在导航请求之后，浏览器已经自动完成了。 registration.update() 允许您进行检查而无需等待导航请求，而且通常没有必要。

是的，自从我写了这个问题后我才发现。

【参考方案1】：

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

clients.claim

您可以通过调用来控制不受控制的客户端 clients.claim() 激活后在您的 Service Worker 中。

Here's 是上述演示的变体，其中调用了clients.claim() 它的激活事件。你应该第一次看到一只猫。我说 “应该”，因为这是时间敏感的。你只会看到一只猫，如果 service worker 激活，clients.claim() 在之前生效 图片尝试加载。

如果您使用 Service Worker 加载页面的方式与他们不同 通过网络加载，clients.claim() 可能会很麻烦，因为您的 服务工作者最终控制了一些没有加载的客户端 它。

注意：我看到很多人包括 clients.claim() 作为样板， 但我自己很少这样做。只在最初时才真正重要 加载，并且由于渐进增强，页面通常可以正常工作 无论如何，没有服务人员很高兴。

【讨论】：

所以我认为self.skipWaiting() 将用于立即将更新应用到现有的 serviceWorker，clients.claim() 将用于在第一次加载时立即控制。

【参考方案2】：

Service Worker 在注册后从next page-reload 获得控制权。通过使用self.skipWaiting() 和self.clients.claim()，您可以要求客户端控制first load 本身的Service Worker。

例如

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

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

附注：

next page-reload 表示页面重访。

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

【讨论】：

所以即使该文件在缓存中，使用self.clients.claim 也会调用该文件的服务器？那正确吗？你能清楚地说明next page reload或first load是什么意思吗？

如果文件在缓存中，使用self.clients.claim 将不会调用服务器。它将从缓存中提供。根据您对next page reload 和first load 的建议编辑帖子

感谢您的修改，但我仍然不清楚您将在哪种情况下使用self.clients.claim()，以及您不会为哪种情况编写此方法？ > 如果我想总是从服务器获取文件内容，那么我需要写self.clients.claim()，然后它会从缓存中获取。

在这种情况下，你不需要

但是如果我需要一个文件总是从服务器获取，而其他文件可以从缓存中获取（如果存在），因为我们在activate 事件监听器中编写了这个 self.client.claims 并且那个只能配置一个设置。要么写要么不写。

【参考方案3】：

Clients.claim() 在您首次注册服务工作人员时让服务工作人员控制页面。如果页面上已经有 Service Worker，则没有区别。 skipWaiting() 让新的服务人员替换旧的。如果没有它，您将不得不在激活新的 Service Worker 之前关闭该页面（以及包含同一范围内页面的任何其他打开的选项卡）。