ビーコンAPIの紹介

キーテイクアウト

• ビーコンAPIは、現在のページが降ろされている間に非同期にサーバーに戻って、分析や診断などの少量のデータを送信するためのWeb開発者がソリューションを提供し、潜在的な遅延または貴重な情報の損失の問題を解決します。 🎜>
ビーコンAPIは、ナビゲーターオブジェクトに接続されている1つのメソッド、sendbeaconで構成されています。データを送信するURLと、送信するデータの2つのパラメーターが必要です。データはHTTP POSTリクエストを介して送信され、ArrayBufferView、Blob、Domstring、またはFormDataオブジェクトとして送信できます。
• ビーコンAPIは、Chrome、Firefox、Operaなどの主要なデスクトップブラウザによってサポートされていますが、IEとSafariの最新バージョンではサポートされていません。サポートのないブラウザの場合、開発者はページアンロードでデータを送信する古い方法に機能検出とフォールバックを使用できます。
• ビーコンAPIを使用すると、Web開発者は、現在のページがアンロードされている間に、AnalyticsやDiagnosticsデータなどの少量のデータを非同期に戻すことができます。この記事では、ビーコンAPIが解決する問題のいくつかを見て、APIの使用方法を示します。 ビーコンAPIなしでは、ユーザーがページから離れてナビゲートしたときにデータをサーバーに送り返します。これにより、ユーザーのサイトのエクスペリエンスに害を及ぼすため、次のページが読み込みを遅らせたくありません。しかし、あなたはあなたのサイトを改善するのに役立つ貴重な情報を失いたくありません：データを早めに送信することはあなたがあなたが分数をより長く待っていた場合、あなたがキャプチャすることができる貴重な情報を失うことを意味するかもしれません
典型的な

solution

それは、ドキュメントのアンロードがこのように見えるかもしれないので、分析データをサーバーに送信します：

アンロードイベントハンドラー。これは、AJAXリクエストを介してデータを送信します。ページをアンロードしたイベントが発火すると、データはCaptureAnalyticsData関数を介してキャプチャされ、AJAXリクエストを介してサーバーに送信されます。 Xhr.Openの3番目のパラメーターはfalseであり、Ajax要求が同期

であることを示しています。ブラウザは通常、アンロードハンドラー中に行われた非同期リクエストを無視するため、そのようなAJAX要求

はを同期しています。同期しているため、ブラウザは、

の前に

<span>window.addEventListener('unload', function(event) {
</span>  <span>var xhr = new XMLHttpRequest(),
</span>    data <span>= captureAnalyticsData(event);
</span>
  xhr<span>.open('post', '/log', false);
</span>  xhr<span>.send(data);
</span><span>});
</span>
<span>function captureAnalyticsData(event) {
</span>  <span>return 'sample data';
</span><span>}</span>

を完了するリクエストを待つ必要があります。ドキュメントをアンロードして次のページを表示することができます。この余分な待機は、パフォーマンスの低下の認識につながる可能性があります。 同期AJAXリクエストの代わりに使用されるその他の手法には、UNLoadハンドラーの画像オブジェクトのSRCの設定が含まれます。ブラウザは、ドキュメントをアンロードする前に画像がロードされるのを待っています。その間、データをサーバーに送信できます。ただし、これにはまだ同じ問題があります。現在のドキュメントのアンロードが遅れます。今回は、画像が完了し、パフォーマンスが低いという認識につながる可能性があります。

ビーコンAPIは、これらの問題を解決するために作成されました。開発者が少量のデータをWebサーバーに送信できるインターフェイスを定義します非同期。ナビゲーターオブジェクトに取り付けられた1つのメソッド、SendBeaconのみで構成されています。 SendBeaconは、データを送信するURLと送信するデータの2つのパラメーターを採用します。

<span>window.addEventListener('unload', function(event) {
</span>  <span>var xhr = new XMLHttpRequest(),
</span>    data <span>= captureAnalyticsData(event);
</span>
  xhr<span>.open('post', '/log', false);
</span>  xhr<span>.send(data);
</span><span>});
</span>
<span>function captureAnalyticsData(event) {
</span>  <span>return 'sample data';
</span><span>}</span>

データはHTTP POSTリクエストを介して送信され、ArrayBufferView、Blob、Domstring、またはFormDataオブジェクトとして送信できます。ブラウザはリクエストをキュートし、「利用可能な最も早い機会で」と送信しますが、他のネットワークトラフィックと比較してデータの送信を優先する場合があります。」 （W3C仕様による）。 sendbeaconは、データがサーバーに正常に送信された場合、またはそれ以外の場合はfalseの場合にtrueを返します。 Navigator.sendbeaconのサポートは、主要なデスクトップブラウザー全体で適切です。 Chrome、Firefox、およびOperaの現在のバージョンではサポートされていますが、IEとSafariの最新バージョンではサポートされていません。ただし、可用性を保証することはできないため、ページアンロードでデータを送信する古い方法の1つに機能の検出とフォールバックを使用することが最善です。

ビーコンAPIが動作しているのを見るために使用できる小さなサンプルアプリを作成しました。サーバーを実行するには、node.jsをインストールする必要があります。サンプルを実行するには：

<span>window.addEventListener('unload', function(event) {
</span>  <span>var data = captureAnalyticsData(event);
</span>  <span>navigator.sendBeacon('/log', data);
</span><span>});</span>

zipファイルを選択したフォルダーにダウンロードして解凍します。 beaconapi

端末を開き、ディレクトリをステップ1で作成したフォルダーに変更します。 cd/path/to/beaconapi

まだ端末に、npmインストールを入力して
1. を押します debug = beacconapi_demo ./bin/wwwと入力し、
を押します
2. ビーコンAPIをサポートするブラウザを開き、http：// localhost：3000
を指​​します
次のように見えるページが表示されるはずです：
5. この例では、Chromeを使用しています。開発ツールを開き、[ネットワーク]タブに切り替え、[保存]ログチェックボックスをチェックします。結果をフィルタリングして、他のリクエストが表示されます。ここで、[アンロード]ボタンをクリックすると、開発ツールにログインしたリクエスト /ログが表示されます。

結論 この記事は、ビーコンAPIを導入しました。非常に小さなAPIですが、特定のニッチを埋めます。うまくいけば、あなたはそれをうまく使うことができます。

ビーコンAPIに関するよくある質問（FAQ）

ビーコンAPIの主要な機能は何ですか？

ビーコンAPIは、Webアプリケーションがユーザーのブラウザーからサーバーにデータを効率的かつ非ブロッキング方法で送信できるようにするWeb APIです。このAPIは、ユーザーのブラウジングエクスペリエンスに影響を与えることなく送信できる分析データを送信するのに特に役立ちます。ビーコンAPIは、ユーザーがページから離れたりブラウザを閉じたりしても、データが送信されることを保証します。 APIは、クライアントからサーバーにデータを送信するために使用され、ユースケースと動作が異なります。 Ajaxは通常、サーバーからデータを取得し、リロードせずにWebページを更新するために使用されます。一方、ビーコンAPIは、ユーザーのブラウジングエクスペリエンスをブロックすることなく、サーバー、特に分析データを送信するために使用されます。 AJAXとは異なり、ビーコンAPIは、ユーザーがページから離れたりブラウザを閉じたりしても、データが送信されることを保証します。 WebアプリケーションでビーコンAPIを使用するには、navigator.sendbeacon（）メソッドを使用できます。この方法では、データを送信するURLと送信するデータの2つの引数が必要です。データは、formdataオブジェクト、blob、arraybufferview、またはurlsearchparamsオブジェクトです。例は次のとおりです。

var data = new formdata（）;

data.append（ 'name'、 'john doe'）;

navigator.sendbeacon（ '/api/endpoint'、data ）;

ビーコンAPIを使用することの利点は何ですか？

ビーコンAPIは、Webアプリケーションにいくつかの利点を提供します。まず、非ブロッキング方法でデータをサーバーに送信できます。つまり、ユーザーの閲覧エクスペリエンスには影響しません。第二に、ユーザーがページから離れてナビゲートしたり、ブラウザを閉じたりしても、データが送信されるようにします。これにより、データの損失をリスクせずにユーザーのセッションの最後に送信できる分析データを送信するのに理想的です。ビーコンAPIを使用するための制限や欠点はありますか？ビーコンAPIの制限は、データがサーバーによって正常に受信されたかどうかについてフィードバックを提供しないことです。これは、領収書の確認が必要な重要なデータに使用できないことを意味します。さらに、ビーコンAPIはすべてのブラウザーでサポートされていないため、サポートしないブラウザーにフォールバックを提供する必要がある場合があります。ビーコンAPIは、サーバーによってデータが正常に受信されたかどうかについてのフィードバックを提供しません。たとえば、ネットワークの問題によりデータを送信できない場合、APIはデータの送信を再試行しません。これが、領収書の確認を必要としない非批判的なデータにビーコンAPIを使用することをお勧めする理由です。

ビーコンAPIを使用して別のドメインにデータを送信できますか？

​​

はい、ビーコンAPIを使用して別のドメインにデータを送信できます。ただし、サーバーはCORS（クロスオリジンリソース共有）をサポートする必要があり、ドメインからのクロスオリジン要求を受け入れるように構成する必要があります。ビーコンAPIは、Chrome、Firefox、Safari、Edgeなど、ほとんどの最新のブラウザでサポートされています。ただし、Internet Explorerではサポートされていません。現在のブラウザのサポートをWebサイトで確認できます。

ビーコンAPIで大量のデータを送信できますか？分析データなど。送信できるデータの量には厳しい制限はありませんが、大量のデータを送信すると、ユーザーのネットワークパフォーマンスに影響を与える可能性があります。したがって、ビーコンAPIを使用して少量の非批判的なデータを送信することをお勧めします。

ビーコンリクエストをキャンセルできますか？キャンセル。ビーコンAPIは、ビーコンリクエストをキャンセルまたは元に戻す方法を提供しません。これが、領収書の確認を必要としない非クリティカルなデータにビーコンAPIを使用することをお勧めするもう1つの理由です。

以上がビーコンAPIの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。