使用 sendBeacon 需要注意的問題

IOneStar發表於2023-02-10

fetch和sendBeacon最大的區別

  • fetch：頁面銷燬時的監控埋點大機率上報失敗，優先順序為 High

  • sendBeacon：

    • 頁面銷燬時的監控埋點也傳送請求；
    • 在瀏覽器空閒的時候非同步傳送資料，不影響頁面諸如 JS、CSS Animation 等執行，優先順序為 Lowest

需要注意的問題

一、跨域請求

使用 sendBeacon 發跨域請求時，需要注意以下兩點

  1. 不能設定 Access-Control-Allow-Origin 為 "*"

  2. 需要設定 Access-Control-Allow-Credentials: true

    import cors from "@koa/cors"
app.use(cors({Credentials: true}))

二、介面引數為 json型別時

sendBeacon Data 支援的引數型別如圖

image

Fetch post 請求，需要傳 http header:

headers: {'Content-Type': 'application/json',}

sendBeacon：使用Blob型別來實現。把Blob內容的格式型別設定為json格式

var data = { ajax_data: 22 };
var blob = new Blob([JSON.stringify(data)], {type : 'application/json'});

// Content-Type of the Beacon HTTP request will be application/json in this case
navigator.sendBeacon('ajax.php', blob);
在 iOS 13 的手機上 發現在端內開啟 webview 發生了崩潰，報錯資訊: iOS 13 不支援 POST body 裡面包含 Blob 或者 File 型別的資料。改成使用 fetch 請求後，上述問題不再復現。

相關文章