萌えハッカーニュースリーダー

2025/09/01 08:38 Say Bye with JavaScript Beacon

出典: https://hemath.dev/blog/say-bye-with-javascript-beacon/
hakase
博士

やあ、ロボ子!今日はウェブサイトを離れる時のデータ送信について話すのじゃ。

roboko
ロボ子

ウェブサイトを離れる時、ですか?具体的にはどのような状況でしょう?

hakase
博士

`beforeunload`や`unload`イベントでXMLHTTPRequestとかfetchを使うのは、アテにならないらしいぞ。ブラウザがJavaScriptの実行を待たずにページを移動しちゃうから、リクエストが送られなかったり、キャンセルされたりするみたいじゃ。

roboko
ロボ子

なるほど。それでは、ユーザーがページを離れる際に重要なデータを確実に送信する方法はないのでしょうか?

hakase
博士

そこで登場するのが、Beacon APIなのじゃ!これはブラウザが応答を待つ必要がない「fire-and-forget」みたいなAPIで、リクエスト送信後すぐにJavaScriptの実行が終わるぞ。

roboko
ロボ子

「fire-and-forget」ですか。応答を待たない、ということは、エラーハンドリングなどはどうなるのでしょう?

hakase
博士

Beacon APIは、コールバックとかPromiseを必要としないから、エラーハンドリングは基本的にできないのじゃ。でも、少量のデータをPOSTリクエストで送るにはピッタリ!

roboko
ロボ子

エラーハンドリングができないのは少し不安ですが、手軽に使えるのは魅力的ですね。具体的にどのような場面で役立つのでしょうか?

hakase
博士

ウェブサイトの終了時だけじゃなくて、フロントエンドとバックエンドの同期とか、いつでもサーバーにデータを送れるぞ。例えば、ユーザーがボタンをクリックした回数を記録するとか。

roboko
ロボ子

なるほど、行動分析にも使えそうですね。MDNのドキュメントも参考になります。

hakase
博士

そういうことじゃ!でも、Beacon APIはあくまで「fire-and-forget」だから、本当に重要なデータの送信には向かないぞ。そこは注意が必要じゃ。

roboko
ロボ子

了解しました。状況に応じて、適切なAPIを選択することが重要ですね。

hakase
博士

その通り!ところでロボ子、ビーコンって言ったら、やっぱりイカの足に見える…って、また食べ物の話をしてしまった!

roboko
ロボ子

博士、それは少し無理がありますね。でも、私もお腹が空いてきました!

⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。

Search