信標API簡介

鑰匙要點

Beacon API為Web開發人員提供了一個解決方案，以在當前頁面卸載時將少量數據（例如分析或診斷）發送回服務器，從而解決了潛在的延遲或丟失有價值信息的問題。 🎜> Beacon API由一種附加到Navigator對象的方法SendBeacon組成。它需要兩個參數，即提交數據的URL以及要提交的數據。數據是通過HTTP POST請求提交的，可以作為arraybufferview，blob，domstring或formdata對象發送。
• > Beacon API得到了Chrome，Firefox和Opera等主要桌面瀏覽器的支持，但在IE和Safari的最新版本中沒有支持。對於沒有支持的瀏覽器，開發人員可以使用功能檢測和後備到較舊的頁面上提交數據的方法。
• Beacon API使Web開發人員可以輕鬆地將少量數據（例如分析或診斷數據）發送回服務器時，在當前頁面卸載時會異步回到服務器。在本文中，我們將研究Beacon API解決的一些問題，並向您展示如何使用API​​。
沒有信標API，當用戶從頁面上導航時，將數據發送回服務器可能比看起來更棘手。您不想將下一頁推遲加載，因為這會損害用戶對網站的體驗。但是，您不想失去可能有助於改善您的網站的寶貴信息：發送數據過早可能意味著您會釋放
• >
可以捕獲的有價值的信息，如果您等待了更長的時間。 >

>典型的

解決方案

將分析數據發送到服務器，因為文檔卸載可能看起來像這樣：

>卸載事件處理程序，該處理程序通過AJAX請求提交數據。當頁面卸載事件啟動時，數據將通過caureanalyticsdata函數捕獲，並通過AJAX請求發送到服務器。請注意Xhr.open的第三個參數是錯誤的，表明AJAX請求為 synChronous

。瀏覽器通常會忽略卸載處理程序期間提出的異步請求，因此任何此類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請求包括在卸載處理程序中設置圖像對象的SRC。瀏覽器將在卸載文檔之前等待圖像加載，在此期間可以將數據提交給服務器。但是，這仍然存在相同的問題：當前文檔的卸載將在請求，這次完成圖像完成時延遲，這可能會導致性能差。

創建了Beacon API，以幫助解決這些問題。它定義了一個接口，該接口使開發人員可以將少量數據發送到Web服務器異步。它僅包含一種連接到導航對象的方法，即sendbeacon。 SendBeacon採用兩個參數，您要提交數據的URL以及要提交的數據：>

數據是通過HTTP POST請求提交的，可以作為arraybufferview，blob，domstring或formdata對象發送。瀏覽器將請求排隊，並將其發送“最早的可用機會，但與其他網絡流量相比，數據的傳輸更低。” （根據W3C規格）。如果數據已成功提交到服務器，則SendBeacon將返回true，或者否則為false。

<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>

> Navigator.SendBeacon在主要桌面瀏覽器中都不錯。您會發現它在當前版本的Chrome，Firefox和Opera中得到了支持，但在IE和Safari的最新版本中不支持它。但是，您不能保證它的可用性，最好的選擇是使用功能檢測和後備到頁面上提交數據的舊方法之一：

>

>我創建了一個小示例應用程序，您可以使用該應用程序來查看Beacon 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安裝，然後按
2. >
現在鍵入debug = beacconapi_demo ./bin/www and pers press
3. >
>打開一個支持信標API並將其指向http：// localhost：3000
4. >的瀏覽器
5. 您應該看到一個看起來像這樣的頁面：

在此示例中，我們使用的是Chrome。打開開發工具，切換到網絡選項卡，然後勾選“保存日誌”複選框。過濾結果，以便您只看到其他請求。現在，當您單擊“卸載”按鈕時，您應該在Dev Tools中查看請求 /日誌記錄。

結論

>本文介紹了信標API。這是一個很小的API，但充滿了特定的利基市場。希望您能夠充分利用它。

經常詢問有關信標API

的問題（常見問題解答）

> Beacon API的主要功能是什麼？ >

>我如何在Web應用程序中使用Beacon API？要在Web應用程序中使用信標API，可以使用Navigator.sendBeacon（）方法。此方法需要兩個參數：將數據發送到的URL以及發送的數據。數據可以是formdata對象，blob，arraybufferview或urlsearchparams對象。這是一個示例：

var data = new formdata（）;

data.append（'name'，'john doe'）; navigator.sendbeacon（'/api/endpoint'， data，data ）;

使用Beacon API？ >

>使用BEACON API？信標API的限制是，它沒有提供有關服務器成功收到數據的反饋。這意味著您不能將其用於需要確認收據的關鍵數據。此外，所有瀏覽器中都不支持BEACON API，因此您可能需要為不支持它的瀏覽器提供後備。

>
> Beacon Api處理失敗如何？信標API沒有提供有關服務器是否成功收到數據的任何反饋。如果由於網絡問題而無法發送數據，則API不會重試發送數據。這就是為什麼建議將信標API用於不需要確認收據的非關鍵數據的原因。

>我可以使用信標API將數據發送到其他域嗎？但是，服務器必須支持CORS（交叉原始資源共享），並且必須配置以接受您的域中的交叉原始請求。

>是否在所有瀏覽器中支持的信標API？ Beacon API在大多數現代瀏覽器中都得到支持，包括Chrome，Firefox，Safari和Edge。但是，Internet Explorer不支持它。您可以在網站上檢查當前的瀏覽器支持。例如分析數據。儘管您可以發送的數據量沒有嚴格的限制，但是發送大量數據可能會影響用戶網絡性能。因此，建議使用信標API發送少量的非關鍵數據。

>

>我可以取消信標的請求嗎？

不，一旦提出了信標請求，就不能是取消。信標API不提供取消或撤銷信標請求的方法。這是建議將信標API用於不需要確認收據的非關鍵數據的另一個原因。

>

以上是信標API簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！