Enviando web notificações em navegadores, Push API e Notifications API
Termos relacionados: notificação push, notificação desktop, notificação browser, notificação navegador, notificação web, notificação chrome, web notifications.
Com as constantes melhorias das tecnologias web, as grandes empresas responsáveis pelos browsers criaram formas de que notificações pudessem aparecer na tela do computador ou smartphone, durante a navegação de um website ou até mesmo que um site não esteja aberto.
Duas tecnologias foram criadas para permitir que isso fosse possível, são elas a Notifications API e a Push API.
A Notifications API é quem faz a notificação aparecer.
Site com exemplo de notificação usando a Notifications API
https://www.bennish.net/web-notifications.html
A Push API é quem faz seu navegador continuar funcionando por trás dos panos e pedindo atualizações de mensagens novas, mesmo que ele esteja fechado!
A Notifications API e Push API precisam estarem disponíveis no navegador que você está usando para que tudo funcione corretamente. Veja aqui a compatibilidade dos navegadores com a Notifications API e aqui com a Push API.
Notifications API
A notificação contém um título, um corpo.
Para o navegador chrome, a notificação também pode conter até 2 botões que ativam ações.
Você pode criar notificações puramente em Javascript, offline, sem necessidade de depender de um backend ou uma API paga para isso, mas claro, seu grande valor está quando ele trabalha junto com a Push API.
Push API
A tecnologia casa bem com o Service Worker API.
https://developer.mozilla.org/pt-BR/docs/Web/API/Service_Worker_API
Referências
Notifications + Push API
** Explicação completa sobre Push API, Muito boa! **
https://flaviocopes.com/push-api/
Implementando notificações com Push API e Service Worker com NodeJS e Express
https://www.section.io/engineering-education/push-notification-in-nodejs-using-service-worker/
Outra explicação muito boa
https://labs.bawi.io/web-push-notifications-through-vapid-method-7d4d6927a006
Push API vs Notifications API
https://stackoverflow.com/a/66369494/2789895
Notifications API
Documentação W3C da especificação Notifications API
https://notifications.spec.whatwg.org/
Documentação Mozilla MDN - da Notifications API
https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API
Documentação Mozilla MDN - da interface Notification da Notifications API
https://developer.mozilla.org/en-US/docs/Web/API/notification
Documentação da Notifications API exclusiva do Chrome (perceba a propriedade buttons)
https://developer.chrome.com/docs/extensions/reference/notifications/
Website com exemplo de uso da Notifications API
https://davidwalsh.name/notifications-api
Criando uma web Notification com Javascript
https://davidwalsh.name/notifications-api
Conhecendo o Notifications API do HTML5
http://www.linhadecodigo.com.br/artigo/3635/conhecendo-o-html5-notifications-api.aspx
Push API
W3C Working Draft - Push API
https://www.w3.org/TR/push-api/
Notificações Push no Firefox
https://support.mozilla.org/en-US/kb/push-notifications-firefox
Documentação Mozilla MDN - Push API
https://developer.mozilla.org/en-US/docs/Web/API/Push_API
Documentação Mozilla MDN - da Service Worker API
https://developer.mozilla.org/pt-BR/docs/Web/API/Service_Worker_API