ブラウザとサーバー間で最も広く使用されている既知の通信方法はHttp/sです。要求/応答に基づいて構築されたこのプロトコルは、応答を待たずに動作する場合があります。サーバーXHR、Fetch、Axiosと通信するときにビーコンAPIが必要なのはなぜですか？

この記事は、私が以前に始めたWebAPI記事シリーズの続きです。JSコードを使用してオペレーティングシステムまたはブラウザのネイティブ部分にアクセスするために提供されているAPIがあることを説明しました。ビーコンAPIを使用すると、HTTP POSTを介してデータを送信できますが、応答を待機しません。データを送信するようにブラウザに指示します。結果は、ブラウザがキューに入れて処理すると言った場合はtrueになり、この部分に問題がある場合はfalseになります。

let result = navigator.sendBeacon(url, data);
//Data Types : ArrayBufferView, Blob, DOMString, or FormData

• ページ統計、インタラクション統計、およびページ内のコンポーネントとのランク。
• デバッグとロギングに使用できます。ページ上のコンポーネントでいくつかのイベントのログと保存ポイントを作成し、BeaconAPIを使用してこの情報を送信できます。

実際、XHTTPRequestを介して行われるこのプロセスに既存のXHRまたはFetchを使用しない理由と、Beacon APIを使用する理由をよりよく説明するために、主題をもう少し調べてみましょう。

Beacon APIを介してリクエストを行うと、その時点ではデータは送信されません。これは、CPUの使用量が少なく、ネットワークがアイドル状態のときに実行されます。このコマンドを実行するためにキューに入れられたことをユーザーに通知するだけです。これにより、特にページがアンロードされているページのリンクをクリックしてスタートページに移動する場合に、パフォーマンスが大幅に向上します。その間、余分なXHRリクエストのコストを節約し、新しいページへのリダイレクトを遅らせます。したがって、Beacon APIは、今日の重要な通信上の利点を提供します。

サポート

ブラウザがBeaconAPIをサポートしているかどうかは、次の方法で確認できます。

if (navigator.sendBeacon) {
  // Beacon exist
} else {
  // No Beacon. 
}

• WebビーコンAPIを使用したロギングアクティビティ
• MDNビーコンAPI

このリンクをクリックすると、この記事の残りの部分または記事グループ内の他の記事にアクセスできます 。