如何使用服務工作者在瀏覽器選項卡上進行交流

本文節選自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中文網其他相關文章！