How to send an AJAX PUT request on page unload without it cancelling?

Question

I'm trying to send a PUT request on the unload event, however the request is always cancelled.

Answers here suggests it's

1. not possible: How to perform an ajax call on page unload?

2. possible: How do I send an AJAX request upon page unload / leaving?

Can I send an AJAX request on unload, if so how can I without being cancelled.

Note: I don't care about the response, I don't need a response. Just need to send some info to the server saying the page was closed without keep alive checks.

Answer 1

Doing standard ajax calls in a page unload handler is being actively disabled by browsers, because waiting for it to complete delays the next thing happening in the window (for instance, loading a new page). Although you can't do PUT with it, the replacement for synchronous ajax in unload handlers is sendBeacon. sendBeacon lets you send data to your server without holding up the page you're doing it in:

window.addEventListener("unload", function() {
  navigator.sendBeacon("/log", yourDataHere);
});

The browser will send the data without preventing / delaying whatever is happening in the window (closing it, moving to a new paeg, etc.).

Beacons are POSTs, not PUTs, but other than that it's exactly what you're looking for.

Note that the unload event may not be reliable, particularly on mobile devices. You might combine the above with sending a beacon on visibilitychange as well.

Answer 2

All you need to do is make the ajax call synchronous. That way the browser will wait for the response before closing the window/tab and it will not be cancelled.

$(window).unload(function(){
    $.ajax({
        type: 'PUT',
        url: '/your_url.php',
        async:false, //IMPORTANT, the call will be synchronous
        data: {}
    }).done(function(data) {                
        console.log('complete');
    });
});

Answer 3

The question is a duplicate (I should have realized that at the time). I've posted a version of this answer here on the other question and made this a Community Wiki.

---

Doing standard ajax calls in a page unload handler is being actively disabled by browsers, because waiting for it to complete delays the next thing happening in the window (for instance, loading a new page). Although you can't do PUT with it, the replacement for synchronous ajax in unload handlers is sendBeacon. sendBeacon lets you send data to your server without holding up the page you're doing it in:

window.addEventListener("unload", function() {
  navigator.sendBeacon("/log", yourDataHere);
});

The browser will send the data without preventing / delaying whatever is happening in the window (closing it, moving to a new paeg, etc.).

Beacons are POSTs, not PUTs, but other than that it's exactly what you're looking for.

Note that the unload event may not be reliable, particularly on mobile devices. You might combine the above with sending a beacon on visibilitychange as well.