Instalación de Service Worker en subdirectorios.

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

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?