在 Service Worker 中使用 performance.now() 獲取 API 響應時間

Question

我正在開發一個反應應用程序並使用服務工作者攔截每個獲取請求。 我需要得到 API 響應時間，就像我們通常使用 service worker 使用performance.now()所做的那樣，就好像我在它的 fetch 方法上添加了 eventListener，它可以攔截每個 fetch 請求。

我不確定如何實現這一點以及在哪里放置performance.now()開始和結束調用？

下面是我到目前為止工作的代碼。

registerServiceWorker function - function 運行良好，sw.js 將自己注冊為服務工作者。

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 文件- 服務工作者文件

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;
  })());
});

每個 API 的 apiTotalTime 值始終為 0，這與預期不同。

Answer 1

嘗試在await fetch(event.request)之后對performance.now進行第二次調用 - 在實際進行並等待服務調用之后。