Documentation 15 min read

Easy Notification System

Published: May 1, 2025 Last Updated: June 2, 2025

Introdução

O Easy Notification System é uma biblioteca JavaScript abrangente para gerenciamento avançado de notificações em aplicações web. Ela oferece recursos poderosos, como priorização, filtragem por categoria, segmentação de usuários, analytics, customização visual, agendamento e persistência de notificações. Com ela, você pode exibir notificações dinâmicas, persistentes ou agendadas, além de ajustar comportamentos, animações, cores, sons e ações do usuário.

Principais funcionalidades do Easy Notification System:

  • Exibição simultânea de múltiplas notificações com controle de concorrência.
  • Filtragem por categorias e segmentação de usuários.
  • Customização completa de cores, estilos, animações e sons.
  • Prioridade, fila e agendamento de notificações.
  • Interações do usuário, como clique, hover e fechamento manual.
  • Métricas e eventos de analytics integrados.
  • Suporte a notificações nativas (do navegador) individualmente ou globalmente.
  • Persistência de notificações usando localStorage.
  • Gerenciamento de duplicatas e estratégias de fallback.
  • Extensível e fácil de integrar com outras partes da aplicação.

Características Principais

  • Suporte a Várias Notificações: Controle quantas notificações são exibidas simultaneamente e gerencie filas com tamanho máximo configurável.
  • Filtragem e Categorias: Agrupe notificações por categoria e aplique filtros para exibir somente as que desejar. Defina prioridades por categoria para controlar a ordem de exibição.
  • Segmentação de Usuários: Defina segmentos de usuários e mostre notificações específicas baseadas no perfil do usuário.
  • Prioridade e Fila: Ajuste a ordem de exibição com base em prioridade e categorias, permitindo uma gestão eficiente das notificações.
  • Agendamento: Agende notificações para o futuro ou exiba-as em momentos específicos utilizando timestamps.
  • Estilos, Animações e Sons Customizáveis: Personalize cores, animações (fade, slide, scale, flip), estilos para o wrapper da notificação e sons para criar experiências únicas. customAnimations permite injetar @keyframes CSS.
  • Interações e Persistência: Adicione botões de fechamento, clique na notificação, persistência (sem tempo limite, não mostra barra de tempo) e reações ao hover. Controle auto-dismissal baseado em cliques e movimentos do mouse.
  • Analytics Integrado: Colete métricas sobre exibição, cliques, tempo de interação e progresso das notificações.
  • Notificações Nativas: Opção de exibir notificações nativas do navegador para certas notificações ou de forma global, com suporte a ícones.
  • Persistência de Notificações: Mantenha notificações persistentes usando localStorage, garantindo que elas permaneçam mesmo após recarregamentos da página.
  • Gerenciamento de Duplicatas e Fallback: Controle para evitar notificações duplicadas e estratégias de fallback para casos de falha na exibição.

Instalação

Para instalar o Easy Notification System, basta incluir o script JavaScript no seu HTML:

<script src="https://cdn.alphasystem.dev/plugins/easy-notification-system/latest/script-min.js"></script>

Após a inclusão do script, uma instância padrão será criada automaticamente e estará disponível como window.EasyNotificationInstance. Você pode utilizá-la diretamente para configurar e gerenciar notificações:

// Utiliza a instância padrão
const notifier = window.EasyNotificationInstance;

Configuração

O Easy Notification System oferece diversas opções de configuração. Você pode atualizar a configuração da instância padrão a qualquer momento utilizando o método updateConfig(newOptions) ou modificando diretamente window.EasyNotificationInstance.cfg.

  • enabled: Ativa ou desativa o sistema de notificações (Padrão: true).
  • defaultDisplayTime: Tempo padrão de exibição em milissegundos (Padrão: 5000).
  • maxConcurrent: Máximo de notificações exibidas simultaneamente (Padrão: 15).
  • animationDuration: Duração da animação em milissegundos (Padrão: 300).
  • maxQueueSize: Tamanho máximo da fila de notificações. Se excedido, a mais antiga é descartada (Padrão: 1000).
  • allowDuplicate: Permite notificações duplicadas (mesmo título, mensagem e tipo) (Padrão: false).
  • defaultType: Tipo padrão da notificação (ex: 'info', 'warning', 'success', 'danger'). Padrão: 'info'.
  • defaultCategory: Categoria padrão das notificações (Padrão: 'general').
  • segmentMatching: Habilita a correspondência de segmentos de usuário (Padrão: true).
  • priorityEnabled: Habilita a ordenação por prioridade na fila (Padrão: true).
  • analyticsEnabled: Registra eventos de analytics (Padrão: true).
  • categoryFilteringEnabled: Permite filtrar notificações por categoria (Padrão: true).
  • userInteractionTracking: Acompanha interações do usuário como cliques (Padrão: true).
  • maxRetriesOnDisplayError: (Não implementado ativamente no fluxo de reexibição) Número máximo de tentativas de reexibição em caso de erro (Padrão: 3).
  • containerId: ID personalizado para o container das notificações. Se não definido, um ID é gerado (Padrão: null).
  • animationType: Tipo de animação padrão ('fade', 'slide', 'scale', 'flip'). Padrão: 'fade'.
  • customAnimations: Objeto contendo definições de @keyframes CSS customizadas. Ex: { myKeyframe: '@keyframes myKeyframe { from { opacity: 0; } to { opacity: 1; } }' }. Essas keyframes são injetadas e podem ser usadas em customStyles.
  • customStyles: Objeto contendo estilos CSS customizados para serem aplicados ao wrapper de cada notificação e ao container. Ex: { background: '#333', color: '#fff' }.
  • fallbackStrategy: (Não implementado ativamente) Estratégia de fallback em caso de erro na exibição (Padrão: 'queue').
  • timeIncrementOnRetry: (Não implementado ativamente) Incremento de tempo em milissegundos para tentativas de reexibição (Padrão: 1000).
  • categoryPriorities: Objeto definindo prioridades numéricas para categorias específicas. Ex: { critical: 100, normal: 0 }.
  • userSegments: (Usado internamente, segmentos são definidos via defineSegment) Objeto definindo segmentos de usuário.
  • globalFilters: Array de funções de filtro globais. Cada função recebe o objeto da notificação e retorna true para exibir ou false para bloquear.
  • autoDismissOnClick: Fecha a notificação ao clicar (exceto no botão de fechar e se não for persistente) (Padrão: true).
  • autoDismissOnHoverOut: Fecha a notificação ao mover o mouse para fora dela (se não for persistente) (Padrão: false).
  • hoverPause: Pausa o temporizador de auto-fechamento quando o mouse está sobre a notificação (se não for persistente e tiver tempo de exibição) (Padrão: true).
  • retryOnFailure: (Não implementado ativamente) Tenta reexibir notificações em caso de falha (Padrão: true).
  • position: Posição do container de notificações ('top-right', 'top-left', 'bottom-right', 'bottom-left'). Padrão: 'top-right'.
  • useNativeNotifications: Se true, tenta exibir todas as notificações como nativas do navegador, a menos que uma notificação individual especifique nativeNotification: false. Se false, notificações só serão nativas se especificarem nativeNotification: true (Padrão: false).
  • defaultSound: URL do som padrão para notificações (Padrão: null).
  • showTimerBar: Exibe uma barra de temporizador na notificação (se tiver displayTime > 0 e não for persistente) (Padrão: true).
// Exemplo de atualização de configuração
window.EasyNotificationInstance.updateConfig({
  maxConcurrent: 5,
  defaultType: 'success',
  position: 'bottom-left',
  animationType: 'slide',
  autoDismissOnHoverOut: true,
  customStyles: { // Aplicado ao container e a cada wrapper de notificação
    borderRadius: '10px',
    boxShadow: '0 0 15px rgba(0,0,0,0.5)'
  },
  customAnimations: {
    myCustomFadeIn: '@keyframes myCustomFadeIn { from { opacity: 0; } to { opacity: 1; } }'
  }
});

Uso e Integração

Após configurar, você pode criar e exibir notificações facilmente utilizando a instância padrão window.EasyNotificationInstance:

  • Criar Notificação: Use createNotification passando título, mensagem, tipo, etc. Este método retorna o ID da notificação criada.
  • Notificações Persistentes: Defina persistent: true para manter a notificação visível até ser fechada manualmente. Notificações persistentes não possuem barra de tempo e não são fechadas automaticamente por hoverPause ou autoDismissOnHoverOut.
  • Agendar Notificações: Use scheduleNotification para exibir notificações no futuro.
  • Categorias e Segmentos: Ajuste category e segments para filtrar quem vê as notificações.
  • Notificações Nativas por Notificação:
    • Se a configuração global useNativeNotifications for true, uma notificação será nativa a menos que tenha nativeNotification: false.
    • Se useNativeNotifications for false (padrão), uma notificação só será nativa se tiver nativeNotification: true.
  • Fechamento Manual: Use dismissNotification(notificationId) ou markAsFinished(notificationId, reason).
  • Controle da Barra de Progresso: Utilize métodos como increaseProgress, decreaseProgress e setProgress para manipular a barra de progresso das notificações que têm hasProgressBar: true.
  • Definir Dados do Usuário: Use setUserData para definir dados do usuário que serão usados na segmentação.
  • Definir Segmentos de Usuário: Use defineSegment para criar segmentos personalizados.
  • Gerenciar Categorias: Use allowCategory e blockCategory para controlar quais categorias de notificações são exibidas.
  • Gerenciar Prioridades de Categoria: Use setCategoryPriority para definir prioridades específicas para categorias.
  • Eventos: Use on para escutar eventos e triggerEvent para disparar eventos customizados.
  • Analytics: Use getAnalytics para obter logs de analytics e clearAnalytics para limpar os logs.
  • Requisição de Permissão: Use requestPermission para solicitar permissão para notificações nativas.
  • Reproduzir Som: Use playSound para reproduzir um som específico.
  • Redirecionamento: A propriedade redirect em uma notificação fará com que o usuário seja redirecionado para a URL especificada quando a notificação expirar pelo displayTime (não se aplica a persistentes ou fechadas manualmente/por clique).

Exemplo básico:

const notifier = window.EasyNotificationInstance;

const notificationId = notifier.createNotification({
  title: 'Olá!',
  message: 'Esta é uma notificação de teste.',
  type: 'info',
  displayTime: 3000
});

console.log('ID da Notificação:', notificationId);

Notificação persistente (sem tempo limite):

const persistentNotifId = notifier.createNotification({
  title: 'Atenção',
  message: 'Esta notificação só fechará se você clicar no X.',
  type: 'warning',
  persistent: true
});

Notificação nativa individual (considerando useNativeNotifications: false globalmente):

const nativeNotifId = notifier.createNotification({
  title: 'Notificação do Sistema',
  message: 'Esta notificação é nativa do navegador.',
  nativeNotification: true,
  icon: '/path/to/icon.png' // Opcional
});

Controle da Barra de Progresso:

const progressNotifId = notifier.createNotification({
  title: 'Processando',
  message: 'O processo está em andamento...',
  type: 'info',
  hasProgressBar: true,
  progress: 10, // Progresso inicial
  persistent: true, // Para que não feche sozinha enquanto o progresso ocorre
  onClick: (n) => console.log('Notificação clicada:', n)
});

let currentProgress = 10;
const progressInterval = setInterval(() => {
  currentProgress += 10;
  if (currentProgress > 100) {
    clearInterval(progressInterval);
    notifier.markAsFinished(progressNotifId, 'progress_complete');
  } else {
    notifier.setProgress(progressNotifId, currentProgress, `Progresso: ${currentProgress}%`);
  }
}, 1000);

Agendar uma notificação para 10 segundos no futuro:

const futureTime = Date.now() + 10000;
const scheduledNotifId = notifier.scheduleNotification({
  title: 'Lembrete',
  message: 'Esta notificação aparecerá em 10 segundos.',
  type: 'warning',
  time: futureTime
});

console.log('ID da Notificação Agendada:', scheduledNotifId);

Reproduzir Som em uma Notificação:

const soundNotifId = notifier.createNotification({
  title: 'Alerta Sonoro',
  message: 'Esta notificação reproduz um som específico.',
  type: 'danger',
  sound: 'https://example.com/sounds/alert.mp3' // URL do som
});

// Reproduzir um som específico manualmente
notifier.playSound('https://example.com/sounds/notification.mp3');

Referência da API

Métodos Principais

  • createNotification(params): Cria e adiciona uma notificação à fila.
    • Parâmetros (objeto params):
      • title (string): Título da notificação.
      • message (string): Mensagem principal.
      • type (string): Tipo ('info', 'warning', 'success', 'danger', etc.). Default: cfg.defaultType.
      • category (string): Categoria. Default: cfg.defaultCategory.
      • priority (number): Prioridade numérica. Default: 0.
      • displayTime (number): Tempo de exibição em ms. Default: cfg.defaultDisplayTime.
      • segments (array): Array de strings de nomes de segmentos. Default: [].
      • onClick (function): Callback ao clicar na notificação (recebe o objeto da notificação).
      • onFinished (function): Callback ao fechar/finalizar (recebe { id, reason }).
      • persistent (boolean): Se true, não fecha automaticamente. Default: false.
      • nativeNotification (boolean): Define se esta notificação deve tentar ser nativa (comportamento depende de cfg.useNativeNotifications).
      • hasProgressBar (boolean): Se true, mostra uma barra de progresso. Default: false.
      • progress (number): Progresso inicial (0-100) se hasProgressBar for true. Default: 0.
      • animationType (string): Tipo de animação ('fade', 'slide', etc.). Default: cfg.animationType.
      • position (string): Posição ('top-right', etc.). Default: cfg.position.
      • autoDismissOnHoverOut (boolean): Sobrescreve cfg.autoDismissOnHoverOut.
      • sound (string|null): URL do som. null para nenhum som, undefined para usar cfg.defaultSound.
      • showTimerBar (boolean): Sobrescreve cfg.showTimerBar.
      • redirect (string): URL para redirecionar ao expirar por tempo (não persistente).
      • icon (string): URL do ícone (usado principalmente por notificações nativas).
    • Retorno: string - ID da notificação criada, ou null se o sistema estiver desabilitado.
  • scheduleNotification(params): Agenda uma notificação.
    • Parâmetros: Mesmo objeto params de createNotification, mais:
      • time (number): Timestamp (ms) para quando a notificação deve ser enfileirada. Default: Date.now() + 5000.
    • Retorno: string - ID da notificação agendada, ou null se o sistema estiver desabilitado.
  • setUserData(data): Define dados do usuário para segmentação.
    • Parâmetros: data (object) - Dados do usuário.
  • defineSegment(name, criteriaFn): Define um segmento de usuário.
    • Parâmetros: name (string) - Nome do segmento; criteriaFn (function) - Função (userData) => boolean.
  • allowCategory(cat): Permite exibir notificações de uma categoria.
    • Parâmetros: cat (string) - Nome da categoria.
  • blockCategory(cat): Bloqueia notificações de uma categoria.
    • Parâmetros: cat (string) - Nome da categoria.
  • setCategoryPriority(cat, priorityValue): Ajusta prioridade de uma categoria.
    • Parâmetros: cat (string) - Nome da categoria; priorityValue (number) - Valor da prioridade.
  • on(event, callbackFn): Escuta eventos do sistema.
    • Parâmetros: event (string) - Nome do evento; callbackFn (function) - Função callback.
  • triggerEvent(event, data): Dispara eventos customizados.
    • Parâmetros: event (string) - Nome do evento; data (any) - Dados associados.
  • getAnalytics(): Retorna logs de analytics.
    • Retorno: array - Lista de eventos registrados.
  • clearAnalytics(): Limpa logs de analytics.
  • dismissNotification(id): Fecha a notificação com o ID fornecido (sinônimo de markAsFinished(id, 'manual')).
    • Parâmetros: id (string) - ID da notificação.
  • increaseProgress(id, amount, newMessage): Aumenta a barra de progresso.
    • Parâmetros: id (string); amount (number); newMessage (string, opcional).
  • decreaseProgress(id, amount, newMessage): Diminui a barra de progresso.
    • Parâmetros: id (string); amount (number); newMessage (string, opcional).
  • setProgress(id, value, newMessage): Define o valor da barra de progresso.
    • Parâmetros: id (string); value (number, 0-100); newMessage (string, opcional).
  • playSound(soundUrl): Reproduz um som.
    • Parâmetros: soundUrl (string) - URL do áudio.
    • Retorno: Promise<void> - Resolve quando a reprodução inicia ou falha.
  • requestPermission(): Solicita permissão para notificações nativas.
    • Retorno: Promise<string> - Resolve com o status da permissão ('granted', 'denied', 'default', 'unsupported', 'pending', 'error').
  • markAsFinished(id, reason): Marca a notificação como finalizada, fechando-a.
    • Parâmetros: id (string); reason (string, opcional, default: 'manual').
  • clearAllNotifications(): Remove todas as notificações ativas e limpa a fila.
  • updateConfig(newOptions): Atualiza a configuração global da instância.
    • Parâmetros: newOptions (object) - Objeto com as configurações a serem mescladas.
  • getNotificationById(id): Retorna o objeto de uma notificação armazenada pelo ID.
    • Parâmetros: id (string).
    • Retorno: object|undefined - O objeto da notificação ou undefined se não encontrada.
  • getAllActiveNotifications(): Retorna um objeto com todas as notificações atualmente visíveis na tela.
    • Retorno: object - Chaves são IDs das notificações, valores são os objetos das notificações.
  • getQueue(): Retorna uma cópia da fila de notificações pendentes.
    • Retorno: array - Array de objetos de notificação.

Eventos Disponíveis (para on(event, callback))

  • show: Disparado quando uma notificação (DOM ou Nativa) está prestes a ser exibida (após passar pelos filtros e estar pronta para renderizar). Dados: { id, category, type, native }.
  • click: Disparado quando o usuário clica no corpo da notificação (não no botão de fechar). Dados: { id }.
  • hide: Disparado quando uma notificação (DOM ou Nativa) é fechada/ocultada. Dados: { id, user (boolean), native (boolean) }.
  • displayed: Disparado quando uma notificação DOM efetivamente aparece na tela (após animação de entrada). Dados: { id }.
  • finished: Disparado quando uma notificação é completamente removida do sistema (após animação de saída e limpeza). Dados: { id, reason }.
  • progress_increase: Disparado quando a barra de progresso é aumentada. Dados: { id, amount, newProgress }.
  • progress_decrease: Disparado quando a barra de progresso é diminuída. Dados: { id, amount, newProgress }.
  • progress_set: Disparado quando a barra de progresso é definida para um valor específico. Dados: { id, value }.

Resolução de Problemas

  • Notificações Não Aparecem:
    • Verifique window.EasyNotificationInstance.cfg.enabled.
    • Verifique se maxConcurrent não está zero.
    • Confira os filtros de categoria (allowCategory, blockCategory) e se categoryFilteringEnabled está true.
    • Verifique os segmentos de usuário (defineSegment, setUserData) e se segmentMatching está true.
    • Verifique globalFilters na configuração.
    • Abra o console do navegador para mensagens de erro ou logs do sistema.
  • Eventos Não Disparam: Certifique-se de registrar o listener com on() antes que o evento ocorra. Verifique se analyticsEnabled ou userInteractionTracking estão habilitados para eventos relacionados.
  • autoDismissOnHoverOut Não Funciona: Garanta que a opção autoDismissOnHoverOut esteja habilitada na notificação ou globalmente, e que a notificação não seja persistent.
  • Animações Não Aplicam: Verifique a propriedade animationType. customAnimations na configuração serve para injetar definições de @keyframes. Para usá-las, você precisaria aplicar essas animações via customStyles ou CSS externo, pois animationType só funciona com os tipos pré-definidos ('fade', 'slide', 'scale', 'flip').
  • Notificações Nativas Não Aparecem:
    • Certifique-se de que o usuário concedeu permissão (Notification.permission === 'granted'). Use requestPermission().
    • Verifique a configuração useNativeNotifications e a propriedade nativeNotification da notificação individual.
    • Alguns navegadores/SO podem ter restrições adicionais.
  • Barra de Tempo (showTimerBar) Não Aparece: Assegure-se de que a notificação tem displayTime > 0, não é persistent: true, e showTimerBar está true.
  • Controle da Barra de Progresso Não Funciona: Verifique se a notificação possui hasProgressBar: true e se o ID fornecido aos métodos de progresso está correto.
  • Persistência de Notificações Não Funciona: Verifique se a notificação está definida como persistent: true e se o navegador suporta localStorage e não está em modo privado que o bloqueie.
  • Problemas com Segmentação: Confirme se os segmentos estão definidos corretamente com defineSegment e se setUserData foi chamado com os dados corretos antes de criar a notificação.
  • Falha na Reprodução de Sons: Assegure-se de que a URL do som está correta, acessível (CORS), e que o formato do áudio é suportado. Interações do usuário com a página podem ser necessárias para habilitar a reprodução automática de áudio.
  • Redirecionamento não ocorre: O redirecionamento via redirect só acontece para notificações não persistentes que expiram pelo displayTime. Não ocorre se fechadas manualmente, por clique, ou se são persistentes.

Exemplos de Código

Exemplo Básico

const notifier = window.EasyNotificationInstance;

const notificationId = notifier.createNotification({
  title: 'Olá!',
  message: 'Esta é uma notificação de teste.',
  type: 'info',
  displayTime: 3000
});

console.log('ID da Notificação:', notificationId);

Notificação com Segmentação de Usuário

const notifier = window.EasyNotificationInstance;

notifier.defineSegment('premiumUser', (userData) => userData && userData.isPremium === true);
notifier.setUserData({ isPremium: true, id: 123 });

const premiumNotifId = notifier.createNotification({
  title: 'Acesso Premium!',
  message: 'Obrigado por ser um usuário premium!',
  type: 'success',
  segments: ['premiumUser']
});

console.log('ID da Notificação Premium:', premiumNotifId);

Agendamento de Notificação

const notifier = window.EasyNotificationInstance;

const futureTime = Date.now() + 10000; // 10 segundos no futuro
const scheduledNotifId = notifier.scheduleNotification({
  title: 'Lembrete Agendado',
  message: 'Esta notificação foi programada para aparecer agora.',
  type: 'warning',
  time: futureTime
});

console.log('ID da Notificação Agendada:', scheduledNotifId);

Notificação Persistente com Fechamento Manual

const notifier = window.EasyNotificationInstance;

const notificacaoImportanteId = notifier.createNotification({
  title: 'Ação Necessária',
  message: 'Clique no X para fechar esta notificação persistente.',
  type: 'danger',
  persistent: true,
  onClick: (n) => console.log('Notificação persistente clicada:', n.id)
});

// Exemplo de fechamento manual após um tempo (ou por outra ação)
setTimeout(() => {
  notifier.dismissNotification(notificacaoImportanteId);
  console.log('Notificação persistente fechada programaticamente.');
}, 30000);

Usar Animações Customizadas (Definindo Keyframes)

const notifier = window.EasyNotificationInstance;

// 1. Definir keyframes via configuração
notifier.updateConfig({
  customAnimations: {
    mySpinIn: `@keyframes mySpinIn {
      0% { transform: rotate(-360deg) scale(0); opacity: 0; }
      100% { transform: rotate(0deg) scale(1); opacity: 1; }
    }`,
    myFadeOutQuick: `@keyframes myFadeOutQuick {
      to { opacity: 0; transform: scale(0.8); }
    }`
  }
});

// 2. Para usar esses keyframes, você pode aplicá-los via customStyles
//    na configuração global (afetando todas as notificações) ou
//    precisaria de uma forma de aplicar estilos por notificação (não diretamente via params.customStyles).
//    Este exemplo mostra como aplicar um estilo global que usa a keyframe.
notifier.updateConfig({
  customStyles: { // Estilo aplicado a todos os wrappers de notificação
    animationName: 'mySpinIn', // Usa a keyframe definida em customAnimations
    animationDuration: '0.7s',
    animationTimingFunction: 'ease-out'
    // Nota: Isso aplicará 'mySpinIn' como a animação de entrada para TODAS as notificações.
    // A animação de saída ainda será controlada por 'animationType'.
    // Para um controle mais fino, seria necessário CSS mais específico ou
    // modificações na lógica de animação da biblioteca.
  }
});

notifier.createNotification({
  title: 'Animação Customizada!',
  message: 'Esta notificação usa keyframes customizados para entrada (globalmente).',
  type: 'info',
  // animationType: 'fade' // A animação de SAÍDA ainda usaria 'fadeOut'
});

Nota sobre Animações Customizadas: A configuração customAnimations injeta as definições de @keyframes no CSS. A propriedade animationType da notificação seleciona um par de animações de entrada/saída de um conjunto pré-definido na biblioteca ('fade', 'slide', 'scale', 'flip'). Para usar suas keyframes customizadas de forma integrada com o ciclo de vida de entrada/saída, você precisaria de uma lógica mais avançada ou aplicar os estilos de animação diretamente via customStyles (o que pode sobrescrever apenas uma parte do ciclo de animação padrão).

Reproduzir Som em uma Notificação

const notifier = window.EasyNotificationInstance;

const soundNotifId = notifier.createNotification({
  title: 'Alerta Sonoro!',
  message: 'Esta notificação tem um som customizado.',
  type: 'danger',
  sound: 'https://cdn.jsdelivr.net/npm/ion-sound@3.0.7/sounds/water_droplet.mp3'
});

// Para testar o som padrão (se configurado)
// notifier.updateConfig({ defaultSound: 'https://cdn.jsdelivr.net/npm/ion-sound@3.0.7/sounds/bell_ring.mp3' });
// notifier.createNotification({ title: 'Som Padrão', message: 'Testando som padrão.'});