sendBeaconでjson形式のデータを送る

なにこれ

sendBeacon() で送るデータを json 形式で送るための tips

---

sendBeacon()

sendBeacon() は文書のアンロードに関わらず、確実にデータを送信したいときに便利です。 送るデータが複数ある場合は(そうでないときも)、やっぱりデータは JSON 形式で送りたいですよね。

navigator.sendBeacon(url, data);
data: 送るデータを含む …(略)… Blob, …(略)… のいずれかのオブジェクトです。

sendBeacon() は Blob を受け取るので、JSON 形式のデータを持つ Blob を作成します。

JSON から Blob を作成する

Blob() コンストラクタは、他のオブジェクトから Blob を作成することができます。

const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj, null, 2)], {
  type: "application/json",
});

こんな感じのメソッドを使ってる

const sendBeaconWithJson = (json) => {
  const data = new Blob([JSON.stringify(json)], {
    type: "application/json",
  });
  return navigator.sendBeacon(`/any/path`, data);
};