title: HTTP request beforeunload: sendBeacon vs img.src
body: <p>In the context of a <code>beforeunload</code> handler, what is the functional difference between <code>fetch(keep-alive: true)</code> and setting the <code>src</code> attribute of an <code>img</code> tag, and which of these is the preferred method for making GET requests?</p>
  
  <p>Background:</p>
  
  <p>I want to send an HTTP GET request in a <code>beforeunload</code> handler in JavaScript code. <code>Navigator.sendBeacon</code>'s documentation discusses how good it is for this use case, <a href="https://w3c.github.io/beacon/#introduction" rel="noreferrer">but</a></p>
  
  <blockquote>
    <p>The sendBeacon() method does not provide ability to customize the request method</p>
  </blockquote>
  
  <p>Apparently there were a lot of <a href="https://github.com/w3c/beacon/issues/22" rel="noreferrer">requests</a> for such functionality a few years ago, which <a href="https://github.com/w3c/beacon/pull/27#issuecomment-241549321" rel="noreferrer">culminated</a> in the <a href="https://w3c.github.io/beacon/#introduction" rel="noreferrer">recommendation</a> to use <code>fetch()</code>, the browser method called internally by <code>sendBeacon</code>, with some specific flags set to solve the <code>unload</code> request problem:</p>
  
  <blockquote>
    <p>Applications that require non-default settings for such requests should use the <code>FETCH</code> API with keep-alive flag set to true</p>
  </blockquote>
  
  <pre><code>fetch(url, {
    method: ..., 
    body: ...,            
    headers: ...,       
    credentials: 'include',
    mode: 'cors',
    keep-alive: true,
  })
  </code></pre>
  
  <p>As far as I can tell, this type of call would be functionally equivalent to <code>Navigator.sendBeacon</code>, the key setting being <code>keep-alive: true</code>.</p>
  
  <p>Apparently the HTML <code>&lt;img&gt;</code> tag <em>also</em> <a href="https://fetch.spec.whatwg.org/#requests" rel="noreferrer">uses <code>keep-alive: true</code></a> according to the spec (emphasis mine):</p>
  
  <blockquote>
    <p>A request has an associated keepalive flag...This can be used to allow the request to outlive the environment settings object, e.g., navigator.sendBeacon and <strong>the HTML img element set this flag</strong></p>
  </blockquote>
  
  <p>My understanding of this documentation is that making a <code>GET</code> request on <code>unload</code> via an <code>img</code> element's <code>src</code> attribute is functionally equivalent to calling <code>fetch()</code> with <code>keep-alive: true</code>, which is <em>itself</em> functionally equivalent to calling <code>sendBeacon</code> (if <code>sendBeacon</code> could make <code>GET</code> requests).</p>
  
  <p>Is this accurate? </p>