Notificações push em uma PWA Vue
Push API, Notification API, chaves VAPID, inscrição de usuários e envio pelo servidor.
Notificações push em uma PWA Vue é uma aula grátis de Vue 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Notificações push em uma PWA
O Web Push permite que seu servidor envie notificações a um usuário mesmo quando o aplicativo está fechado. Ele combina a API de Notificações, a API Push e um agente de serviço, todos baseados na permissão explícita do usuário.
Solicitando permissão
Você precisa solicitar permissão antes de fazer a inscrição. Notification.requestPermission() retorna uma promessa que é resolvida como "concedida", "negada" ou "padrão".
const permission = await Notification.requestPermission();
if (permission === "granted") {
// proceed to subscribe
}Acione a partir de uma ação do usuário
Os navegadores exigem que a solicitação de permissão seja consequência de uma ação do usuário, como um clique em um botão. Nunca faça a solicitação ao carregar a página — ela será ignorada ou incomodará os usuários.
<button @click="enableNotifications">
Enable notifications
</button>Obtendo o registro do agente de serviço
As inscrições para push ficam no registro ativo do agente de serviço. Aguarde navigator.serviceWorker.ready para obtê-lo.
const registration = await navigator.serviceWorker.ready;A applicationServerKey
O push usa chaves VAPID. O servidor mantém a chave privada; o cliente faz a inscrição com a chave pública, convertida em uma Uint8Array.
function urlBase64ToUint8Array(base64) {
const padding = "=".repeat((4 - base64.length % 4) % 4);
const raw = atob((base64 + padding).replace(/-/g, "+").replace(/_/g, "/"));
return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
}pushManager.subscribe
Faça a inscrição por meio do pushManager do registro. Defina userVisibleOnly: true e passe a applicationServerKey convertida.
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});Por que usar userVisibleOnly
userVisibleOnly: true promete que todo push exibirá uma notificação visível. Os navegadores exigem isso para evitar rastreamento silencioso em segundo plano.
Enviando a inscrição ao seu servidor
O objeto de inscrição contém o ponto de acesso e as chaves de que o servidor precisa. Envie-o por POST ao seu back-end para armazená-lo e usá-lo em envios futuros.
await fetch("/api/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(subscription)
});O servidor envia um push
Seu back-end usa uma biblioteca Web Push e a chave privada VAPID para enviar uma carga útil ao ponto de acesso armazenado.
// Node backend (web-push library)
webpush.sendNotification(
subscription,
JSON.stringify({ title: "Hello", body: "New message" })
);Recebendo push no agente de serviço
O agente de serviço trata o evento push e chama showNotification para exibi-lo.
// service worker
self.addEventListener("push", (event) => {
const data = event.data.json();
event.waitUntil(
self.registration.showNotification(data.title, {
body: data.body,
icon: "/pwa-192.png"
})
);
});Tratando cliques em notificações
Responda aos cliques com o evento notificationclick para focalizar ou abrir o aplicativo na página correta.
self.addEventListener("notificationclick", (event) => {
event.notification.close();
event.waitUntil(clients.openWindow("/inbox"));
});Verificação rápida
Por que userVisibleOnly: true é obrigatório ao fazer uma inscrição para push?
Recapitulação
O Web Push começa com Notification.requestPermission() a partir de uma ação do usuário e depois usa registration.pushManager.subscribe com userVisibleOnly: true e uma applicationServerKey. Envie a inscrição ao seu servidor, que enviará cargas úteis recebidas pelo agente de serviço em seu evento push e exibidas com showNotification.
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
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Notificações push em uma PWA Vue” é grátis?
Sim — o texto completo de “Notificações push em uma PWA Vue” é 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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Notificações push em uma PWA Vue”?
Push API, Notification API, chaves VAPID, inscrição de usuários e envio pelo servidor. Você pratica Vue 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 Vue Academy?
Nenhuma experiência prévia é necessária. Vue 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 em uma PWA Vue”?
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 Vue Academy?
Sim. Cada aula de Vue 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
- Configuração do vite-plugin-pwa
- Estratégias de Service Worker
- Suporte offline e sincronização em segundo plano
- Notificações push em uma PWA Vue