Notificações push
Pedir permissão, subscrever notificações push com a Push API, receber mensagens no Service Worker e apresentar notificações com showNotification.
Notificações push é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Por que usar notificações instantâneas?
Notificações instantâneas fazem os usuários voltarem quando o aplicativo não está aberto — alertas de mensagens, atualizações de notícias e lembretes de carrinhos abandonados. Elas são fornecidas pelo worker de serviço, por isso funcionam mesmo quando a página está fechada.
A API de envio + API de notificações
Duas APIs do navegador trabalham em conjunto. A API de envio recebe mensagens de um servidor por meio de uma inscrição de envio. A API de notificações exibe a mensagem ao usuário.
Solicitar permission
Peça permission ao usuário antes de fazer a inscrição — faça isso somente em resposta a uma ação clara do usuário (clique em um botão), não ao carregar a página.
async function enableNotifications() {
const permission = await Notification.requestPermission();
if (permission !== 'granted') {
alert('Notifications denied');
return;
}
// proceed to subscribe...
}Inscrição para envio
Faça a inscrição por meio do registro ativo do worker de serviço. A chave pública VAPID do servidor autentica a inscrição.
async function subscribeToPush() {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true, // required: every push must show a notification
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});
// Send sub to your server:
await fetch('/api/save-subscription', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(sub)
});
}Chaves VAPID
As chaves VAPID (identificação voluntária do servidor de aplicativos) identificam seu servidor perante os serviços de envio (FCM, Mozilla etc.). Gere-as uma vez e armazene a chave privada no seu servidor.
# Generate VAPID keys with web-push CLI:
npx web-push generate-vapid-keys
# Output:
# Public Key: BJ...
# Private Key: ka...Envio pelo servidor
Use a biblioteca npm web-push para enviar uma notificação a uma inscrição armazenada.
import webpush from 'web-push';
webpush.setVapidDetails(
'mailto:you@example.com',
process.env.VAPID_PUBLIC,
process.env.VAPID_PRIVATE
);
await webpush.sendNotification(savedSubscription, JSON.stringify({
title: 'New message',
body: 'Alice sent you a message',
url: '/inbox/123'
}));Processar envios no worker de serviço
O SW recebe o evento de envio e exibe uma notificação.
// sw.js
self.addEventListener('push', (event) => {
const data = event.data ? event.data.json() : {};
event.waitUntil(
self.registration.showNotification(data.title || 'Notification', {
body: data.body,
icon: '/icons/192.png',
badge: '/icons/badge.png',
data: { url: data.url }
})
);
});Manipulador de cliques em notificações
Abra o aplicativo ou coloque-o em foco quando o usuário clicar em uma notificação.
self.addEventListener('notificationclick', (event) => {
event.notification.close();
const url = event.notification.data.url || '/';
event.waitUntil(
clients.matchAll({ type: 'window' }).then(clientList => {
for (const client of clientList) {
if (client.url.endsWith(url) && 'focus' in client) return client.focus();
}
return clients.openWindow(url);
})
);
});Opções de notificação
Personalize: ícone, emblema (ícone pequeno na área de notificações), imagem (grande), ações (botões), etiqueta (substitui notificações mais antigas com a mesma etiqueta), requireInteraction (permanece até ser dispensada) e silenciosa.
self.registration.showNotification('Message', {
body: 'Alice sent you a photo',
icon: '/icons/192.png',
image: '/images/alice-photo.jpg',
actions: [
{ action: 'view', title: 'View' },
{ action: 'reply', title: 'Reply' }
],
tag: 'message-from-alice', // replaces earlier 'message-from-alice'
requireInteraction: false
});Cancelar a inscrição
Permita que os usuários optem por sair — chame pushSubscription.unsubscribe() e remova a inscrição do seu servidor.
async function disablePush() {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.getSubscription();
if (sub) {
await sub.unsubscribe();
await fetch('/api/delete-subscription', {
method: 'POST',
body: JSON.stringify({ endpoint: sub.endpoint })
});
}
}Suporte no iOS
O iOS 16.4 ou posterior oferece suporte ao envio pela web, mas somente para PWAs instaladas na tela inicial. Dispositivos anteriores ao iOS 16.4 e o Safari no iPhone não oferecem suporte algum ao envio pela web.
Boas práticas
1) Peça permission somente após uma ação clara do usuário. 2) Envie notificações relevantes e pouco frequentes. 3) Sempre exiba uma notificação em um evento de envio (os navegadores podem revogar a inscrição se você não fizer isso). 4) Ofereça uma forma fácil de cancelar a inscrição. 5) Teste com os três serviços de envio (FCM, Mozilla e WindowsPush).
Armadilhas comuns
O envio falha silenciosamente se: userVisibleOnly for false (o Chrome exige true), as chaves VAPID não corresponderem, a inscrição tiver expirado (faça uma nova inscrição) ou nenhuma notificação for exibida no evento de envio (o navegador revoga a inscrição).
Verificação rápida
Por que cada mensagem de envio deve resultar em uma notificação visível (com userVisibleOnly: true)?
Recapitulação: notificações instantâneas
Solicite permission somente por meio de uma ação do usuário. Faça a inscrição usando reg.pushManager.subscribe com a chave pública VAPID. O servidor usa a biblioteca web-push para enviar. O evento de envio do SW chama showNotification. Um clique em uma notificação abre ou coloca o aplicativo em foco. Personalize ícone, emblema, imagem, ações e etiqueta. Sempre exiba uma notificação (userVisibleOnly: true é obrigatório). O iOS 16.4 ou posterior oferece suporte, mas somente para PWAs instaladas.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “Notificações push” é grátis?
Sim — o texto completo de “Notificações push” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Notificações push”?
Pedir permissão, subscrever notificações push com a Push API, receber mensagens no Service Worker e apresentar notificações com showNotification. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Notificações push”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O manifesto da aplicação Web
- Registo e ciclo de vida do Service Worker
- Estratégias de armazenamento offline em cache: CacheFirst e NetworkFirst
- Notificações push