ブラウザタブ間の通信

私は最近、同じWebアプリケーションの異なるタブ間のいくつかのデータを共有する問題に遭遇した.OAuthを使用して外部プロバイダーのAPIキーを取得し、保存し、最終的にプラットフォームで表示します.最初のソリューションは、ページ全体を再読み込みすることを暗示しました.しかし、ユーザーエクスペリエンスは危うくなった.Vueのスパポイントでは、/プロセス/メール/にある想像してください.とプロセスへのリダイレクト😕
より適切な解決策を探している間、私は放送チャンネルAPIに遭遇しました.

It allows communication between different documents (in different windows, tabs, frames or iframes) of the same origin. Messages are broadcasted via a message event fired at all BroadcastChannel objects listening to the channel.

ブロードキャストチャンネルを作成しましょう

const channel = new BroadcastChannel('oauth')

ここで、我々は後でこのチャンネルを通して送られるどんなメッセージででも聞くために、我々のアプリの他の部分で使われる名前auauthを指定しました.

channel.postMessage(data)

ここでメッセージを送ります、そして、我々は我々が好きであるどんなオブジェクトでも渡すことができます.私たちのケースでは、私たちは、特定のタスクを知っていたので、コンテンツが実際に問題ではなかったので、あなたの必要性に応じて有用なデータを渡すために自由に感じている指示を必要とした.
送信されるデータは、サポートされる値のいずれかです.

すべてのプリミティブ型、記号

を除く

のアレイ

オブジェクトリテラル

文字列、日付、正規表現オブジェクト

Blob、ファイル、フィラリストオブジェクト

ArrayBuffer、ArrayBufferViewオブジェクト

formdataオブジェクト

imagedataオブジェクト

地図とセットオブジェクト

今、我々は我々のアプリの他の部分で同じチャンネルを聞く必要があります.そのためには、同じ名前のチャネルを作成し、OnMessageイベントハンドラを使用します

const channel = new BroadcastChannel('oauth')
channel.onmessage = (e) => {
  // Business logic here
  // data sent through the channel is available at e.data
}

そして、それ!別のウィンドウ、タブまたはフレームから別のデータに成功しました😀.
最後に、メッセージを受信して停止するには、以下のようにして閉じます.

channel.close()

ShareWorker APIまたはローカルストレージを使用して同じ結果を達成することができますが、個人的には、このメソッドは、最も直感的な発見した.他の選択肢を知っていますか.