O Service Worker é um componente necessário para o funcionamento do Web Push da Inngage.

Para instalações utilizando Cloudflare Workers, recomendamos disponibilizar o Service Worker da Inngage no caminho:

https://www.seusite.com/inn/sw.js

O uso do diretório /inn/ ajuda a manter os recursos da Inngage isolados e reduz possíveis conflitos com outros Service Workers ou funcionalidades existentes no site.

> Recomendação Inngage > > Sempre que possível, utilize /inn/sw.js para novas implementações.

Como funciona

A arquitetura da implementação será:

Navegador
      │
      ▼
https://www.seusite.com/inn/sw.js
      │
      ▼
Cloudflare
      │
      ▼
Cloudflare Worker
      │
      ▼
Service Worker da Inngage

O Cloudflare Worker funciona como uma camada intermediária: quando o navegador solicitar /inn/sw.js, ele buscará o Service Worker mantido pela Inngage e entregará seu conteúdo através do próprio domínio do cliente.

1. Identifique o domínio utilizado pelo site

Se o site funciona em:

https://www.seusite.com

o Service Worker deverá ficar disponível em:

https://www.seusite.com/inn/sw.js

Se o site funciona sem www:

https://seusite.com

o endereço será:

https://seusite.com/inn/sw.js

Utilize sempre o mesmo domínio utilizado pelos visitantes e configurado na implantação Web da Inngage.

2. Crie o Cloudflare Worker

No painel da Cloudflare, acesse:

Workers & Pages → Create

Crie um novo Worker.

Recomendamos utilizar um nome que facilite sua identificação:

inngage-service-worker

Depois de criar o Worker, abra a opção de edição do código.

3. Configure o Worker

Utilize o código abaixo:

export default {
  async fetch(request) {
    const inngageServiceWorker =
      'https://cdn.inngage.com.br/midia/js/sw/sw.js';

    try {
      const response = await fetch(inngageServiceWorker);

      if (!response.ok) {
        return new Response(
          `Unable to load Inngage Service Worker: ${response.status}`,
          {
            status: 502,
            headers: {
              'Content-Type': 'text/plain; charset=utf-8'
            }
          }
        );
      }

      return new Response(response.body, {
        status: 200,
        headers: {
          'Content-Type': 'application/javascript; charset=utf-8',
          'Cache-Control': 'no-cache, no-store, must-revalidate'
        }
      });

    } catch (error) {
      return new Response(
        'Unable to load Inngage Service Worker',
        {
          status: 502,
          headers: {
            'Content-Type': 'text/plain; charset=utf-8'
          }
        }
      );
    }
  }
};

Após adicionar o código, clique em Deploy.

4. Configure a Route

Depois de publicar o Worker, é necessário informar ao Cloudflare quais requisições devem ser processadas por ele.

No Worker criado, acesse:

Settings → Domains & Routes

Adicione uma nova Route.

Para um site utilizando www:

www.seusite.com/inn/sw.js*

Para um site sem www:

seusite.com/inn/sw.js*

Associe a Route ao Worker:

inngage-service-worker

Por que utilizar /inn/sw.js?

O caminho:

/inn/sw.js

é recomendado pela Inngage para manter a implementação isolada de outros recursos do site.

Isso é especialmente útil quando o projeto já utiliza:

  • PWA;
  • Firebase;
  • outro provedor de Web Push;
  • Service Worker próprio;
  • recursos de cache/offline;
  • outras bibliotecas que utilizem Service Workers.

Por exemplo, o site pode continuar utilizando:

/sw.js

para seu Service Worker principal, enquanto a Inngage utiliza:

/inn/sw.js

5. Teste o Service Worker

Antes de testar o Web Push, abra diretamente:

https://www.seusite.com/inn/sw.js

O navegador deverá exibir código JavaScript.

A URL deve responder com:

HTTP 200
Content-Type: application/javascript

Ela não deve retornar:

404 Not Found

nem HTML da aplicação.

6. Valide pelo DevTools

Abra:

Chrome DevTools → Application → Service Workers

Confirme que o Service Worker da Inngage está registrado utilizando:

https://www.seusite.com/inn/sw.js

e verifique se o status está como:

activated and is running

7. Validação pelo Network

No DevTools:

  1. acesse Network;
  2. recarregue o site;
  3. procure por sw.js;
  4. selecione a requisição /inn/sw.js.

Valide:

ItemResultado esperado
URLhttps://www.seusite.com/inn/sw.js
HTTP Status200
Content-Typeapplication/javascript
ConteúdoService Worker da Inngage
HTTPSSim

8. Validação pelo terminal

Também é possível testar utilizando curl:

curl -I https://www.seusite.com/inn/sw.js

O resultado esperado é semelhante a:

HTTP/2 200
content-type: application/javascript; charset=utf-8

Para validar o conteúdo:

curl https://www.seusite.com/inn/sw.js

O retorno deverá ser JavaScript.

Checklist de implantação

Antes de concluir a implementação, valide:

  • [ ] O site utiliza HTTPS.
  • [ ] O Cloudflare Worker foi criado e publicado.
  • [ ] A Route aponta para /inn/sw.js.
  • [ ] https://seudominio.com/inn/sw.js responde com HTTP 200.
  • [ ] O retorno possui Content-Type: application/javascript.
  • [ ] O conteúdo retornado é JavaScript e não HTML.
  • [ ] Não existe cache agressivo sobre /inn/sw.js.
  • [ ] A SDK da Inngage está configurada para utilizar /inn/sw.js.
  • [ ] O Service Worker aparece no DevTools.
  • [ ] O Service Worker está activated.
  • [ ] O navegador consegue solicitar permissão para notificações.
  • [ ] O usuário consegue ser registrado para Web Push na Inngage.
  • [ ] Um Web Push de teste foi recebido corretamente.

Troubleshooting rápido

Caso a implementação não funcione, siga esta ordem:

/inn/sw.js abre?
       │
  ┌────┴────┐
  │         │
 NÃO       SIM
  │         │
  ▼         ▼
Route /    HTTP 200?
Worker        │
          ┌───┴───┐
          │       │
         NÃO     SIM
          │       │
          ▼       ▼
        Worker   Content-Type
                 correto?
                    │
                ┌───┴───┐
                │       │
               NÃO     SIM
                │       │
                ▼       ▼
             Headers   Service Worker
                       registrado?
                           │
                       ┌───┴───┐
                       │       │
                      NÃO     SIM
                       │       │
                       ▼       ▼
                    Console   Testar
                             Web Push

Resultado esperado

Ao finalizar a configuração, o endereço:

https://seudominio.com/inn/sw.js

deve entregar corretamente o Service Worker da Inngage através do Cloudflare Worker.

A SDK Web da Inngage deve então ser configurada para registrar:

/inn/sw.js

como seu Service Worker.