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/messaging.ts

@@ -7,32 +7,12 @@ import { handleCancel } from './request';
 
 const sw = globalThis as unknown as ServiceWorkerGlobalScope;
 
-/**
- * Send acknowledgment for a request
- */
-function sendAck(client: Client, requestId: string) {
-  client.postMessage({
-    type: 'ack',
-    requestId,
-  });
-}
-
-/**
- * Handle 'cancel' request: cancel a pending request
- */
-const handleCancelRequest = (client: Client, url: URL, requestId: string) => {
-  sendAck(client, requestId);
-  handleCancel(url);
-};
-
 export const installMessageListener = () => {
   sw.addEventListener('message', (event) => {
-    if (!event.data?.requestId || !event.data?.type) {
+    if (!event.data?.type) {
       return;
     }
 
-    const requestId = event.data.requestId;
-
     switch (event.data.type) {
       case 'cancel': {
         const url = event.data.url ? new URL(event.data.url, self.location.origin) : undefined;
@@ -45,7 +25,7 @@ export const installMessageListener = () => {
           return;
         }
 
-        handleCancelRequest(client, url, requestId);
+        handleCancel(url);
         break;
       }
     }

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