Visão Geral:

Este guia ensina, passo a passo, como integrar as funções da Inngage no serviceWorkerMerged.js da VTEX IO, adicionando as bibliotecas de Push e Headers via importScripts() de forma segura, performática e idempotente.

Para quem é este guia: desenvolvedores(as) e agências parceiras responsáveis por sites que rodam no ambiente VTEX IO e precisam habilitar Web Push com a Inngage sem conflitar com o SW padrão da VTEX.

Siga cada etapa rigorosamente para garantir o correto funcionamento da integração.

1) Configuração no `manifest.json`

No arquivo manifest.json do seu projeto, adicione o builder "service-worker" dentro da seção "builders":

"service-worker": "0.x"

Importante: Esse passo garante que o ambiente VTEX saiba como lidar com os arquivos do Service Worker.

2) Estrutura de Pastas

Dentro da pasta principal theme, crie uma nova pasta chamada service-workers.

As nomenclaturas devem estar exatamente iguais às descritas abaixo, pois nomes incorretos impedem que os arquivos sejam concatenados corretamente.

A estrutura final deve ser:

theme/
  └── service-workers/
        ├── header.js
        └── push.js

Faça download dos arquivos clicando nos links abaixo:

header.js

push.js

3) Arquivos a criar/alterar no app VTEX

Dentro da pasta service-workers, crie obrigatoriamente os dois arquivos a seguir:

• push.js → Arquivo responsável pela lógica de push notifications.

• header.js → Arquivo responsável por carregar o Service Worker corretamente.

Dica: Verifique se os arquivos estão salvos no formato UTF-8 e sem caracteres adicionais.

4) Testando a Instalação

Após configurar os arquivos, rode o seguinte comando no terminal:

vtex link

Se a instalação estiver correta, o console exibirá a mensagem:

[Inngage] header carregado ✔

✅ Conclusão

Parabéns! Seu Service Worker foi configurado com sucesso no ambiente da VTEX.

Agora você já pode prosseguir com as integrações avançadas da Inngage para notificações e demais funcionalidades.