mozilla
Your Search Results

    Navigator.sendBeacon()

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    Summary

    The navigator.sendBeacon() method can be used to asynchronously transfer small HTTP data from the User Agent to a web server.

    Syntax

    navigator.sendBeacon(url, data);
    

    Parameters

    url
    The url parameter indicates the resolved URL where the data is to be transmitted.
    data
    The data parameter is the ArrayBufferView, Blob, DOMString, or FormData data that is to be transmitted.

    Return values

    The sendBeacon() method returns true if the user agent is able to successfully queue the data for transfer, Otherwise it returns false.

    Description

    This method addresses the needs of analytics and diagnostics code that typically attempt to send data to a web server prior to the unloading of the document. Sending the data any sooner may result in a missed opportunity to gather data. However, ensuring that the data has been sent during the unloading of a document is something that has traditionally been difficult for developers.

    User agents will typically ignore asynchronous XMLHttpRequests made in an unload handler. To solve this problem, analytics and diagnostics code will typically make a synchronous XMLHttpRequest in an unload or beforeunload handler to submit the data. The synchronous XMLHttpRequest forces the User Agent to delay unloading the document, and makes the next navigation appear to be slower. There is nothing the next page can do to avoid this perception of poor page load performance.

    There are other techniques used to ensure that data is submitted. One such technique is to delay the unload in order to submit data by creating an Image element and setting its src attribute within the unload handler. As most user agents will delay the unload to complete the pending image load, data can be submitted during the unload. Another technique is to create a no-op loop for several seconds within the unload handler to delay the unload and submit data to a server.

    Not only do these techniques represent poor coding patterns, some of them are unreliable and also result in the perception of poor page load performance for the next navigation.

    The following example shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unload of the page to be delayed.

    window.addEventListener('unload', logData, false);
    
    function logData() {
        var client = new XMLHttpRequest();
        client.open("POST", "/log", false); // third parameter indicates sync xhr
        client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
        client.send(analyticsData);
    }
    

    Using the sendBeacon() method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, without delaying the unload or affecting the performance of the next navigation.

    The following example shows a theoretical analytics code pattern that submits data to a server using the by using the sendBeacon() method.

    window.addEventListener('unload', logData, false);
    
    function logData() {
        navigator.sendBeacon("/log", analyticsData);
    }
    

    Specification

    Specification Status Comment
    Beacon
    The definition of 'sendBeacon()' in that specification.
    Working Draft Initial definition.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 39 31 (31) Not supported 26 Not supported
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support Not supported 31.0 (31) Not supported Not supported Not supported

    See also

    Document Tags and Contributors

    Contributors to this page: ziyunfei, gnumanth, acdha, teoli, P0lip, realityking
    Last updated by: teoli,
    Hide Sidebar