title: Measure time taken by a fetch request only when the page is active
body: <p>I'm using <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Performance/now" rel="nofollow noreferrer"><code>performance.now()</code></a> to measure how much time a network request is taking:</p>
  <pre class="lang-js prettyprint-override"><code>let time = performance.now();
  
  await fetch('example.com', { method: 'PUT', body: '...' });
  
  let requestTime = performance.now() - time;
  </code></pre>
  <p>However, on some mobile browsers (like Safari), when the user switches apps (e.g. go from Safari to another app) in the middle of the request, the rest of the code only executes when the user switches back to Safari. (ps: I can't reproduce this on my Windows browser)</p>
  <p>This is causing our metrics to be distorted, since some users return hours later to finish the process, causing <code>requestTime</code> to be misleading.</p>
  <h3>Question</h3>
  <p>How can I take into account only the time the user actually spent waiting for the request to finish? Or at least detect this happened so I can discard this metric.</p>
  <p>I don't mind having to switch to a non-native lib (instead of <code>fetch</code>) with builtin functionalitites to help me with this.</p>
  <p>I have no control over the endpoint I'm calling, so I can't return the time taken from there.</p>