--- title: "Notificações Push Web (desmistificadas)" description: "Alguns dias atrás, juntamente com o lançamento da nossa nova linha de produtos PWA, publicámos algumas nas funcionalidades. Entre elas existe agora a opção de e" canonical_url: "https://pt.goodbarber.com/blog/notificacoes-push-web-desmistificadas-a814/" lang: pt date: 2017-10-26 last_updated: 2017-10-26 --- # Notificações Push Web (desmistificadas) [Voltar](/blog/artigos-populares-r23/) # Notificações Push Web (desmistificadas) Escrito por [Jerome Granados](https://pt.goodbarber.com/blog/author/jerome-granados/) na Quinta-Feira 26 Outubro 2017 ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/17871067-22227938.jpg?v=1509023641.0558023) Alguns dias atrás, juntamente com o lançamento da nossa [nova linha de produtos PWA](https://pt.goodbarber.com/blog/novos-produtos-novas-funcionalidades-a813/) , publicámos algumas nas funcionalidades. Entre elas existe agora a opção de enviar notificações push para os usuários de Progressive Web Apps. ## Notificações push web: que browsers são compatíveis? Com a oferta Progressive Web App é agora possível enviar notificações push, as quais são recebidas diretamente no web browser do usuário. Esta funcionalidade é suportada pela maioria dos web browsers mais recentes, lista essa que está aumentando dia após dia. A tabela abaixo oferece uma [vista geral sobre os OS/browsers que conseguem receber notificações push](https://blog.goodbarber.com/fr/docs/img/web-push-notification-browsers-supported-demystified.jpg) . No nosso estudo, apurámos a última versão estável de cada um dos browser que analisámos.​ Todos os sistemas operativos (excepto o iOS, infelizmente), têm um web browser que permite a recepção de notificações push, o que são boas notícias. Tal como já expressámos anteriormente, os PWA’s são o futuro dos apps. Até a Apple parece estar a fazer um esforço para embarcar nesta tendência, tendo anunciado este verão que vão começar a trabalhar na utilização do Service Worker no Safari. Os service workers são um elemento essencial que permite aos PWA’s oferecer uma experiência rica. Por exemplo, eles gerenciam a recepção de notificações push em todos s browsers listados no quadro acima. Todos, excepto o Safari, que utiliza um sistema proprietário que permite e recepção de pushes no OS X, mas não no iOS. A equipe responsável pelo desenvolvimento do Safari não indicou ainda se a recepção de notificações push será gerenciada por um service worker ou não, uma vez que eles sejam suportados. Esperamos que esse seja o caso, ou que seja ao menos providenciada uma alternativa para iOS. ## Pré-requisitos necessários para o funcionamento Se você tem curiosidade sobre como funcionam as notificações push, sugerimos que leia a página [How Push Works](https://developers.google.com/web/fundamentals/push-notifications/how-push-works) na base de informações da Google. O conceito de enviar/receber notificações push está bastante bem explicado lá. De forma a que as notificações push sejam recebidas, deve ser cumprido um conjunto de condições. **Do seu lado**, você deve estabelecer uma conexão entre o seu back office e os serviços terceirizados que são necessários para a distribuição de notificações. Para estabelecer esta conexão, você tem de gerar **uma chave API/ou certificados**, de forma a garantir a autenticidade das trocas entre os servidos da GoodBarber e os serviços de distribuição de notificações. Para o Chrome, Firefox e Opera, utilizamos o **Firebase**, que integra a plataforma Google. Para o Safari, usamos a plataforma **APNs** da Apple. **Do lado do utilizador final**, não existe muito que necessita de ser feito, além de visitar o PWA a partir de um browser que tem capacidade de recepção push (ver a tabela acima) e, claro, aceitar a recepção das notificações push uma vez no site. Então, você poderá enviar notificações a partir do seu back office. ## Recebendo e enviando notificações push ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/17871067-22228003.jpg?v=1509023380.2665603) A partir da página Usuários > Push > Enviar, pode criar e distribuir suas notificações. - esboce sua mensagem - selecione a acção que tomará lugar quando a notificação é aberta. No exemplo da captura de tela abaixo, eu estou redirecionando meu usuário diretamente para a página que permite reservar uma mesa no meu restaurante. - escolher a data de envio da mensagem, que pode ser imediato ou no futuro. Pode escolher ainda usar a hora local do usuário para o notificar. Esta página indica o número de usuários (mais precisamente o número de browsers web) que irão receber a notificação. ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/17871067-22228019.jpg?v=1509023436.139062) Do lado do usuário a notificação será exibida no seu dispositivo. Os elementos visuais da notificação são customizáveis a partir do menu *Construtor > Recursos e Ferramentas > Ícones.* Entre os ícones, você encontrará um ícone de notificação. Ele deverá ser monocromático sobre um fundo transparente. No Android, ele é mostrado na barra de status do dispositivo ao receber a notificação. Quando você acessa os detalhes da notificação o logótipo do website também será mostrado. ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/17871067-22228022.jpg?v=1509023497.1305552) O Progressive Web App permite a você **distribuir o seu app através de um canal universal e gratuito**: a web. Agora que este canal está equipado com notificações push, os PWA GoodBarber permitem a você manter a linha de contato com os seus usuários web. ![Jerome Granados](https://blog.goodbarber.com/_public/profile/1b/1b6453892473a467d07372d45eb05abc2031647a-default.jpg) Sobre o autor[Jerome Granados](https://pt.goodbarber.com/blog/author/jerome-granados/)CMO Sou CMO e sócio da GoodBarber. Neste blog, compartilho dicas práticas para ajudar você a aproveitar ao máximo a GoodBarber, análises sobre as tendências que estão transformando o universo mobile e o no-code, além de algumas reflexões sobre o impacto da inteligência artificial em nosso setor. Se algum artigo despertar uma pergunta, uma ideia ou uma experiência para compartilhar, vamos conversar nos comentários. [Saiba mais](https://pt.goodbarber.com/blog/author/jerome-granados/) [![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://www.linkedin.com/in/jeromegranados/)[![X](https://portal.ww-cdn.com/portal_static/svg/base2021/x.820492c586dd.svg)](https://x.com/jeromegranados)[![Facebook](https://portal.ww-cdn.com/portal_static/svg/base2021/fb.be37c82b8283.svg)](https://www.facebook.com/jerome.granados)[![Instagram](https://portal.ww-cdn.com/portal_static/svg/base2021/instagram.e3b82841d5d7.svg)](https://www.instagram.com/jeromegranados/)[![Pinterest](https://portal.ww-cdn.com/portal_static/svg/base2021/pinterest.3ba400801cb2.svg)](https://www.pinterest.com/jeromegranados/)