Instalación de Service Worker en subdirectorios.

Cómo instalar Service Worker en un subdirectorio de su sitio web
Escrito por Inngage
Actualizado hace 1 semana

Si no puede (o no desea) alojar el archivo Service Worker en la raíz de su dominio, también puede configurarlo en un subdirectorio, siempre y cuando cumpla con algunos requisitos específicos del navegador.

Prerrequisitos:

Antes de comenzar, asegúrese de que:

• Su sitio sirve contenido a través de HTTPS

• Tienes acceso a la ubicación donde se alojará el archivo (por ejemplo, a través de FTP, CMS o backend)

• Puede configurar encabezados HTTP personalizados

🛠️ Configuración paso a paso

1. Descargar Service Worker

Descargue el archivo sw.js que se utilizará:

2. Aloje el archivo en el subdirectorio deseado

Coloque el archivo en un subdirectorio de su dominio, por ejemplo:

https://www.seudominio.com.br/notificacoes/sw.js

3. Establezca el encabezado Service-Worker-Allowed

De forma predeterminada, un Service Worker solo puede manejar páginas dentro de la misma ruta o debajo de la URL donde está alojado.

Si desea que tenga permiso para controlar todo el sitio (incluida la raíz), deberá agregar el siguiente encabezado HTTP:

Service-Worker-Allowed: /

Este encabezado debe incluirse en la respuesta HTTP del archivo pushnews-sw.js.

⚙️ Ejemplo práctico (en PHP)

Si su sitio web utiliza PHP, puede hacerlo simplemente con el siguiente código:

<?php
header("Service-Worker-Allowed: /");
header("Content-Type: application/javascript");
echo "importScripts('https://cdn.pn.vg/push/pushnews-sw.js');";

Este código actúa como proxy: agrega el encabezado necesario y carga el contenido real del Service Worker desde el CDN de Inngage.

🔍 Comprobación final

Para confirmar que todo está configurado correctamente:

  1.  Acceda a la URL de su Service Worker en el navegador (por ejemplo, https://www.yourdomain.com.br/notifications/sw.js)
  2.  Verifique, a través de DevTools (pestaña Red > Encabezados), si el encabezado Service-Worker-Allowed: / está presente
  3. Asegúrate de que el contenido se esté cargando correctamente

Bloque de prueba en el navegador (DevTools)

Después de cargar el archivo, siga los pasos a continuación para verificar que el encabezado sea correcto:

  1. Abra su sitio web en Chrome
  2. Presione F12 para abrir DevTools
  3.  Vaya a la pestaña Red
  4.  Recargue la página
  5. En el filtro de búsqueda, escriba pushnews-sw
  6. Haga clic en el archivo encontrado y vaya a la pestaña Encabezados.
  7. Verifique que el encabezado Service-Worker-Allowed aparezca con el valor /
¿Pudimos contestar tu pregunta?