no-translate

Como importar o script da Inngage via serviceWorkerMerged.js na VTEX IO

Aprenda como integrar o script de notificações push da Inngage no seu e-commerce VTEX IO utilizando o arquivo serviceWorkerMerged.js, evitando conflitos e garantindo o funcionamento correto.
Escrito por Inngage
Actualizado hace 2 semanas

Se você utiliza a VTEX IO e quer ativar as notificações push da Inngage no seu e-commerce, este guia mostra como realizar a integração através do arquivo serviceWorkerMerged.js, utilizado pela própria VTEX para estender funcionalidades no Service Worker.

✅ Pré-requisitos

Antes de começar, verifique se você já tem:

Acesso ao repositório do seu projeto VTEX IO;

Permissões para editar o service-worker do seu workspace;

O token da Inngage fornecido pela nossa equipe.

1. Acesse o repositório VTEX IO do seu projeto

Entre no repositório do seu projeto VTEX IO e localize o diretório:

/service-worker

2. Remova o handler de push duplicado (se existir)

self.addEventListener('push', function(event) {
  console.log('[service-worker] Entering push handler')
  if (!event.data) return

  let data
  try {
    data = event.data.json()
  } catch (err) {
    console.error('Error occurred when trying to decode push event', err)
    return
  } 

  const promiseChain = self.registration.showNotification(data.title || '', {
    body: data.message,
  })
})
⚠️ Importante: Remova esse trecho para evitar conflito com o script da Inngage.
Ele pode causar notificações duplicadas ou impedir o correto funcionamento do sistema de Push da Inngage.

3. Importe o script da Inngage no final do serviceWorkerMerged.js

Adicione a seguinte linha ao final do arquivo:

importScripts('https://api.inngage.com.br/v1/webpush/js/sw.js');

importScripts('https://api.inngage.com.br/v1/webpush/js/handleNotificationInngage.js');
✅ Essa importação carrega o Service Worker da Inngage com todas as funcionalidades necessárias para notificações push e tracking.

4. Salve e publique as alterações

Utilize os comandos do VTEX Toolbelt para subir as modificações:

vtex login <sua-conta>
vtex use <seu-workspace>
vtex deploy
vtex publish

Verificando se está funcionando

1. Acesse seu site no ambiente de produção.

2. Pressione F12 e vá até a aba ApplicationService Workers.

3. Verifique se o sw.js da Inngage está sendo carregado corretamente.

4. Acesse o painel da Inngage e verifique se o novo dispositivo foi registrado com sucesso.

❓ FAQ

Posso usar esse mesmo script em mais de um workspace da VTEX?

Sim. Recomendamos que você aplique o script nos workspaces de homologação e, posteriormente, na master.

Preciso me preocupar com conflitos com o Service Worker da VTEX?

Não, desde que você remova qualquer handler de push duplicado no serviceWorkerMerged.js, como descrito acima.

O script da Inngage interfere nas funcionalidades de cache da VTEX?

Não. Ele atua apenas na camada de notificações push e tracking.

¿Pudimos contestar tu pregunta?