ページbeforeunload時にAjax通信ができない

Question

前提・実現したいこと

ページを離脱したタイミングでAjax通信でDBに離脱した時間を格納しようとしています。
Choromeでunloadを利用し、Ajax通信をしているのですが動作しません。
Choromeの仕様を確認するとbeforeunload、unload、pagehide、およびvisibilitychangeで同期XHRを許可しないようになったとのことですが解決策ありますでしょうか？

参考URL
https://www.chromestatus.com/feature/4664843055398912

https://jpcloud.net/q/ghychxgk
期間を1か月前までに絞り上記記事を見つけたのですがasync: falseにしても動作変わりませんでした。

発生している問題・エラーメッセージ

"NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load '': Synchronous XHR in page dismissal. See https://www.chromestatus.com/feature/4664843055398912 for more details."

該当のソースコード

$(window).on("beforeunload", function() {
    pageout();
    return "test";
});

function pageout(){
    var data = {
        "data": "hoge",
    };
    
    $.ajax({
        type: "POST",
        url: "url",
        data: data,
        async: false,
    }).done(function(result){
        // 成功時処理
    }).fail(function(result){
        // 失敗時処理
    });
};

試したこと

POST通信をGET通信に変更
beforeunloadをunloadに変更

Comments

[m.ts10806]

離脱時にAjaxで何をしたいのでしょうか

[m.ts10806]

失礼ありましたね。
>Ajax通信でDBに離脱した時間を格納しようとしています。

[te_ff]

離脱した時間をDBに保存できればと考えています。
１．ページアクセス時にDB登録
２．ページ離脱時にフロントサイドからバックエンドへ登録した情報のIDを送信
３．バックエンドで該当IDの離脱時間更新

Answer 1

これってキャンセルしたときでもDBにデータが飛んでしまうのでは？
切断時間がどうしても必要なら、1～数分に一度アライブを通知する
仕組みにしておき、最後の通信時間をもって切断されたと見ます
とかのほうが現実的かもしれません
（負荷はそれなりに高くなりますが）

Comments

[te_ff]

すみません。
記載方法が不適切だったようです。
return "test";　はコンソールに出力されたエラーメッセージ確認のため記載していましたが最終的にreturn "test"; は記載しない想定です。

[m.ts10806]

>これってキャンセルしたときでもDBにデータが飛んでしまうのでは？

たしか、飛びますね。確実に離脱を感知する仕組みではなかったはず。

[yambejp]

httpベースの処理は所詮終わりを検知するのは難しいので
適当なところで見切りをつける必要はあるでしょうね
ただbeforeunloadを過信するのは禁物というだけです
ブラウザが強制終了して、接続状態がつづいていると
判断されることだってままあることです

Answer 2

こんにちは。

sendBeacon() を使うのはどうでしょうか。
Navigator.sendBeacon() - Web API | MDN

Comments

[te_ff]

ありがとうございます！
https://www.chromestatus.com/feature/4664843055398912
こちらドキュメントの読み込みが足りなかったようで申し訳ありません。
FetchまたはSendBeaconを利用する必要があると記載がありました。
一度試してみます。

[te_ff]

SendBeaconを利用することにより実現できました！
最終的なコードを記載します。
$(window).on("beforeunload", function() {
var data = new FormData();
data.append("data", "hoge");
navigator.sendBeacon("url", data);
});