如何使用服务工作者在浏览器选项卡上进行交流

本文节选自SitePoint的每日订阅通讯Versioning，该通讯为开发者提供前端、后端、设计和用户体验、新闻、商业等领域的精选链接，帮助他们保持最新知识和信息。了解更多并注册订阅，请访问此处。

Tim Evko是一位前端开发者，负责管理主要基于React的代码库，同时也是ExecThread的团队负责人，该公司专注于为专业人士提供求职信息。业余时间，他会在当地健身房锻炼，致力于成为一名更优秀的竞技Crossfit运动员。

您目前最感兴趣的技术理念或趋势是什么？

最近我迷上了Service Worker技术，尤其是在用于加快网站加载速度和快速实现交互方面。我喜欢性能和Web应用程序离线功能，我认为社区可以从更加关注构建弹性、通用和快速的应用程序中受益。Service Worker特别有趣，因为它可以实现很多功能。我最近了解到，可以使用Service Worker在浏览器选项卡之间进行通信，允许每个单独的选项卡在缓存过期时自行重新加载。这项技术并不容易掌握，但我非常高兴它存在！

我不太了解这个技术，您能详细介绍一下吗？

在浏览器中，Service Worker可以控制所有处于可用范围内的客户端，而不仅仅是当前活动的选项卡。这意味着当Service Worker与浏览器中的网站通信时，它仍然会与当前显示该网站的所有选项卡通信。在使用Service Worker附带的postMessage API时，您可以利用此功能。此处可以找到详细示例。在ExecThread，我们使用此功能来重新加载所有选项卡，以防Service Worker向页面提供带有新标记的旧CSS文件。

请描述（或链接到！）您最近构建、设计或制作的有趣作品。您为什么为此感到自豪？

我最近开始了解虚拟DOM算法的工作原理，在此过程中，我构建了自己的组件渲染器：BadDom [github]。它只有600字节，您可以用它构建整个Web应用程序。我为此感到自豪，因为它只有600字节，您可以用它构建整个Web应用程序。BadDOM实际上非常简单，这就是我喜欢它的原因。如果您提供一个节点（例如页面上的div）和一个ES6模板字符串，它将更新第一个div，使其与模板字符串匹配。本质上，它是一个DOM差异化函数，确保其目标看起来像模板字符串。但是，由于它是ES6模板字符串，因此您可以向差异化添加逻辑。这意味着您可以随时调用差异化函数来更新您的逻辑所基于的任何状态，并且您的原始DOM目标将与新状态匹配。整个过程通过使用模板字符串创建一个不可见的元素，并将目标元素（及其子元素）进行比较来查找、删除或修改所有DOM节点，直到基于模板字符串的元素和目标元素看起来相同。它之所以高效，是因为它永远不会更新不需要更新的元素，从而防止浏览器进行不必要的处理。如果您有100个嵌套元素，并且其中只有一个元素的类名发生更改，BadDom将找到该元素并仅更改其类名。

您是如何构建它的？

像我的大多数项目一样，我在CodePen上构建了它。我喜欢专注于尽可能保持简单，并尽可能减少构建工具/设置。这样，无论他们使用什么平台或设备，任何人都更容易理解和参与。CodePen很棒，因为我不需要设置IDE来处理前端库。我可以整天谈论CodePen、它的社区以及我从其他人的作品中学到的东西，但我只会说每个人都应该自己看看。我喜欢使用模块模式编写所有JavaScript代码，在这里我也这么做了。模块模式是一种编写JavaScript的方法，所有代码都位于一个自包含的对象内。对象内的的方法存储为函数属性，配置值可以存储为对象属性。我喜欢使用这种模式，因为它组织代码（尤其是库）非常容易。您可以在这里了解更多关于该模式的信息。

您最近读到的最好的技术文章是什么，为什么？

Jeremy Keith撰写的《Resilient Web Design》——Jeremy是一位优秀的作者，这本书的代码正是按照书中所述的代码编写方式编写的。

您最近发送给朋友的最有趣或最有趣的非主题链接是什么？

在美国东海岸，现在仍然是冬天。我前几天把它发给了我妻子：确实如此！这就是本周的Interviewsioning，感谢Tim分享了他最热衷的技术。

关于使用Service Worker在浏览器选项卡之间进行通信的常见问题解答（FAQ）

什么是Service Worker，它是如何工作的？

Service Worker是一种Web Worker。它是一个JavaScript文件，可以控制与其关联的网页/网站，拦截和修改导航和资源请求，并以非常细致的方式缓存资源以完成离线体验或提高性能。

如何使用Service Worker在浏览器选项卡之间进行通信？

要使用Service Worker在浏览器选项卡之间进行通信，您需要先注册Service Worker。注册后，您可以使用postMessage API在Service Worker和页面之间发送消息。然后，Service Worker可以将这些消息广播到其控制下的所有选项卡。

如何为多个选项卡一次处理Service Worker消息？

要为多个选项卡一次处理Service Worker消息，您可以使用clients.matchAll()方法。此方法获取Service Worker控制下的所有客户端，并向每个客户端发送消息。这样，您可以确保每个选项卡只处理一次消息。

我可以在没有服务器的情况下使用Service Worker进行浏览器到浏览器的通信吗？

不可以，Service Worker不能在没有服务器的情况下用于浏览器到浏览器的通信。Service Worker旨在实现离线体验并通过缓存资源来提高性能。它们可以在页面和Service Worker之间以及Service Worker控制下的选项卡之间进行通信，但它们不能在浏览器之间直接通信。

postMessage API在Service Worker中的作用是什么？

postMessage API在Service Worker中起着至关重要的作用。它允许您在页面和Service Worker之间发送消息，并将消息广播到Service Worker控制下的所有选项卡。这就是Service Worker如何在浏览器选项卡之间进行通信的方式。

如何注册Service Worker？

要注册Service Worker，您需要使用navigator.serviceWorker.register()方法。此方法采用两个参数：第一个是Service Worker文件的路径，第二个是选项对象。注册Service Worker后，它可以控制页面/网站。

Service Worker可以提高我的网页/网站的性能吗？

是的，Service Worker可以显著提高您的网页/网站的性能。通过以细致的方式缓存资源，Service Worker可以提供离线体验，或者通过提供缓存资源而不是发出网络请求来提高性能。

如何使用Service Worker提供离线体验？

要使用Service Worker提供离线体验，您需要缓存资源。当Service Worker拦截导航或资源请求时，它可以使用缓存资源进行响应，而不是发出网络请求。这允许页面/网站即使在离线状态下也能正常工作。

Service Worker中的clients.matchAll()方法是什么？

Service Worker中的clients.matchAll()方法是一种获取Service Worker控制下的所有客户端的方法。此方法对于将消息广播到Service Worker控制下的所有选项卡非常有用。

我可以将Service Worker与WebRTC一起使用吗？

不可以，Service Worker不能与WebRTC一起使用。Service Worker旨在实现离线体验和性能增强，而WebRTC旨在实现浏览器之间的实时通信。这两种技术服务于不同的目的，不能一起使用。

以上是如何使用服务工作者在浏览器选项卡上进行交流的详细内容。更多信息请关注PHP中文网其他相关文章！