Tengo un caso de uso con mi trabajador de servicio en el que, en ciertas ocasiones, necesito recargar la página o redirigir la página.

1. Actualmente usamos el trabajador de servicio como un interceptor para todas las búsquedas de navegación. Debido a esto, es importante recargar la página cuando se activa un trabajador de servicio. Actualmente hago esto en el evento activated como tal:

 function getClientList(): Promise<readonly WindowClient[]> { return self.clients.claim().then(() => self.clients.matchAll({ type: 'window' }) ); } self.addEventListener('activate', async (event: ExtendableEvent) => { console.log('Service Worker activated'); // we need to reload the page here so that the navigation fetch request is caught const clientList = await getClientList(); for (const client of clientList) { const url = new URL(client.url); await client.navigate(`${url.pathname}${url.search}`); } });

Esto parece estar funcionando sin ningún problema, solo me preocupa si este es el mejor enfoque.

2. La segunda condición es que necesito redirigir al usuario cuando la URL en el evento de búsqueda de navegación de un trabajador del servicio tiene un determinado parámetro de consulta.

 async function handleNavigationRequest(request: Request, workerLocation: WorkerLocation): Promise<Response> { const requestURL = new Url(request.url) const lid = requestURL.searchParams.get('lid'); const code = requestURL.searchParams.get('code'); const optin = requestURL.searchParams.get('optin'); const dpp = !!rbdsCode && !!loyaltyId && !!optin; if (dppRequest) { const clientList = await getClientList(); for (const client of clientList) { const url = new URL(`https://some-domain.com/#/getTokens?brand=${BRAND}&code=${code}&lid=${loyaltyId}&optin=${optin}&env=${DPP_SSO_ENV}`); await client.navigate(url); } } } self.addEventListener('fetch', (event) => { if (event.request.method === 'GET' && event.request.mode === 'navigate') { event.respondWith( handleNavigationRequest(event.request, self.location) ); } });

Esta segunda parte está parcialmente funcionando. Parece que la primera vez que se activa el trabajador del servicio, vuelve a cargar la página como se esperaba en el paso 1 y luego selecciona los parámetros de consulta correctos en el paso 2 y realiza la redirección.

Sin embargo, si simplemente ejecuto una solicitud con los mismos parámetros de consulta en una instancia en la que el trabajador del servicio ya se ha activado, aparece un error en mi consola que dice...

 Uncaught (in promise) TypeError: Cannot navigate to URL: https://some-domain.com/#/getTokens?brand=someBrand&code=572896&lid=7Rewards&optin=Y&env=dev