{"id":5024,"date":"2025-11-27T13:19:21","date_gmt":"2025-11-27T16:19:21","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=5024"},"modified":"2025-11-27T13:19:22","modified_gmt":"2025-11-27T16:19:22","slug":"notificacoes-push","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/notificacoes-push\/","title":{"rendered":"Notifica\u00e7\u00f5es Push em PWA"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

As Notifica\u00e7\u00f5es Push<\/strong> s\u00e3o o recurso final que permite que um Progressive Web App (PWA)<\/strong> transcenda a experi\u00eancia de navega\u00e7\u00e3o e se integre ao sistema operacional. Elas possibilitam que seu PWA receba mensagens em tempo real<\/strong> e alerta o usu\u00e1rio<\/strong> sobre novos conte\u00fados ou eventos, mesmo quando o aplicativo est\u00e1 fechado ou o navegador n\u00e3o est\u00e1 ativo.<\/p>\n\n\n\n

Esta funcionalidade \u00e9 totalmente habilitada pelo Service Worker (SW)<\/strong>.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. \u2699\ufe0f Arquitetura das Notifica\u00e7\u00f5es Push<\/h2>\n\n\n\n

O sistema de Notifica\u00e7\u00f5es Push envolve quatro componentes principais que trabalham em conjunto:<\/p>\n\n\n\n

    \n
  1. A PWA (Cliente):<\/strong> O c\u00f3digo JavaScript que solicita permiss\u00e3o e gera a chave de assinatura.<\/li>\n\n\n\n
  2. Service Worker (SW):<\/strong> O ouvinte em segundo plano que intercepta a mensagem push<\/strong> e a exibe como uma notifica\u00e7\u00e3o.<\/li>\n\n\n\n
  3. Servi\u00e7o Push:<\/strong> O servidor de mensagens do navegador (ex: FCM do Google, APNs da Apple), que recebe a mensagem do seu servidor e a entrega ao dispositivo.<\/li>\n\n\n\n
  4. Servidor da Aplica\u00e7\u00e3o:<\/strong> O seu backend<\/em> (API) que armazena a chave de assinatura do usu\u00e1rio e envia a mensagem de notifica\u00e7\u00e3o para o Servi\u00e7o Push.<\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n

    2. \ud83d\udd11 Habilitando Notifica\u00e7\u00f5es: Inscri\u00e7\u00e3o e Permiss\u00e3o<\/h2>\n\n\n\n

    O processo de envio de uma notifica\u00e7\u00e3o come\u00e7a com a inscri\u00e7\u00e3o do usu\u00e1rio e a solicita\u00e7\u00e3o de permiss\u00e3o.<\/p>\n\n\n\n

    <\/div>\n\n\n\n

    A. Solicitando Permiss\u00e3o<\/h3>\n\n\n\n

    O acesso \u00e0 API de Notifica\u00e7\u00f5es Push requer a permiss\u00e3o expl\u00edcita do usu\u00e1rio. Esta solicita\u00e7\u00e3o deve ser feita de forma contextualizada<\/strong> (ap\u00f3s o usu\u00e1rio demonstrar interesse).<\/p>\n\n\n\n

    JavaScript<\/p>\n\n\n\n

    \/\/ Frontend JavaScript (no lado da aplica\u00e7\u00e3o)\nfunction subscribeUser() {\n  if ('Notification' in window) {\n    Notification.requestPermission().then(permission => {\n      if (permission === 'granted') {\n        \/\/ Prossegue para a inscri\u00e7\u00e3o\n        subscribeToPushService(); \n      } else {\n        console.log('Permiss\u00e3o de notifica\u00e7\u00e3o negada.');\n      }\n    });\n  }\n}\n<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    B. Inscri\u00e7\u00e3o e Chave VAPID<\/h3>\n\n\n\n
    Ap\u00f3s a permiss\u00e3o ser concedida, o PWA usa o Service Worker para se inscrever no Servi\u00e7o Push<\/strong> do navegador, gerando um objeto PushSubscription<\/code><\/strong>.<\/p>\n\n\n\n
    Este objeto cont\u00e9m o endpoint<\/strong> (o endere\u00e7o \u00fanico do Servi\u00e7o Push) e a chave p\u00fablica de criptografia, essenciais para enviar a mensagem.<\/p>\n\n\n\n
    JavaScript<\/p>\n\n\n\n
    \/\/ O Service Worker \u00e9 a base para a inscri\u00e7\u00e3o\nfunction subscribeToPushService() {\n  navigator.serviceWorker.ready.then(registration => {\n    \/\/ Chave VAPID p\u00fablica (necess\u00e1ria para autentica\u00e7\u00e3o)\n    const applicationServerKey = urlBase64ToUint8Array('SUA_CHAVE_VAPID_PUBLICA'); \n\n    registration.pushManager.subscribe({\n      userVisibleOnly: true, \/\/ Requisito: a notifica\u00e7\u00e3o deve ser vis\u00edvel\n      applicationServerKey: applicationServerKey\n    })\n    .then(subscription => {\n      \/\/ 1. Envie este objeto 'subscription' (endpoint e keys) para o seu servidor\n      sendSubscriptionToServer(subscription); \n      console.log('Usu\u00e1rio inscrito com sucesso:', subscription);\n    });\n  });\n}\n<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    3. \ud83d\udee1\ufe0f Interceptando e Exibindo a Notifica\u00e7\u00e3o<\/h2>\n\n\n\n
    O Service Worker<\/strong> \u00e9 o \u00fanico componente que pode interceptar o evento push do servidor, mesmo quando o PWA est\u00e1 fechado.<\/p>\n\n\n\n
    <\/div>\n\n\n\n
    A. O Evento push<\/code> (No Service Worker)<\/h3>\n\n\n\n
    O SW ouve o evento push<\/code>. Quando a mensagem do servidor chega:<\/p>\n\n\n\n
    JavaScript<\/p>\n\n\n\n
    \/\/ service-worker.js\nself.addEventListener('push', (event) => {\n  \/\/ O payload da mensagem push (dados do seu servidor)\n  const data = event.data.json(); \n  \n  const title = data.title || 'Nova Mensagem';\n  const options = {\n    body: data.body || 'Voc\u00ea tem uma atualiza\u00e7\u00e3o.',\n    icon: '\/icons\/icon-192x192.png', \/\/ \u00cdcone exibido na notifica\u00e7\u00e3o\n    badge: '\/icons\/badge.png', \/\/ \u00cdcone exibido na barra de status (Android)\n    data: { url: data.url } \/\/ Dados adicionais para usar no clique\n  };\n\n  \/\/ Exibe a notifica\u00e7\u00e3o na tela do usu\u00e1rio\n  event.waitUntil(self.registration.showNotification(title, options));\n});\n<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    B. O Evento notificationclick<\/code> (No Service Worker)<\/h3>\n\n\n\n
    Quando o usu\u00e1rio clica na notifica\u00e7\u00e3o, o SW intercepta o evento e pode executar a\u00e7\u00f5es, como abrir o PWA em uma URL espec\u00edfica.<\/p>\n\n\n\n
    JavaScript<\/p>\n\n\n\n
    \/\/ service-worker.js\nself.addEventListener('notificationclick', (event) => {\n  event.notification.close(); \/\/ Fecha a notifica\u00e7\u00e3o\n\n  \/\/ Recupera a URL de destino\n  const targetUrl = event.notification.data.url || '\/'; \n\n  event.waitUntil(\n    \/\/ Abre ou foca a janela do PWA na URL de destino\n    clients.openWindow(targetUrl) \n  );\n});\n<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    4. \ud83d\ude80 Enviando a Mensagem (Lado do Servidor)<\/h2>\n\n\n\n
    O servidor da sua aplica\u00e7\u00e3o \u00e9 respons\u00e1vel por:<\/p>\n\n\n\n
      \n
    1. Armazenar as chaves de inscri\u00e7\u00e3o (PushSubscription<\/code>) de todos os usu\u00e1rios.<\/li>\n\n\n\n
    2. Usar uma biblioteca (como web-push<\/strong> em Node.js) para enviar a mensagem (o payload<\/em>) para o Servi\u00e7o Push (usando o endpoint<\/em> e as chaves de criptografia).<\/li>\n\n\n\n
    3. A mensagem deve ser enviada com autentica\u00e7\u00e3o VAPID<\/strong> (Voluntary Application Server Identification), garantindo que apenas seu servidor possa enviar mensagens ao seu PWA.<\/li>\n<\/ol>\n\n\n\n
      <\/div>\n\n\n\n
      5. \ud83c\udf4f Considera\u00e7\u00f5es Espec\u00edficas do iOS\/Safari<\/h2>\n\n\n\n
      Historicamente, o suporte para Notifica\u00e7\u00f5es Push em PWAs instaladas no iOS era limitado.<\/p>\n\n\n\n