Instalando o Service Worker em Subdiretórios

Como instalar o Service Worker em um subdiretório do seu site
Written by Inngage
Updated 2 weeks ago

Se você não pode (ou não quer) hospedar o arquivo do Service Worker na raiz do domínio, também é possível configurá-lo em um subdiretório — desde que siga alguns requisitos específicos do navegador.

Pré-requisitos

Antes de começar, certifique-se de que:

Seu site está servindo conteúdo via HTTPS

Você tem acesso ao local onde o arquivo será hospedado (ex: via FTP, CMS ou backend)

Pode configurar headers HTTP personalizados

🛠️ Passo a passo para configuração

1. Faça o download do Service Worker

Baixe o arquivo sw.js que será utilizado:

2. Hospede o arquivo no subdiretório desejado

Coloque o arquivo em um subdiretório do seu domínio, por exemplo:

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

3. Configure o cabeçalho Service-Worker-Allowed

Por padrão, um Service Worker só pode controlar páginas dentro do mesmo caminho ou abaixo da URL onde ele está hospedado.

Se quiser que ele tenha permissão para controlar o site inteiro (inclusive a raiz), será necessário adicionar o seguinte cabeçalho HTTP:

Service-Worker-Allowed: /

Esse cabeçalho precisa ser incluído na resposta HTTP do arquivo pushnews-sw.js.

⚙️ Exemplo prático (em PHP)

Se o seu site utiliza PHP, você pode fazer isso de forma simples com o seguinte código:

<?php
header("Service-Worker-Allowed: /");
header("Content-Type: application/javascript");
echo "importScripts('https://cdn.pn.vg/push/pushnews-sw.js');";
Esse código serve como um proxy: ele adiciona o cabeçalho necessário e carrega o conteúdo real do Service Worker a partir da CDN da Inngage.

🔍 Verificação final

Para confirmar que tudo está configurado corretamente:

1. Acesse a URL do seu Service Worker no navegador (ex: https://www.seudominio.com.br/notificacoes/sw.js)

2. Verifique, via DevTools (aba Network > Headers), se o cabeçalho Service-Worker-Allowed: / está presente

3. Certifique-se de que o conteúdo está sendo carregado corretamente

🧪 Bloco de teste no navegador (DevTools)

Depois de subir o arquivo, siga os passos abaixo para verificar se o cabeçalho está correto:

1. Abra seu site no Chrome

2. Pressione F12 para abrir o DevTools

3. Vá até a aba Network

4. Recarregue a página

5. No filtro de busca, digite pushnews-sw

6. Clique no arquivo encontrado e vá até a aba Headers

7. Verifique se o cabeçalho Service-Worker-Allowed aparece com valor /

Did this answer your question?