鑰匙要點(diǎn)

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

>典型的

解決方案

將分析數(shù)據(jù)發(fā)送到服務(wù)器，因?yàn)槲臋n卸載可能看起來像這樣：

>卸載事件處理程序，該處理程序通過AJAX請(qǐng)求提交數(shù)據(jù)。當(dāng)頁面卸載事件啟動(dòng)時(shí)，數(shù)據(jù)將通過caureanalyticsdata函數(shù)捕獲，并通過AJAX請(qǐng)求發(fā)送到服務(wù)器。請(qǐng)注意Xhr.open的第三個(gè)參數(shù)是錯(cuò)誤的，表明AJAX請(qǐng)求為 synChronous

。瀏覽器通常會(huì)忽略卸載處理程序期間提出的異步請(qǐng)求，因此任何此類ajax請(qǐng)求

>都具有同步性。由于它是同步的，因此瀏覽器必須等待請(qǐng)求在>之前完成>它可以卸載文檔并顯示下一頁。等待的額外等待可能會(huì)導(dǎo)致表現(xiàn)不佳的感覺。

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

>使用的其他技術(shù)代替同步AJAX請(qǐng)求包括在卸載處理程序中設(shè)置圖像對(duì)象的SRC。瀏覽器將在卸載文檔之前等待圖像加載，在此期間可以將數(shù)據(jù)提交給服務(wù)器。但是，這仍然存在相同的問題：當(dāng)前文檔的卸載將在請(qǐng)求，這次完成圖像完成時(shí)延遲，這可能會(huì)導(dǎo)致性能差。

創(chuàng)建了Beacon API，以幫助解決這些問題。它定義了一個(gè)接口，該接口使開發(fā)人員可以將少量數(shù)據(jù)發(fā)送到Web服務(wù)器異步。它僅包含一種連接到導(dǎo)航對(duì)象的方法，即sendbeacon。 SendBeacon采用兩個(gè)參數(shù)，您要提交數(shù)據(jù)的URL以及要提交的數(shù)據(jù)：>

數(shù)據(jù)是通過HTTP POST請(qǐng)求提交的，可以作為arraybufferview，blob，domstring或formdata對(duì)象發(fā)送。瀏覽器將請(qǐng)求排隊(duì)，并將其發(fā)送“最早的可用機(jī)會(huì)，但與其他網(wǎng)絡(luò)流量相比，數(shù)據(jù)的傳輸更低?！?（根據(jù)W3C規(guī)格）。如果數(shù)據(jù)已成功提交到服務(wù)器，則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在主要桌面瀏覽器中都不錯(cuò)。您會(huì)發(fā)現(xiàn)它在當(dāng)前版本的Chrome，F(xiàn)irefox和Opera中得到了支持，但在IE和Safari的最新版本中不支持它。但是，您不能保證它的可用性，最好的選擇是使用功能檢測(cè)和后備到頁面上提交數(shù)據(jù)的舊方法之一：

>

>我創(chuàng)建了一個(gè)小示例應(yīng)用程序，您可以使用該應(yīng)用程序來查看Beacon API的作用。您需要安裝node.js來運(yùn)行服務(wù)器。運(yùn)行樣本：

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

>下載并將zip文件解壓縮到您選擇的文件夾中，例如BeaConapi

>打開終端并將目錄更改為您在步驟1中創(chuàng)建的文件夾，例如CD/PATH/TO/BEACONAPI
仍在終端中，輸入NPM安裝，然后按
2. >
現(xiàn)在鍵入debug = beacconapi_demo ./bin/www and pers press
3. >
>打開一個(gè)支持信標(biāo)API并將其指向http：// localhost：3000
4. >的瀏覽器
5. 您應(yīng)該看到一個(gè)看起來像這樣的頁面：

在此示例中，我們使用的是Chrome。打開開發(fā)工具，切換到網(wǎng)絡(luò)選項(xiàng)卡，然后勾選“保存日志”復(fù)選框。過濾結(jié)果，以便您只看到其他請(qǐng)求?，F(xiàn)在，當(dāng)您單擊“卸載”按鈕時(shí)，您應(yīng)該在Dev Tools中查看請(qǐng)求 /日志記錄。

結(jié)論

>本文介紹了信標(biāo)API。這是一個(gè)很小的API，但充滿了特定的利基市場(chǎng)。希望您能夠充分利用它。

經(jīng)常詢問有關(guān)信標(biāo)API

的問題（常見問題解答）

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

>我如何在Web應(yīng)用程序中使用Beacon API？要在Web應(yīng)用程序中使用信標(biāo)API，可以使用Navigator.sendBeacon（）方法。此方法需要兩個(gè)參數(shù)：將數(shù)據(jù)發(fā)送到的URL以及發(fā)送的數(shù)據(jù)。數(shù)據(jù)可以是formdata對(duì)象，blob，arraybufferview或urlsearchparams對(duì)象。這是一個(gè)示例：

var data = new formdata（）;

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

使用Beacon API？>

>使用BEACON API？信標(biāo)API的限制是，它沒有提供有關(guān)服務(wù)器成功收到數(shù)據(jù)的反饋。這意味著您不能將其用于需要確認(rèn)收據(jù)的關(guān)鍵數(shù)據(jù)。此外，所有瀏覽器中都不支持BEACON API，因此您可能需要為不支持它的瀏覽器提供后備。

>
> Beacon Api處理失敗如何？信標(biāo)API沒有提供有關(guān)服務(wù)器是否成功收到數(shù)據(jù)的任何反饋。如果由于網(wǎng)絡(luò)問題而無法發(fā)送數(shù)據(jù)，則API不會(huì)重試發(fā)送數(shù)據(jù)。這就是為什么建議將信標(biāo)API用于不需要確認(rèn)收據(jù)的非關(guān)鍵數(shù)據(jù)的原因。

>我可以使用信標(biāo)API將數(shù)據(jù)發(fā)送到其他域嗎？但是，服務(wù)器必須支持CORS（交叉原始資源共享），并且必須配置以接受您的域中的交叉原始請(qǐng)求。

>是否在所有瀏覽器中支持的信標(biāo)API？ Beacon API在大多數(shù)現(xiàn)代瀏覽器中都得到支持，包括Chrome，F(xiàn)irefox，Safari和Edge。但是，Internet Explorer不支持它。您可以在網(wǎng)站上檢查當(dāng)前的瀏覽器支持。例如分析數(shù)據(jù)。盡管您可以發(fā)送的數(shù)據(jù)量沒有嚴(yán)格的限制，但是發(fā)送大量數(shù)據(jù)可能會(huì)影響用戶網(wǎng)絡(luò)性能。因此，建議使用信標(biāo)API發(fā)送少量的非關(guān)鍵數(shù)據(jù)。

>

>我可以取消信標(biāo)的請(qǐng)求嗎？

不，一旦提出了信標(biāo)請(qǐng)求，就不能是取消。信標(biāo)API不提供取消或撤銷信標(biāo)請(qǐng)求的方法。這是建議將信標(biāo)API用于不需要確認(rèn)收據(jù)的非關(guān)鍵數(shù)據(jù)的另一個(gè)原因。

>

以上是信標(biāo)API簡(jiǎn)介的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！