Gerador de Notificações do Navegador

Crie, teste e gere código para notificações push do navegador. Configure opções, visualize resultados e obtenha código JavaScript pronto para usar.

Testar notificação

Ir para o código gerado →

Visualização

Welcome!

This is your notification message. Customize it to see how it looks.

Modelos rápidos

Configuração de notificação

Ícone pequeno exibido na notificação

Ícone de badge representando a notificação (apenas Android)

Imagem grande exibida na notificação

ID único para agrupar ou substituir notificações semelhantes

Padrão de vibração separado por vírgulas em milissegundos (apenas móvel)

Código gerado

// Request notification permission
if ('Notification' in window && Notification.permission === 'default') {
  await Notification.requestPermission();
}

// Check if permission is granted
if (Notification.permission === 'granted') {
  const notification = new Notification('Welcome!', {
  "body": "This is your notification message. Customize it to see how it looks.",
  "tag": "notification-1",
  "vibrate": [
    200,
    100,
    200
  ]
});
  
  notification.onclick = () => {
    console.log('Notification clicked');
    notification.close();
  };
}

Suporte a navegadores

A Notifications API é suportada no Chrome, Firefox, Safari, Edge e Opera. Alguns recursos como vibração e badge são específicos de dispositivos móveis e podem não funcionar em todas as plataformas.

Share this tool

Help others discover Browser Notification Generator

Sobre o Gerador de Notificações do Navegador

Como Funciona

  • Configure propriedades de notificação com visualização em tempo real
  • Teste notificações diretamente no seu navegador
  • Gere código JavaScript para implementação
  • Personalize título, corpo, ícones e comportamento
  • Teste diferentes padrões e estilos de notificação

Casos de Uso Comuns

  • Desenvolver aplicações web com notificações
  • Testar aparência e comportamento de notificações
  • Criar alertas de engajamento do usuário
  • Implementar recursos de notificações push
  • Aprender a Notifications API

Perguntas Frequentes

Para que serve o Gerador de Notificações do Navegador?

O Gerador de Notificações do Navegador é uma ferramenta para desenvolvedores web criarem, testarem e gerarem código para notificações push do navegador. Permite configurar todas as propriedades da notificação, ver uma prévia ao vivo e obter código JavaScript pronto para usar.

Preciso de permissões especiais para usar notificações do navegador?

Sim, as notificações do navegador requerem permissão do usuário. Os usuários devem conceder permissão explicitamente antes que seu site possa exibir notificações. A ferramenta mostra o estado atual da permissão.

Quais navegadores suportam a Notifications API?

A Notifications API é amplamente suportada em navegadores modernos como Chrome, Firefox, Safari, Edge e Opera. No entanto, alguns recursos como padrões de vibração e badges são específicos para dispositivos móveis.

Posso personalizar o ícone e as imagens da notificação?

Sim! Você pode especificar URLs para múltiplos tipos de imagens: um ícone pequeno, um badge (apenas Android) e uma imagem grande no corpo da notificação. Todas as imagens devem ser acessíveis via URLs HTTPS.

Para que serve a propriedade 'tag'?

A propriedade tag é um identificador único para sua notificação. Ao exibir uma nova notificação com o mesmo tag de uma existente, a nova substitui a antiga em vez de criar uma duplicata. Isso é útil para evitar spam de notificações.

Como funcionam os padrões de vibração?

Os padrões de vibração são especificados como números separados por vírgulas em milissegundos. O padrão alterna entre vibração e pausa. Por exemplo, '200, 100, 200' significa: vibrar por 200ms, pausar por 100ms, vibrar por 200ms. Funciona apenas em dispositivos móveis.

O que significa 'Exigir Interação'?

Quando 'Exigir Interação' está ativado, a notificação permanecerá visível até que o usuário a dispense explicitamente ou clique nela. Sem essa opção, as notificações desaparecem automaticamente após alguns segundos.

Posso tornar as notificações silenciosas?

Sim, a opção 'Silencioso' permite criar notificações sem som ou vibração. Isso é útil para atualizações não urgentes que devem ser visíveis mas não perturbadoras.

Como implemento o código gerado no meu site?

Copie o código JavaScript gerado e integre-o em sua aplicação web. Primeiro verifique se o navegador suporta notificações, então solicite permissão se necessário e finalmente crie notificações com suas opções configuradas.

As notificações que crio são privadas e seguras?

Com certeza! Todos os testes de notificação acontecem inteiramente no seu navegador. Nenhum dado é enviado para servidores externos. A ferramenta é projetada para teste local seguro.

Posso testar notificações para Progressive Web Apps (PWA)?

Sim! Esta ferramenta ajuda a testar a Notifications API, que é uma característica chave das Progressive Web Apps. No entanto, notificações push baseadas em service worker requerem configuração adicional.

Por que minhas notificações de teste não aparecem?

Se as notificações não aparecerem, verifique: 1) A permissão pode estar negada, 2) O navegador pode estar no modo Não Perturbe, 3) Alguns navegadores não mostram notificações com DevTools aberto, 4) Use um navegador suportado.

Share ToolsZone

Help others discover these free tools!

Compartilhar esta página

Gerador de Notificações do Navegador | Ferramenta Gratuita