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

Tim Evko是一位前端開發(fā)者，負責管理主要基於React的代碼庫，同時也是ExecThread的團隊負責人，該公司專注於為專業(yè)人士提供求職信息。業(yè)餘時間，他會在當?shù)亟∩矸垮憻?，致力於成為一名更?yōu)秀的競技Crossfit運動員。

您目前最感興趣的技術理念或趨勢是什麼？

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

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

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

請描述（或鏈接到！）您最近構建、設計或製作的有趣作品。您為什麼為此感到自豪？

我最近開始了解虛擬DOM算法的工作原理，在此過程中，我構建了自己的組件渲染器：BadDom [github]。它只有600字節(jié)，您可以用它構建整個Web應用程序。我為此感到自豪，因為它只有600字節(jié)，您可以用它構建整個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將找到該元素並僅更改其類名。

您是如何構建它的？

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

您最近讀到的最好的技術文章是什麼，為什麼？

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

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

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

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

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

Service Worker是一種Web Worker。它是一個JavaScript文件，可以控制與其關聯(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ā)送消息。這樣，您可以確保每個選項卡只處理一次消息。

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

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

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

postMessage API在Service Worker中起著至關重要的作用。它允許您在頁面和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)絡請求來提高性能。

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

要使用Service Worker提供離線體驗，您需要緩存資源。當Service Worker攔截導航或資源請求時，它可以使用緩存資源進行響應，而不是發(fā)出網(wǎng)絡請求。這允許頁面/網(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)瀏覽器之間的實時通信。這兩種技術服務於不同的目的，不能一起使用。

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