Passo 1 — Gerar o arquivo na plataforma Inngage

1. Acesse Plataformas → Web Push → Instalação do SW.js.
   
2. Preencha os campos com os valores recomendados abaixo:
   

3. Clique em Download. Você receberá o arquivo sw.js.

Por que esses valores: o service worker fica isolado na pasta /inngage/ do seu domínio. O escopo /inngage/ garante que ele nunca dispute controle da loja com outros service workers (Partytown, PWA, outros fornecedores). Notificações push não precisam de controle sobre as páginas — precisam apenas de um registro válido, e esse isolamento é o que evita conflitos e notificações duplicadas.

O arquivo final ficará acessível em: https://www.sualoja.com.br/inngage/sw.js

Não altere o conteúdo do arquivo. Ele contém apenas uma importação do código mantido pela Inngage, o que permite atualizações sem novo deploy da sua parte.

Passo 2 — Adicionar o arquivo ao projeto FastStore

O FastStore é baseado em Next.js. Tudo que está na pasta public do projeto é servido a partir da raiz do domínio.

1. No repositório da loja, localize a pasta public na raiz do projeto FastStore.
   • Em projetos monorepo, ela fica dentro do pacote da loja (por exemplo, packages/store/public).
2. Crie a subpasta inngage.
3. Copie o arquivo baixado para public/inngage/sw.js.

Estrutura resultante:

public/ 

└── inngage/ 

              └── sw.js

4. Faça o commit e abra um Pull Request:

git checkout -b feat/inngage-service-worker
git add public/inngage/sw.js
git commit -m "feat: adiciona service worker da Inngage em escopo dedicado"
git push origin feat/inngage-service-worker

Apenas arquivos presentes em public no momento do build são publicados. Não existe forma de subir esse arquivo pelo painel VTEX ou pelo Headless CMS — é obrigatório passar pelo repositório.

Passo 3 — Publicar

1. Aguarde o build do FastStore WebOps no Pull Request.
2. Abra a URL de preview gerada pelo WebOps e valide conforme o Passo 4.
3. Aprove e faça o merge do PR. O WebOps publica automaticamente em produção.

Nenhuma alteração adicional é necessária: a tag inngage.js detecta o arquivo e realiza o registro do service worker sozinha.

Passo 4 — Validar a instalação

4.1 O arquivo está acessível

Abra no navegador: https://www.sualoja.com.br/inngage/sw.js

Resultado esperado: status 200 e conteúdo JavaScript (uma linha com importScripts). Se aparecer uma página HTML ou erro 404, o arquivo não foi publicado no caminho correto.

4.2 O service worker está registrado

1. Abra a loja no Chrome e pressione F12.
2. Vá em Application → Service Workers.
3. Localize a entrada com origem /inngage/sw.js. O status deve ser activated and is running.

Outros service workers (como /~partytown/partytown-sw.js) podem aparecer na lista normalmente — isso é esperado.

4.3 A assinatura está no service worker correto

No console do navegador (F12 → Console), execute:

navigator.serviceWorker.getRegistrations().then(rs => rs.forEach(async r =>
  console.log(r.scope, r.active?.scriptURL, !!(await r.pushManager.getSubscription()))
));

Resultado esperado após aceitar as notificações:

https://www.sualoja.com.br/inngage/      .../inngage/sw.js      true
https://www.sualoja.com.br/~partytown/   .../partytown-sw.js    false

A linha /inngage/ deve ser a única com true.

4.4 Teste ponta a ponta

1. Em uma janela anônima, acesse a loja, aceite o pré-permission da Inngage e depois a permissão do navegador.
2. Na plataforma Inngage, envie uma notificação de teste para o seu dispositivo.
3. A notificação deve aparecer na tela mesmo com a aba fechada.

Problemas comuns

Resumo da instalação

Ao final do processo, sua loja terá:

• O arquivo sw.js da Inngage publicado em https://www.sualoja.com.br/inngage/sw.js
• Um service worker registrado no escopo /inngage/, isolado do Partytown e de qualquer outro service worker da loja
• Assinaturas de web push criadas exclusivamente nesse service worker, o que garante entrega correta e sem notificações duplicadas

A partir daí, a Inngage cuida do restante: atualizações no código do service worker são publicadas pelo nosso CDN e chegam à loja sem novo deploy do seu lado. Você só precisa voltar a esse guia se mudar a estrutura do projeto FastStore ou migrar de plataforma.

Checklist final

•  Arquivo gerado na plataforma com caminho /inngage/, nome sw.js e escopo /inngage/
•  Arquivo commitado em public/inngage/sw.js e PR aprovado
•  https://www.sualoja.com.br/inngage/sw.js retorna 200 com conteúdo JavaScript
•  Service worker /inngage/sw.js aparece como ativo em DevTools → Application
•  Script do item 4.3 mostra true apenas na linha /inngage/
•  Notificação de teste recebida com a aba fechada

Suporte

Se algum item do checklist não passar, abra um chamado com o suporte da Inngage enviando:

1. A URL da loja
2. O resultado do script do item 4.3 (print ou texto do console)
3. O print da aba Application → Service Workers do DevTools

Com essas três informações conseguimos identificar a causa na primeira resposta, sem idas e vindas.