本文節(jié)選自SitePoint的每日訂閱通訊Versioning，該通訊為開發(fā)者提供前端、后端、設(shè)計和用戶體驗、新聞、商業(yè)等領(lǐng)域的精選鏈接，幫助他們保持最新知識和信息。了解更多并注冊訂閱，請訪問此處。

Tim Evko是一位前端開發(fā)者，負責管理主要基于React的代碼庫，同時也是ExecThread的團隊負責人，該公司專注于為專業(yè)人士提供求職信息。業(yè)余時間，他會在當?shù)亟∩矸垮憻挘铝τ诔蔀橐幻鼉?yōu)秀的競技Crossfit運動員。

您目前最感興趣的技術(shù)理念或趨勢是什么？

最近我迷上了Service Worker技術(shù)，尤其是在用于加快網(wǎng)站加載速度和快速實現(xiàn)交互方面。我喜歡性能和Web應用程序離線功能，我認為社區(qū)可以從更加關(guān)注構(gòu)建彈性、通用和快速的應用程序中受益。Service Worker特別有趣，因為它可以實現(xiàn)很多功能。我最近了解到，可以使用Service Worker在瀏覽器選項卡之間進行通信，允許每個單獨的選項卡在緩存過期時自行重新加載。這項技術(shù)并不容易掌握，但我非常高興它存在！

我不太了解這個技術(shù)，您能詳細介紹一下嗎？

在瀏覽器中，Service Worker可以控制所有處于可用范圍內(nèi)的客戶端，而不僅僅是當前活動的選項卡。這意味著當Service Worker與瀏覽器中的網(wǎng)站通信時，它仍然會與當前顯示該網(wǎng)站的所有選項卡通信。在使用Service Worker附帶的postMessage API時，您可以利用此功能。此處可以找到詳細示例。在ExecThread，我們使用此功能來重新加載所有選項卡，以防Service Worker向頁面提供帶有新標記的舊CSS文件。

請描述（或鏈接到?。┠罱鼧?gòu)建、設(shè)計或制作的有趣作品。您為什么為此感到自豪？

我最近開始了解虛擬DOM算法的工作原理，在此過程中，我構(gòu)建了自己的組件渲染器：BadDom [github]。它只有600字節(jié)，您可以用它構(gòu)建整個Web應用程序。我為此感到自豪，因為它只有600字節(jié)，您可以用它構(gòu)建整個Web應用程序。BadDOM實際上非常簡單，這就是我喜歡它的原因。如果您提供一個節(jié)點（例如頁面上的div）和一個ES6模板字符串，它將更新第一個div，使其與模板字符串匹配。本質(zhì)上，它是一個DOM差異化函數(shù)，確保其目標看起來像模板字符串。但是，由于它是ES6模板字符串，因此您可以向差異化添加邏輯。這意味著您可以隨時調(diào)用差異化函數(shù)來更新您的邏輯所基于的任何狀態(tài)，并且您的原始DOM目標將與新狀態(tài)匹配。整個過程通過使用模板字符串創(chuàng)建一個不可見的元素，并將目標元素（及其子元素）進行比較來查找、刪除或修改所有DOM節(jié)點，直到基于模板字符串的元素和目標元素看起來相同。它之所以高效，是因為它永遠不會更新不需要更新的元素，從而防止瀏覽器進行不必要的處理。如果您有100個嵌套元素，并且其中只有一個元素的類名發(fā)生更改，BadDom將找到該元素并僅更改其類名。

您是如何構(gòu)建它的？

像我的大多數(shù)項目一樣，我在CodePen上構(gòu)建了它。我喜歡專注于盡可能保持簡單，并盡可能減少構(gòu)建工具/設(shè)置。這樣，無論他們使用什么平臺或設(shè)備，任何人都更容易理解和參與。CodePen很棒，因為我不需要設(shè)置IDE來處理前端庫。我可以整天談?wù)揅odePen、它的社區(qū)以及我從其他人的作品中學到的東西，但我只會說每個人都應該自己看看。我喜歡使用模塊模式編寫所有JavaScript代碼，在這里我也這么做了。模塊模式是一種編寫JavaScript的方法，所有代碼都位于一個自包含的對象內(nèi)。對象內(nèi)的的方法存儲為函數(shù)屬性，配置值可以存儲為對象屬性。我喜歡使用這種模式，因為它組織代碼（尤其是庫）非常容易。您可以在這里了解更多關(guān)于該模式的信息。

您最近讀到的最好的技術(shù)文章是什么，為什么？

Jeremy Keith撰寫的《Resilient Web Design》——Jeremy是一位優(yōu)秀的作者，這本書的代碼正是按照書中所述的代碼編寫方式編寫的。

您最近發(fā)送給朋友的最有趣或最有趣的非主題鏈接是什么？

在美國東海岸，現(xiàn)在仍然是冬天。我前幾天把它發(fā)給了我妻子：確實如此！這就是本周的Interviewsioning，感謝Tim分享了他最熱衷的技術(shù)。

關(guān)于使用Service Worker在瀏覽器選項卡之間進行通信的常見問題解答（FAQ）

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

Service Worker是一種Web Worker。它是一個JavaScript文件，可以控制與其關(guān)聯(lián)的網(wǎng)頁/網(wǎng)站，攔截和修改導航和資源請求，并以非常細致的方式緩存資源以完成離線體驗或提高性能。

如何使用Service Worker在瀏覽器選項卡之間進行通信？

要使用Service Worker在瀏覽器選項卡之間進行通信，您需要先注冊Service Worker。注冊后，您可以使用postMessage API在Service Worker和頁面之間發(fā)送消息。然后，Service Worker可以將這些消息廣播到其控制下的所有選項卡。

如何為多個選項卡一次處理Service Worker消息？

要為多個選項卡一次處理Service Worker消息，您可以使用clients.matchAll()方法。此方法獲取Service Worker控制下的所有客戶端，并向每個客戶端發(fā)送消息。這樣，您可以確保每個選項卡只處理一次消息。

我可以在沒有服務(wù)器的情況下使用Service Worker進行瀏覽器到瀏覽器的通信嗎？

不可以，Service Worker不能在沒有服務(wù)器的情況下用于瀏覽器到瀏覽器的通信。Service Worker旨在實現(xiàn)離線體驗并通過緩存資源來提高性能。它們可以在頁面和Service Worker之間以及Service Worker控制下的選項卡之間進行通信，但它們不能在瀏覽器之間直接通信。

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

postMessage API在Service Worker中起著至關(guān)重要的作用。它允許您在頁面和Service Worker之間發(fā)送消息，并將消息廣播到Service Worker控制下的所有選項卡。這就是Service Worker如何在瀏覽器選項卡之間進行通信的方式。

如何注冊Service Worker？

要注冊Service Worker，您需要使用navigator.serviceWorker.register()方法。此方法采用兩個參數(shù)：第一個是Service Worker文件的路徑，第二個是選項對象。注冊Service Worker后，它可以控制頁面/網(wǎng)站。

Service Worker可以提高我的網(wǎng)頁/網(wǎng)站的性能嗎？

是的，Service Worker可以顯著提高您的網(wǎng)頁/網(wǎng)站的性能。通過以細致的方式緩存資源，Service Worker可以提供離線體驗，或者通過提供緩存資源而不是發(fā)出網(wǎng)絡(luò)請求來提高性能。

如何使用Service Worker提供離線體驗？

要使用Service Worker提供離線體驗，您需要緩存資源。當Service Worker攔截導航或資源請求時，它可以使用緩存資源進行響應，而不是發(fā)出網(wǎng)絡(luò)請求。這允許頁面/網(wǎng)站即使在離線狀態(tài)下也能正常工作。

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

Service Worker中的clients.matchAll()方法是一種獲取Service Worker控制下的所有客戶端的方法。此方法對于將消息廣播到Service Worker控制下的所有選項卡非常有用。

我可以將Service Worker與WebRTC一起使用嗎？

不可以，Service Worker不能與WebRTC一起使用。Service Worker旨在實現(xiàn)離線體驗和性能增強，而WebRTC旨在實現(xiàn)瀏覽器之間的實時通信。這兩種技術(shù)服務(wù)于不同的目的，不能一起使用。

以上是如何使用服務(wù)工作者在瀏覽器選項卡上進行交流的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！