雜記：關於 navigator.sendBeacon 接口

今天在 GoogleChrome 的 Samples 倉庫中看到了 navigator.sendBeacon 接口案例 demo。

if ('sendBeacon' in navigator) {
  window.addEventListener('pagehide', function() {
    navigator.sendBeacon(
      'https://putsreq.herokuapp.com/4GE2nVUuDoDGsNyKES2G',
      'Sent by a beacon!');
  }, false);
}
複製代碼

打開上面的頁面，而後關閉，再點擊進入地址 putsreq.herokuapp.com/4GE2nVUuDoD…，就能看見剛纔你發送的請求信息。

在此以前，我已經知道的知識包括：

1. navigator.sendBeacon 發送的是 POST 請求
2. 傳輸數據有限制（在 Windows Chorme 瀏覽器下測試是 65536 個字符（出處））
3. 底層是使用 Fetch API 實現的

第三點，我記不太清了，而後找出了以前翻譯的文章確認一下。

回溫到了這塊內容：

Fetch API 支持一個 keepalive 選項，當設置爲 true 時，保證無論發送請求的頁面關閉與否，請求都會持續到結束。

window.addEventListener('unload', {
  fetch('/siteAnalytics', {
    method: 'POST',
    body: getStatistics(),
    keepalive: true
  });
}
複製代碼

Fetch API 語法以下：

navigator.sendBeacon(url, data);
複製代碼

由此，我想到 navigator.sendBeacon 底層的 Fetch API 實現多是這樣的：

function sendBeacon(url, data) {
  try {
    fetch(url, {
      method: 'POST',
      body: data,
      keepalive: true
    })
  } catch {
    return false
  }
  return true
}
複製代碼

我又找了當前 navigator.sendBeacon 的 polyfill 實現方式。

下面列出是其核心代碼：

function sendBeacon(url, data) {
  var event = this.event && this.event.type;
  var sync = event === 'unload' || event === 'beforeunload';
  var xhr = 'XMLHttpRequest' in this ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
  xhr.open('POST', url, !sync);
  xhr.withCredentials = true;
  xhr.setRequestHeader('Accept', '*/*');

  if (isString(data)) {
    xhr.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
    xhr.responseType = 'text';
  } else if (isBlob(data) && data.type) {
    xhr.setRequestHeader('Content-Type', data.type);
  }

  try {
    xhr.send(data);
  } catch (error) {
    return false;
  }

  return true;
}
複製代碼

底層是藉助了 XMLHttpRequest 實例的 open 方法第三個 sync 參數，該參數爲 true 時，發送就是同步請求。這裏只在頁面的 unload 和 beforeunload 事件階段才啓用同步請求，不然都是異步請求。

擴展閱讀：

• golb.hplar.ch/2018/09/bea…
• developer.mozilla.org/en-US/docs/…

（正文完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）