Utilizando Notification do browser

JavaScript 11 de Mar de 2019

Em grande parte dos sistemas construídos ter uma área de notificação é essencial para manter o usuário a par do que está acontecendo sem precisar carregar as páginas de modo manual e ineficiente. Da mesma maneira escolher o que notificar é crucial para não encher a paciência do usuário com informações desnecessárias.

Geralmente as notificações se dão por meio de socket.io, Websocket, requisições de tanto em tanto tempo ou outros meios não tão conhecidos. Se você possui uma estrutura semelhante a essa talvez seja interessante você utilizar o Notification do browser.

Mas antes, não confunda o Notification com o Push Notification apenas. O primeiro é a maneira na qual você utiliza as notificações desktop/mobile do browser, já o segundo trata-se de uma conexão estabelecida com um servidor, onde o browser fica escutando o mesmo e recebendo as notificações.

A grande maioria dos browser já possuem o Notification, mas por padrão é bom verificar se o mesmo existe para ativar suas funcionalidades e existindo é pedido ao usuário a liberação para utilizar a notificação, sendo liberado é só utilizar com sabedoria:

// init.js
if (!("Notification" in navigator)) {
  console.log('Esse browser não suporta notificações desktop');
} else {
  if (Notification.permission !== 'denied') {
    // Pede ao usuário para utilizar a Notificação Desktop
    await Notification.requestPermission();
  }
}

// notification.js
wsNotification.on('new', () => {
  if (Notification.permission === 'granted') {
    const notification = new Notification('Título', {
      body: 'Conteúdo da notificação'
    });
    
    notification.onclick = (e) => {
      e.preventDefault();
      window.focus();
      notification.close();
    }
  }
});

Dicas

Como a notificação desktop é mais "invasiva" não é interessante você fazer o pedido de sua utilização sem deixar claro para o usuário do que se trata, por exemplo abriu o site e já pede para notificar, ele não vai permitir alguma coisa sem pé e se cabeça.

Uma outra dica é verificar se a página está aberta, assim você não precisa avisa-lo de uma notificação via desktop, claro que pensando no cenário em que você possui um sistema de notificação interno.