recently, I had the urgent requirement to give my server a notice, that a specific page of my webapp is about to get closed. "Easy peasy" I thought, beforeunload
is available for quite a while. The HTML5 "thing" even refreshed the spec (that was what I thought...) about it, in the way that we had the option to return
a string value from a beforeunload
event handler and stuff, which gives an user the option to intercept.
See the MDN page about onbeforeunload
However, as it turned out, there isn't any "official" specification available, which describes the behavior for beforeunload
up to this date. The only official document I found, was on WHATWG, which is just a proposal for W3C of course.
So far so good. We are able to create a synchronized XHR request within a beforeunload
event handler. "Most" browsers, give that request a timeframe of about 1-2 seconds to complete, after that it is getting killed. Standard asynchronous request are killed immediately. Having that said, I cannot even tell from "where" I know this, it seems like gossip and word of mouth looking at it now. Even tho, it works in Firefox+Chrome, we cannot rely on that, can we ?
Is there any ongoing discussion/proposal on WHATWG about beforeunload
?
Any other official resources about the event I might have not found ?
And far most important to me here, how reliably can we send data via sync-XHR there ?
Take a look at navigator.sendBeacon()
, which allows you to reliably send data to a server even when the page is unloading. It's currently in a draft specification and supported by Firefox 31, Chrome 39 (behind a flag from 37), behind a flag in Opera 24.
You could "sort of" polyfill it using something like the following:
navigator.sendBeacon = navigator.sendBeacon || function (url, data) {
var xhr = new XMLHttpRequest();
// Need to send synchronously to have the best chance of data getting
// through to the server
xhr.open('POST', url, false);
xhr.send(data);
};