How can I handle onbeforeunload event at Chrome version 80?

Question

After Chrome v73, we can use fetch api with keep alive tag in onbeforeunload event. However, fetch with keep alive and some extra headers(which cause preflight request) does not supported until Chrome v81. Also, synchronous xmlhttprequest in onbeforeunload event does not supported anymore after Chrome v80.

In this situation,

if version < 80 -> I can send synchronous xmlhttprequest in onbeforeunload event

if version > 80 -> I can send fetch with keep alive and extra headers(which cause preflight request) in onbeforeunload event

if version = 80 -> What can I do here?

Thank you.

Answer 1

You can use sendBeacon to call a POST method. See this sample:

var _wasPageCleanedUp = false;
function pageCleanup() {
    if (!_wasPageCleanedUp) {
        if (!navigator.sendBeacon) { 
            console.log("no sendBeacon");
        }

        navigator.sendBeacon("../rest/cancel");
    }
}

$(window).on('beforeunload', function () {
    //this will work only for Chrome
    pageCleanup();
});

$(window).on("unload", function () {
    //this will work for other browsers
    pageCleanup();
});

For more information see Disallow Synchronous XMLHTTPRequest() in Page Dismissal