ui: move caching to the extension server code

I was being silly - there's no reason to do the caching in the service
worker, we can just do it in the extension server code directly which
completely negates the need to do any subtle workaround CORS etc.

Author: LalitMaganti

ui/src/core_plugins/dev.perfetto.ExtensionServers/extension_server.ts

@@ -38,10 +38,11 @@ import {joinPath} from './url_utils';
 
 const FETCH_TIMEOUT_MS = 10000; // 10 seconds
 
-function extensionHeaders(): Record<string, string> {
-  // TODO(lalitm): readd caching once we've figured out a more correct solution.
-  return {};
-}
+// Cache name used by the client-side extension cache. Responses are stored
+// here keyed by URL so that when the network is unreachable we can serve
+// the last-known-good data without involving the service worker or any
+// custom request headers.
+const EXT_CACHE_NAME = 'extension-servers';
 
 interface FetchRequest {
   url: string;
@@ -66,7 +67,6 @@ export function buildFetchRequest(
       const headers: Record<string, string> = {
         Accept: 'application/vnd.github.raw+json',
         Authorization: `token ${server.auth.pat}`,
-        ...extensionHeaders(),
       };
       return {url, init: {method: 'GET', headers}};
     }
@@ -76,10 +76,7 @@ export function buildFetchRequest(
     const url =
       `https://raw.githubusercontent.com/${server.repo}` +
       `/${encodeURIComponent(server.ref)}/${encodedPath}`;
-    const headers: Record<string, string> = {
-      ...extensionHeaders(),
-    };
-    return {url, init: {method: 'GET', headers}};
+    return {url, init: {method: 'GET'}};
   }
 
   // HTTPS servers — normalize URL in case https:// is missing.
@@ -88,9 +85,7 @@ export function buildFetchRequest(
     baseUrl = `https://${baseUrl}`;
   }
   const url = `${baseUrl.replace(/\/+$/, '')}/${path}`;
-  const headers: Record<string, string> = {
-    ...extensionHeaders(),
-  };
+  const headers: Record<string, string> = {};
   if (server.auth.type === 'https_basic') {
     const credentials = `${server.auth.username}:${server.auth.password}`;
     headers['Authorization'] = `Basic ${base64Encode(utf8Encode(credentials))}`;
@@ -137,6 +132,46 @@ function refreshSsoCookie(url: string): Promise<boolean> {
   });
 }
 
+// Network-first fetch with client-side Cache API fallback.
+// On success the response body is cached keyed by URL. On network failure
+// or timeout, the last-known-good cached response is returned instead.
+//
+// HTTP errors (e.g. 403, 404) are intentionally NOT served from cache:
+// they indicate a real server-side rejection and the caller needs to see
+// them (e.g. the SSO 403-retry logic in fetchJson).
+async function fetchWithCache(
+  url: string,
+  init: RequestInit,
+): Promise<Response> {
+  // Open the cache once; if the Cache API is unavailable (e.g. in tests)
+  // we fall back to plain fetch with no caching.
+  let cache: Cache | undefined;
+  try {
+    cache = await caches.open(EXT_CACHE_NAME);
+  } catch {
+    // Cache API unavailable — proceed without caching.
+  }
+
+  try {
+    const response = await fetchWithTimeout(url, init, FETCH_TIMEOUT_MS);
+    if (response.ok) {
+      // Cache successful responses for offline use.
+      await cache?.put(url, response.clone());
+    } else {
+      // Invalidate on HTTP errors (e.g. 403 revoked access, 404 deleted
+      // resource). The caller still sees the error so it can react
+      // (e.g. SSO 403-retry in fetchJson).
+      await cache?.delete(url);
+    }
+    return response;
+  } catch (networkErr) {
+    // Network or timeout error — serve from cache if available.
+    const cached = await cache?.match(url);
+    if (cached) return cached;
+    throw networkErr;
+  }
+}
+
 async function fetchJson<T extends z.ZodTypeAny>(
   server: UserInput,
   path: string,
@@ -145,7 +180,7 @@ async function fetchJson<T extends z.ZodTypeAny>(
   const req = buildFetchRequest(server, path);
   let response: Response;
   try {
-    response = await fetchWithTimeout(req.url, req.init, FETCH_TIMEOUT_MS);
+    response = await fetchWithCache(req.url, req.init);
   } catch (e) {
     return errResult(`Failed to fetch ${req.url}: ${e}`);
   }
@@ -164,7 +199,7 @@ async function fetchJson<T extends z.ZodTypeAny>(
     const refreshed = await refreshSsoCookie(baseUrl.replace(/\/+$/, ''));
     if (refreshed) {
       try {
-        response = await fetchWithTimeout(req.url, req.init, FETCH_TIMEOUT_MS);
+        response = await fetchWithCache(req.url, req.init);
       } catch (e) {
         return errResult(`Failed to fetch ${req.url} after SSO refresh: ${e}`);
       }

ui/src/service_worker/service_worker.ts

@@ -45,17 +45,12 @@ export {};
 
 const LOG_TAG = `ServiceWorker: `;
 const CACHE_NAME = 'ui-perfetto-dev';
-const EXT_CACHE_NAME = 'extension-servers';
-const EXTENSION_HEADER = 'X-Perfetto-Extension';
 const OPEN_TRACE_PREFIX = '/_open_trace'
 
 // If the fetch() for the / doesn't respond within 3s, return a cached version.
 // This is to avoid that a user waits too much if on a flaky network.
 const INDEX_TIMEOUT_MS = 3000;
 
-// Timeout for extension server fetches.
-const EXT_FETCH_TIMEOUT_MS = 10000;
-
 // Use more relaxed timeouts when caching the subresources for the new version
 // in the background.
 const INSTALL_TIMEOUT_MS = 30000;
@@ -216,12 +211,6 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
-  // Extension server requests: bypass normal handling, cache responses.
-  if (event.request.headers.get(EXTENSION_HEADER)) {
-    event.respondWith(handleExtensionRequest(event.request));
-    return;
-  }
-
   // The early return here will cause the browser to fall back on standard
   // network-based fetch.
   if (!shouldHandleHttpRequest(event.request)) {
@@ -248,53 +237,6 @@ function shouldHandleHttpRequest(req: Request): boolean {
   return req.method === 'GET' && url.origin === self.location.origin;
 }
 
-// Handles extension server requests marked with X-Perfetto-Extension.
-// Strips the marker header, fetches with network-first strategy, and caches
-// successful responses. On network failure, serves from cache.
-async function handleExtensionRequest(req: Request): Promise<Response> {
-  // Strip marker header before forwarding to the network.
-  const headers = new Headers(req.headers);
-  headers.delete(EXTENSION_HEADER);
-  const cleanReq = new Request(req.url, {
-    method: req.method,
-    headers,
-    mode: req.mode,
-    credentials: req.credentials,
-  });
-
-  try {
-    const response = await fetchWithTimeout(cleanReq, EXT_FETCH_TIMEOUT_MS);
-    // fetchWithTimeout only resolves for ok responses — cache it.
-    try {
-      const cache = await caches.open(EXT_CACHE_NAME);
-      await cache.put(req.url, response.clone());
-    } catch {
-      // Cache write failure is non-fatal.
-    }
-    return response;
-  } catch (e) {
-    // NetworkError or TimeoutError — serve from cache.
-    // HTTP errors (403, 404) are plain Error — return directly.
-    if (!(e instanceof NetworkError) && !(e instanceof TimeoutError)) {
-      return new Response(String(e), {status: 502, statusText: 'Bad Gateway'});
-    }
-    try {
-      const cache = await caches.open(EXT_CACHE_NAME);
-      const cached = await cache.match(req.url);
-      if (cached) {
-        console.info(LOG_TAG + `serving ${req.url} from extension cache`);
-        return cached;
-      }
-    } catch {
-      // Cache read failure.
-    }
-    return new Response('Extension server unreachable and no cached data', {
-      status: 503,
-      statusText: 'Service Unavailable',
-    });
-  }
-}
-
 async function handleHttpRequest(req: Request): Promise<Response> {
   if (!shouldHandleHttpRequest(req)) {
     throw new Error(LOG_TAG + `${req.url} shouldn't have been handled`);