Carregando...
Sem categoria

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

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *