js操作浏览器选项卡_如何使用服务人员跨浏览器选项卡进行通信

js操作浏览器选项卡

This interview has been republished from Versioning, SitePoint’s daily subscription newsletter helping developers stay up-to-date and knowledgeable by offering curated links to the essentials in front-end, back-end, design and UX, news, business and more. Learn more and sign up here.

该采访已从SitePoint的每日订阅新闻稿Versioning中重新发布，它通过提供指向前端，后端，设计和UX，新闻，商业等方面的基本要素的精选链接，帮助开发人员保持最新和知识。 了解更多信息并在这里注册 。

Tim Evko is a front-end developer, managing a primarily React codebase, and team lead at ExecThread, a company focused on surfacing job openings to professionals. When not at ExecThread, he spends the rest of his time at a local gym, working on being a better competitive Crossfit Athlete.

Tim Evko是一名前端开发人员，主要管理React代码库，并且是ExecThread的团队负责人，ExecThread是一家致力于为专业人员提供职位空缺的公司。 不在ExecThread时，他将余下的时间都花在当地的健身房里，致力于成为更具竞争力的Crossfit运动员。

目前，哪种技术创意或趋势最能激发您的兴趣？ (Which tech idea or trend excites you the most at the moment?)

Lately I’ve been fascinated with Service Worker technology, especially when used to help make sites load fast and become interactive quickly. I love performance and web-app-offline capability, and I think the community can benefit from the increased focus on building resilient, versatile, and fast applications.

最近，我对Service Worker技术非常着迷，尤其是在用于帮助使网站快速加载并快速交互时。 我喜欢性能和Web应用程序脱机功能，并且我认为社区可以从对构建弹性，多功能和快速应用程序的日益关注中受益。

Service Workers are especially fun to work with because of how much you can do with them. I recently learned that you can use a Service Worker to communicate across tabs in a browser, allowing each individual tab to reload itself if the cache is stale. It’s not an easy technology to work with but I’m very glad that it’s around!

与服务人员合作特别有趣，因为您可以与他们合作。 我最近了解到，您可以使用Service Worker在浏览器中的各个选项卡之间进行通信，从而允许每个单独的选项卡在缓存过期时重新加载自身。 这不是一件容易使用的技术，但是我很高兴它已经存在了！

我认为我之前从未听说过–您能否详细介绍一下？ (I don’t think I’ve heard of this before – could you go into more detail?)

In a browser, Service Workers have control over all clients that are in the available scope, not just the current active tab. This means that when a Service Worker is communicating with a site in your browser, it’ll still be communicating with all tabs that are currently displaying that site. You can take advantage of this feature when using the postMessage API that comes with Service Worker. A detailed example of that can be found here. At ExecThread, we use this functionality to reload all tabs in case a Service Worker serves an old CSS file to a page with new markup on it.

在浏览器中，服务人员可以控制可用范围内的所有客户端，而不仅仅是当前的活动选项卡。 这意味着，当Service Worker与您的浏览器中的网站进行通信时，它仍将与当前显示该网站的所有选项卡进行通信。 使用Service Worker随附的postMessage API时，可以利用此功能。 一个详细的例子可以在这里找到 。 在ExecThread，我们使用此功能重新加载所有选项卡，以防Service Worker将旧CSS文件提供给页面上带有新标记的情况。

描述(或链接到！)您最近建造，设计或生产的很酷的东西。 你为什么为此感到骄傲？ (Describe (or link to!) something cool you built, designed or produced recently. Why are you proud of it?)

I recently set out to understand how virtual DOM algorithms worked, and in doing so built my very own component render-er: BadDom [github]. It’s 600 bytes and you can build your entire web app with it. I’m proud of it because It’s 600 bytes and you can build your entire web app with it.

我最近着手了解虚拟DOM算法的工作原理，并以此构建了自己的组件render-er：BadDom [github]。 它是600字节，您可以使用它构建整个Web应用程序。 我为此感到骄傲，因为它有600字节，您可以用它构建整个Web应用程序。

BadDOM is actually really simple, and that’s what I love about it. If you give it a node (a div on a page for example) and an ES6 template string, it will update the first div so that it matches the template string. Essentially it’s a DOM-diffing function that makes sure its target will look like the template string.

BadDOM实际上非常简单，这就是我所喜欢的。 如果为它提供一个节点(例如页面上的div)和一个ES6模板字符串，它将更新第一个div，使其与模板字符串匹配。 本质上，这是一个DOM差异函数，可确保其目标看起来像模板字符串。

Since it’s an ES6 template string however, you can add logic to your diffing. This means that you can call the diffing function whenever you update whatever state your logic is based off of, and your original DOM target will match the new state. The whole thing works by creating an invisible element with your template string, and comparing the target element (and it’s children) to find, remove, or modify all DOM nodes until the template string based element and the target element look the same.

但是，由于它是ES6模板字符串，因此可以为差异添加逻辑。 这意味着，只要您更新逻辑所基于的任何状态，就可以调用diffing函数，并且原始DOM目标将与新状态匹配。 整个过程是通过使用模板字符串创建一个不可见元素，然后比较目标元素(及其子元素)以查找，删除或修改所有DOM节点，直到基于模板字符串的元素和目标元素看起来相同为止。

It’s efficient because it never updates an element that doesn’t need to be updated, thereby preventing the browser from ever having to do unnecessary work. If you have 100 nested elements and only one class name changes on one of them, BadDom will find the one and only change the class.

它之所以有效，是因为它永远不会更新不需要更新的元素，从而避免了浏览器不得不做不必要的工作。 如果您有100个嵌套元素，并且其中一个仅更改了一个类名，则BadDom会找到一个并且仅更改类。

您是如何建造的？ (How did you build it?)

Like most of my projects, I built this on CodePen. I like to focus on keeping things as simple as possible with as little build tools / setup as possible. That way it’s easiest for anyone to understand and contribute to regardless of the platforms or devices they’re using. CodePen is great because I don’t need to set up an IDE to work on Front End libraries. I could talk all day about CodePen, it’s community, and how much I’ve learned from others work on it, but instead I’ll just say that everyone should have a look for themselves.

像我的大多数项目一样，我是在CodePen上构建的。 我喜欢专注于通过尽可能少的构建工具/设置来使事情尽可能简单。 这样，无论使用什么平台或设备，任何人都最容易理解和做出贡献。 CodePen很棒，因为我不需要设置IDE即可在前端库上工作。 我可以整天谈论CodePen，它的社区以及从其他人那里学到的东西，但是我只是说每个人都应该看看自己。

I like to write all of my JavaScript using the Module pattern, which I did here. The module pattern is a way to write JavaScript so that all code is inside of a self contained object. Methods inside of the object are stored as functions-as-properties, and configuration values can be stored as objects-as-properties. I like to use this pattern because of how easy it is to organize code (especially libraries). You can find more about the pattern here.

我喜欢使用模块模式来编写我的所有JavaScript，就像我在这里所做的那样。 模块模式是一种编写JavaScript的方法，以便所有代码都在一个自包含的对象内部。 对象内部的方法存储为函数即属性，而配置值可以存储为对象即属性。 我喜欢使用这种模式，因为组织代码(尤其是库)非常容易。 您可以在此处找到有关该模式的更多信息 。

您最近阅读的最好的高科技产品是什么，为什么？ (What’s the best tech thing you read recently, and why?)

Resilient Web Design by Jeremy Keith – Jeremy is an excellent author, and this book is code written exactly as the book states code should be written.

杰里米·基思(Jeremy Keith)的《弹性Web设计》(Resilient Web Design) –杰里米(Jeremy)是一位出色的作者，本书的代码编写与书中规定的代码完全相同。

您最近发送给朋友的最有趣或最有趣的脱主题链接是什么？ (What was the most funny or interesting off-topic link you’ve sent to a friend recently?)

On the East Coast, US, it is somehow STILL winter. I sent this to my wife the other day:

在美国东海岸，现在还是冬天。 前几天，我将此邮件发送给了我的妻子：

This is fine, indeed! There’s this week’s Interviewsioning, thanks to Tim for sharing the tech he’s most passionate about.

的确很好！ 感谢Tim分享了他最热衷的技术，这是本周的采访。

翻译自: https://www.sitepoint.com/how-to-use-a-service-worker-to-communicate-across-browser-tabs/

js操作浏览器选项卡