在 Service Worker 中使用 performance.now() 获取 API 响应时间

Question

I am developing a react application and intercepting every fetch request using a service worker in place. I need to get the API response time what we normally do using performance.now() using service worker as if I am adding eventListener on its fetch method, it can intercept every fetch request.

I am not sure exactly how to achieve this and where to place performance.now() start and end calls?

Below is the code I have worked so far.

registerServiceWorker function - The function is womring fine and sw.js registers itself as service worker.

const registerServiceWorker = () => {
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js').then(registration => {
        console.log('Service worker registered with scope: ', registration.scope);
      }, (err) => {
        console.log('ServiceWorker registration failed: ', err);
      });
    });
  } else {
    console.log('Service worker is not supported!');
  };
};

sw.js file - Service worker file

self.addEventListener('fetch', event => {
  const apiStartTime = self.performance.now();

  event.respondWith((async () => {

    const { pathname, query } = new URL(event.request.url);
    const apiTotalTime = Math.round(self.performance.now() - apiStartTime);
    console.log('performance2 end', event.request.url, apiTotalTime);
    
    const cachedResponse = await caches.match(event.request);
    if (cachedResponse) return cachedResponse;

    const response = await fetch(event.request);

    return response;
  })());
});

The apiTotalTime value is coming as 0 always for every API which is not as expected.

Answer 1

Try placing your second call to performance.now after await fetch(event.request) - after the service call is actually made and awaited.