[wp-trac] [WordPress Trac] #37487: Use Beacon API since Synchronous XMLHttpRequests on the main thread are deprecated

[WordPress Trac]

#37487: Use Beacon API since Synchronous XMLHttpRequests on the main thread are
deprecated
--------------------------+----------------------------
 Reporter:  iseulde       |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Future Release
Component:  General       |    Version:
 Severity:  normal        |   Keywords:
  Focuses:  javascript    |
--------------------------+----------------------------
 jQuery ajax calls with `async: false` trigger the following warning:

 > Synchronous XMLHttpRequest on the main thread is deprecated because of
 its detrimental effects to the end user's experience. For more help, check
 https://xhr.spec.whatwg.org/.

 To see this warning you must preserve the log.

 The waring refers to [https://xhr.spec.whatwg.org/#sync-warning the
 following section]:

 > Synchronous [https://xhr.spec.whatwg.org/#xmlhttprequest XMLHttpRequest]
 outside of workers is in the process of being removed from the web
 platform as it has detrimental effects to the end user's experience. (This
 is a long process that takes many years.) Developers must not pass false
 for the async argument when
 [https://html.spec.whatwg.org/multipage/webappapis.html#entry-settings-
 object entry settings object]'s
 [https://html.spec.whatwg.org/multipage/webappapis.html#global-object
 global object] is a
 [https://html.spec.whatwg.org/multipage/browsers.html#window Window]
 object. User agents are strongly encouraged to warn about such usage in
 developer tools and may experiment with [https://heycam.github.io/webidl
 /#dfn-throw throwing] an `InvalidAccessError` exception when it occurs.

 At the moment the only use in core is for removing the post lock when the
 user navigates away from a post page. As it is mentioned in
 [https://developer.mozilla.org/en-
 US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests an
 article on the MDN], the Beacon API should be used for requests like this.

 > There are some cases in which the synchronous usage of XMLHttpRequest
 was not replaceable, like during the
 [https://developer.mozilla.org/en/DOM/window.onunload window.onunload] and
 [https://developer.mozilla.org/en/DOM/window.onbeforeunload
 window.onbeforeunload] events. The [https://developer.mozilla.org/en-
 US/docs/Web/API/Navigator/sendBeacon navigator.sendBeacon] API can support
 these usecases typically while delivering a good UX.
 >
 > [...]
 >
 > 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'''.

 Specification: https://www.w3.org/TR/beacon/.
 More information: https://developer.mozilla.org/en-
 US/docs/Web/API/Navigator/sendBeacon.

 According to [https://developer.mozilla.org/en-
 US/docs/Web/API/Navigator/sendBeacon the MDN] and
 [http://caniuse.com/#feat=beacon caniuse.com], Chrome, Firefox, Opera and
 Android support it, Safari and Internet Explorer do not, but
 [https://developer.microsoft.com/en-us/microsoft-
 edge/platform/status/beacon/ support in Edge is on its way].

 So with fairly good support, I think we should use this API and fall back
 to a synchronous XMLHttpRequest. In another ticket we could also take a
 look to use this for autosaving posts.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/37487>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform