サービスワーカーを使用してブラウザタブを通信する方法

この記事は、SitePointの毎日のサブスクリプションニュースレターバージョンから抜粋されています。これにより、開発者は、最新の知識と情報を維持するために、フロントエンド、バックエンド、デザイン、ユーザーエクスペリエンス、ニュース、ビジネス、その他の分野で選択されたリンクを提供します。詳細を確認し、購読するためにサインアップして、こちらをご覧ください。

Tim Evkoは、主にReactに基づいたコードベースを管理するフロントエンド開発者であり、プロの専門家に求職情報を提供することに焦点を当てたExecthreadのチームリーダーでもあります。余暇には、地元のジムで運動し、より良い競争力のあるCrossFitアスリートになることを約束します。

現時点で最も興味を持っている技術的な概念やトレンドは何ですか？

最近、特により高速なウェブサイトの読み込みと迅速なやり取りのために、サービスワーカーテクノロジーに夢中になっています。私は、Webアプリケーションのパフォーマンスとオフライン機能が大好きです。コミュニティは、回復力のある普遍的なアプリケーションの構築に重点を置くことで利益を得ることができると思います。サービスワーカーは、多くの機能を実装できるため、特に興味深いものです。最近、サービスワーカーを使用してブラウザタブ間で通信し、個々のタブがキャッシュの有効期限が切れたときにリロードできるようにすることが可能であることがわかりました。このテクニックは習得するのは簡単ではありませんが、私はそれが存在することを非常に嬉しく思います！

このテクノロジーについてはあまり知りませんが、詳細に紹介できますか？

ブラウザでは、サービスワーカーは、現在アクティブなタブだけでなく、利用可能な範囲内のすべてのクライアントを制御できます。これは、サービスワーカーがブラウザ内のWebサイトと通信する場合、現在Webサイトを表示しているすべてのタブと通信することを意味します。サービスワーカーに付属のポストメッサージAPIを使用する場合、この機能を活用できます。詳細な例はここにあります。 Execthreadでは、この機能を使用して、サービスワーカーが新しいタグを備えた古いCSSファイルをページに提供した場合に、すべてのタブをリロードします。

最近構築、設計、制作した興味深い作品を説明してください（またはリンク！）。なぜあなたはこれを誇りに思っていますか？

私は最近、仮想DOMアルゴリズムがどのように機能するかを理解し始めました。その過程で、独自のコンポーネントレンダラー：Baddom [Github]を構築しました。 600バイトしかないため、使用してWebアプリケーション全体を構築できます。わずか600バイトで、Webアプリケーション全体を構築するために使用できるため、これを誇りに思っています。 Baddomは実際には非常にシンプルなので、私はそれが好きです。ノード（ページ上のDIVなど）とES6テンプレート文字列を提供する場合、テンプレート文字列に一致するように最初のDIVを更新します。基本的に、それはターゲットがテンプレート文字列のように見えることを保証するDOM分化関数です。ただし、ES6テンプレート文字列であるため、分化にロジックを追加できます。これは、いつでも分化関数を呼び出して、ロジックが基づいている状態を更新し、元のDOMターゲットが新しい状態と一致することを意味します。プロセス全体は、テンプレート文字列を使用して目に見えない要素を作成し、テンプレート文字列に基づいて要素とターゲット要素が同じように見えるまでターゲット要素（およびその子供）を比較することにより、すべてのDOMノードを見つけ、削除、または変更します。更新を必要としない要素を更新しないため、ブラウザから不必要な処理を防ぐため、効率的です。ネストされた100個の要素があり、そのうちの1つだけがクラス名を変更した場合、BadDomは要素を見つけてクラス名のみを変更します。

どのようにして構築しましたか？

私のプロジェクトのほとんどと同様に、Codepenで構築しました。私はそれを可能な限りシンプルに保ち、ビルドツール/設定を可能な限り最小化することに集中するのが好きです。このようにして、どんなプラットフォームやデバイスを使用しても、誰でも理解して参加する方が簡単です。 Codepenは、フロントエンドライブラリを処理するためにIDEをセットアップする必要がないため、素晴らしいです。 Codepen、そのコミュニティ、そして他の人の仕事から学んだことについて一日中話すことができますが、誰もが自分でそれを見るべきだと言います。モジュールパターンを使用してすべてのJavaScriptコードを作成するのが好きです。ここでも同じことをします。モジュールパターンはJavaScriptを書き込む方法であり、すべてのコードは自己完結型のオブジェクトにあります。オブジェクト内のメソッドは関数属性として保存され、構成値はオブジェクト属性として保存できます。コード（特にライブラリ）を整理するのは非常に簡単であるため、このパターンを使用するのが好きです。このモードの詳細については、こちらをご覧ください。

最近読んだ最高の技術記事は何ですか？その理由は何ですか？

Jeremy KeithによるResilient Webデザイン - ジェレミーは優れた著者であり、この本のコードは本に記載されているコードとまったく同じように書かれています。

最近友達に送った最も興味深いまたはおかしな非テーマのリンクは何ですか？

米国東海岸の冬です。私は数日前に妻にそれを送りました：それは本当です！これは今週のインタビューです。彼の最も情熱的なテクノロジーを共有してくれたTimに感謝します。

サービスワーカーを使用してブラウザタブ間で通信することについて、サービスワーカーとは何ですか？それはどのように機能しますか？ サービスワーカーは一種のWebワーカーです。これに関連するWebページ/ウェブを制御し、ナビゲーションとリソースのリクエストを傍受して変更し、オフラインエクスペリエンスを完了したりパフォーマンスを改善したりするための非常に細心の方法でリソースをキャッシュするJavaScriptファイルです。

サービスワーカーを使用してブラウザタブ間で通信する方法は？

サービスワーカーを使用してブラウザタブ間で通信するには、最初にサービスワーカーを登録する必要があります。登録後、ポストメサージAPIを使用して、サービスワーカーとページ間にメッセージを送信できます。サービスワーカーは、これらのメッセージを制御下にあるすべてのタブにブロードキャストできます。

複数のタブのサービスワーカーメッセージを一度に処理する方法は？

複数のタブのサービスワーカーメッセージを一度に処理するには、clients.matchall（）メソッドを使用できます。この方法は、すべてのクライアントをサービスワーカーの制御下に置き、各クライアントにメッセージを送信します。これにより、各タブがメッセージを1回だけ処理するようにすることができます。

サーバーなしでブラウザからブラウザーへの通信にサービスワーカーを使用できますか？

いいえ、サーバーなしでは、サービスワーカーをブラウザー間通信に使用することはできません。サービスワーカーは、オフラインエクスペリエンスを有効にし、キャッシュリソースによってパフォーマンスを向上させるように設計されています。ページとサービスワーカー間、およびサービスワーカー制御下のタブ間で通信できますが、ブラウザ間で直接通信することはできません。

サービスワーカーにおけるメサージ後のAPIの役割は何ですか？

メサージ後のAPIは、サービスワーカーで重要な役割を果たします。ページとサービスワーカーの間にメッセージを送信し、サービスワーカーの制御下にあるすべてのタブにメッセージをブロードキャストすることができます。これは、サービスワーカーがブラウザタブ間で通信する方法です。

サービスワーカーを登録する方法は？

サービスワーカーを登録するには、navigator.serviceworker.register（）メソッドを使用する必要があります。このメソッドは、2つのパラメーターを取ります。1つ目はサービスワーカーファイルへのパス、2つ目はオプションオブジェクトです。サービスワーカーに登録した後、ページ/サイトを制御できます。

サービスワーカーは私のWebページ/ウェブサイトのパフォーマンスを改善できますか？

はい、サービスワーカーはあなたのウェブページ/ウェブサイトのパフォーマンスを大幅に改善できます。綿密な方法でリソースをキャッシュすることにより、サービスワーカーは、ネットワークリクエストを行う代わりにキャッシュリソースを提供することにより、オフラインエクスペリエンスを提供したり、パフォーマンスを向上させたりできます。

サービスワーカーを使用してオフラインエクスペリエンスを提供する方法は？

サービスワーカーを使用してオフラインエクスペリエンスを提供するには、リソースをキャッシュする必要があります。サービスワーカーがナビゲーションまたはリソースリクエストをインターセプトすると、ネットワークリクエストを行う代わりに、キャッシュされたリソースで応答できます。これにより、オフラインでもページ/サイトが適切に機能することができます。

サービスワーカーのclients.matchall（）メソッドは何ですか？

サービスワーカーのclient.matchall（）メソッドは、サービスワーカーの管理下にあるすべてのクライアントを取得する方法です。この方法は、サービスワーカーコントロールの下のすべてのタブにメッセージをブロードキャストするのに役立ちます。

webrtcでサービスワーカーを使用できますか？

いいえ、サービスワーカーをWeBRTCで使用することはできません。サービスワーカーは、オフラインエクスペリエンスとパフォーマンスの向上を可能にするように設計されていますが、WeBRTCはブラウザ間のリアルタイム通信を可能にするように設計されています。これらの2つのテクノロジーは異なる目的に役立ち、一緒に使用することはできません。

以上がサービスワーカーを使用してブラウザタブを通信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。