Estoy implementando un Service Worker con una aplicación React. Estoy usando Service Worker para agregar un encabezado de Autorización a cada solicitud de fetch que proviene de la ventana controlada (llamadas API, así como imágenes y otros activos). La aplicación React obtiene un token de un proveedor de identidad (Keycloak) y luego lo envía al proveedor de servicios. Aquí hay un flujo simplificado:

1. La aplicación React se carga
2. La aplicación React carga el Service Worker usando un archivo Javascript en el mismo host.
3. La aplicación React registra al Service Worker usando

 navigator?.serviceWorker?.register('/myServiceWorker.js', { scope: '/' }).then(() => { navigator.serviceWorker.controller?.postMessage({ type: 'MY_TOKEN' }); }

Lo interesante es que esto funciona bien en la primera carga, pero cuando abro otra pestaña y ejecuto la misma aplicación, no funciona. No puedo acceder a navigator.serviceWorker.controller y usar el método postMessage , porque navigator.serviceWorker.controller no está undefined .

Creo que esto se debe a que solo hay una copia de Service Worker, pero 2 copias de la aplicación React en ejecución. Cuando se abre la segunda pestaña, se ejecuta el script React, carga el Service Worker, pero el navegador ve que la nueva pestaña está dentro del alcance del Service Worker, por lo que no vuelve a ejecutar la inicialización del Service Worker. Sin embargo, esto parece evitar que Service Worker reclame la nueva ventana o algo que impida que Service Worker registre la nueva ventana con un controlador. ¿O es solo una condición de carrera de algún tipo?

EDITAR: Además, y algo extraño, si actualizo la segunda pestaña, funcionará cada dos veces . Esto parece ser confiable.