review comments

web/src/lib/utils/sw-messaging.ts

@@ -1,15 +1,12 @@
 import { ServiceWorkerMessenger } from './sw-messenger';
 
-const messenger = new ServiceWorkerMessenger();
 const hasServiceWorker = globalThis.isSecureContext && 'serviceWorker' in navigator;
-
-const isValidSwContext = (url: string | undefined | null): url is string => {
-  return hasServiceWorker && !!url;
-};
+// eslint-disable-next-line compat/compat
+const messenger = hasServiceWorker ? new ServiceWorkerMessenger(navigator.serviceWorker) : undefined;
 
 export function cancelImageUrl(url: string | undefined | null) {
-  if (!isValidSwContext(url)) {
+  if (!url || !messenger) {
     return;
   }
-  void messenger.send('cancel', { url });
+  messenger.send('cancel', { url });
 }

web/src/lib/utils/sw-messenger.ts

@@ -1,22 +1,17 @@
 export class ServiceWorkerMessenger {
-  constructor() {}
+  readonly #serviceWorker: ServiceWorkerContainer;
 
-  #sendInternal(type: string, data: Record<string, unknown>) {
-    if (!('serviceWorker' in navigator)) {
-      throw new Error('Service Worker not enabled in this environment ');
-    }
-
-    // eslint-disable-next-line compat/compat
-    navigator.serviceWorker.controller?.postMessage({
-      type,
-      ...data,
-    });
+  constructor(serviceWorker: ServiceWorkerContainer) {
+    this.#serviceWorker = serviceWorker;
   }
 
   /**
    * Send a one-way message to the service worker.
    */
   send(type: string, data: Record<string, unknown>) {
-    return this.#sendInternal(type, data);
+    this.#serviceWorker.controller?.postMessage({
+      type,
+      ...data,
+    });
   }
 }

web/src/service-worker/request.ts

@@ -29,6 +29,7 @@ export const handleFetch = (request: URL | Request): Promise<Response> => {
   const pendingRequest: PendingRequest = {
     controller: new AbortController(),
     promise: undefined as unknown as Promise<Response>,
+    cleanupTimeout: undefined,
   };
   pendingRequests.set(requestKey, pendingRequest);