diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:58 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:58 +0100 |
commit | 68fc8e96a9629e73469ed457abd955e548ec670c (patch) | |
tree | 8529ab9fe63d011f23c7f22ab5a4a1c5563fcaa4 /files/pt-br/web/api/push_api | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.gz translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.bz2 translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.zip |
unslug pt-br: move
Diffstat (limited to 'files/pt-br/web/api/push_api')
-rw-r--r-- | files/pt-br/web/api/push_api/best_practices/index.html | 73 | ||||
-rw-r--r-- | files/pt-br/web/api/push_api/index.html | 172 |
2 files changed, 245 insertions, 0 deletions
diff --git a/files/pt-br/web/api/push_api/best_practices/index.html b/files/pt-br/web/api/push_api/best_practices/index.html new file mode 100644 index 0000000000..9b0fafd2b7 --- /dev/null +++ b/files/pt-br/web/api/push_api/best_practices/index.html @@ -0,0 +1,73 @@ +--- +title: Melhores práticas +slug: Web/API/API_Push/Best_Practices +tags: + - Apps + - Iniciante + - Melhores Práticas + - Notificações + - Push API + - Usabilidade +translation_of: Web/API/Push_API/Best_Practices +--- +<p>{{draft}}</p> + +<p><span class="seoSummary">Este artigo proporciona um compilado das melhores práticas a serem usadas enquanto estiver desenvolvendo websites e aplicações que usem Notificações push para engajamento de usuários.</span></p> + +<blockquote> +<p>“Se feito de uma maneira correta, as notificações ajudam os usuarios, se não, so irritam.” — Conversa entre dois desenvolvedores a respeito da etica das notificações push.</p> +</blockquote> + +<h2 id="Visão_Geral_do_web_push_notifications">Visão Geral do <em>web push notifications</em></h2> + +<p><em>Notificações Web Push</em> (criadas usando uma combinação das APIs de <em><a href="/en-US/docs/Web/API/Notifications_API">Notificações</a></em>, <em><a href="/en-US/docs/Web/API/Push_API">Push</a></em> e <em><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a></em>) são parte de um movimento crescente em que desenvolvedores e comerciantes estão usando para conseguir atenção para seus sites. Uma procura rápida pelo termo "<em>web push notifications</em>", irá resultar em vários artigos, em que especialistas em marketing que acreditam que deve-se usar a API de Push para recapturar a atenção de pessoas que saíram de seu site para que possam terminar o que estavam fazendo, por exemplo, uma compra, ou então enviar as últimas notícias e até recomendação de produtos</p> + +<h3 id="O_Lado_obscuro">O Lado obscuro</h3> + +<p>Essa novidade oferece uma oportunidade nova e <span id="docs-internal-guid-5e44340f-7fff-f226-7820-a1cf35011ecf" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">inexplorada</span> para sites empresariais chegarem aos seus consumidores finais. Seu <span id="docs-internal-guid-c76c779d-7fff-d4b2-af33-b77f56148d66" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">usuário</span> trocou de aba para responder um email? Consiga-os de volta com uma oferta que expira em um tempo limitado ou <span id="docs-internal-guid-3522ff41-7fff-722b-9245-fb96096f525a" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">oferecendo</span> frete grátis, o qual ele não vai poder ignorar</p> + +<p>Mas <span id="docs-internal-guid-c3a7fd45-7fff-138e-d952-b7fb4778fda0" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">sério</span>, qual o melhor uso das notificações push? Ou é apenas uma nova interação dos bons e velhos pop-ups?</p> + +<blockquote> +<p>“<span class="tlid-translation translation" lang="pt"><span title="">O envio de notificações push não corre o risco de acabar na pasta de spam.</span> <span title="">Nem pode ser bloqueado por bloqueadores de anúncios.</span> <span title="">Ele aparece na sua área de trabalho, mesmo quando o site está fechado.</span> <span title="">No celular, ele aparece na barra de notificações, assim como as notificações por push do aplicativo, mesmo quando o navegador não está em execução</span></span>.” — um site de marketing anonimo</p> +</blockquote> + +<h3 id="Bons_usos_das_notificações">Bons usos das notificações</h3> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Mas há também um lado bom no que se diz respeito as notificações por push.</span> <span title="">Digamos que você e sua equipe usem normalmente um programa de bate-papo para se comunicar, mas hoje você está feliz e saltitante trabalhando e surge um problema.</span> <span title="">Digamos que seu gerente tenha encontrado um problema nas aprovações e queira receber seu feedback sobre algo antes que ela prossiga.</span></span></p> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Neste documento, falaremos sobre o uso correto das notificações por push da web.</span> <span title="">Às vezes, eles podem eliminar a frustração e o aborrecimento e, às vezes, causá-los. Cabe a você, como desenvolvedor, fazer recomendações (e decisões) sábias sobre o uso de notificações por push.</span></span></p> + +<h2 id="O_que_se_espera_alcançar_com_as_notificações_push">O que se espera alcançar com as notificações push?</h2> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Como tudo, com grande poder vem uma grande responsabilidade.</span> <span title="">Toda notificação push devem ser úteis e sensíveis ao tempo, o usuário sempre deve fornecer a permissão antes de recebe-la primeiro e deve-se oferecer uma maneira fácil de optar por não receber mais no futuro.</span></span></p> + +<p>Temos que responder algumas perguntas basicas para verificar se as notificações são necessarias:</p> + +<ul> + <li><span class="tlid-translation translation" lang="pt"><span title="">Existe alguém esperando em tempo real por uma resposta?</span> <span title="">No exemplo acima, o gerente aguarda sua resposta e, portanto, uma notificação por push é apropriada.</span></span></li> + <li><span class="tlid-translation translation" lang="pt"><span title="">A atualização em tempo real é necessária?</span> <span title="">Eu uso um serviço que agrega diferentes fontes de notícias de mídia social.</span> <span title="">Quando uma história em que estou interessado está em alta, gostaria de receber uma notificação!</span></span></li> + <li><span class="tlid-translation translation" lang="pt"><span title="">Há notícias de última hora relevantes?</span> <span title="">É aqui que fica um pouco complicado.</span> <span title="">Às vezes, os sites de notícias solicitam notificações por push para que possam dizer "Olhe para mim! Olhe para mim!"</span> <span title="">Tudo se resume ao que o usuário deseja, e você pode usar o comportamento para determinar a interação.</span> <span title="">Por exemplo, se o usuário visualizar mais de um artigo ou permanecer na sua página por vários minutos, ele poderá estar interessado em receber atualizações.</span></span></li> +</ul> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Além da questão de saber se uma notificação por push é necessária, existem muitas variedades de notificações por push, variando de casual e efêmera a persistente e exigente.</span></span></p> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Aconselhamos que você use as notificações que exigem uma interação de forma conciente e com moderação, pois estas podem irritar seu usuario e afasta-lo.</span> <span title="">Suas notificações devem ser acolhedoras, não hostis.</span></span></p> + +<h2 id="Gerando_confiança">Gerando confiança</h2> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Alguns estudos mostraram que até 60% das notificações por push não chegam ao usuário final.</span> <span title="">Permitir que seu usuario receba notificações por push em tempo real exige confiança, por parte do aplicativo.</span> <span title="">Você pode criar confiança ao ter um site bem projetado que forneça um bom conteúdo e que mostre respeito pelo usuário alem de um valor claro para que o usuario aceite as notificações push.</span></span></p> + +<h2 id="Mitigações_dos_navegadores">Mitigações dos navegadores</h2> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Por causa dos abusos da utilização das notificações por push no passado, os desenvolvedores de navegadores começaram a implementar estratégias para ajudar a mitigar esse problema.</span> <span title="">Por exemplo, o Safari 12.1 agora exige - e outros navegadores já o fazem ou estão planejando</span></span><sup><a href="#mitigations-footnote-1">[1]</a></sup> fazer—<span class="tlid-translation translation" lang="pt"><span title="">que o usuário interaja com a página de alguma forma antes que ela possa solicitar permissão para executar notificações por push, assim como já acontece com os popups.</span> <span title="">Isso pelo menos impede que o usuário receba espontaneamente essa pergunta em páginas da Web que apenas olharam de uma só vez, raramente ou nunca mais.</span></span></p> + +<p><a id="mitigations-footnote-1" name="mitigations-footnote-1">[1]</a> No caso do Firefox, veja {{bug(1524619)}}, podemos observar que Firefox 68 implementa isso, desabilitado por padrão, usando a preferência <code>dom.webnotifications.requireuserinteraction</code>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a></li> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> + <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li> +</ul> diff --git a/files/pt-br/web/api/push_api/index.html b/files/pt-br/web/api/push_api/index.html new file mode 100644 index 0000000000..563b711cd8 --- /dev/null +++ b/files/pt-br/web/api/push_api/index.html @@ -0,0 +1,172 @@ +--- +title: API Push +slug: Web/API/API_Push +tags: + - API + - Experimental + - Notificações + - Push + - Referencia + - Service Workers +translation_of: Web/API/Push_API +--- +<div>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</div> + +<p>A <strong>API Push </strong>torna possível que aplicações web recebam mensagens enviadas a elas de um servidor, indepententemente de aplicação estar ou não em primeiro plano, ou até mesmo carregada, em um agente de usuário. Isso permite que desenvolvedores entreguem notificações e atualizações assíncronas a usuários que optarem por elas, resultando num melhor engajamento com conteúdo novo oportuno.</p> + +<div class="note"> +<p><strong>Nota</strong>: Esta documentação cobre a especificação W3C da API Push; se você procura pela documentação do sistema de notificação proprietária do mecanismo push, veja<a href="/en-US/docs/Web/API/Simple_Push_API"> Simple Push</a>.</p> +</div> + +<h2 id="Conceitos_e_uso_de_Push">Conceitos e uso de Push</h2> + +<p>Para uma aplicação receber mensagens push, ela precisa ter um <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a> ativo. Quando o service worker está ativo, ele pode se inscrever para utilizar notificações push {{domxref("PushManager.subscribe()")}}.</p> + +<p>O resultado de {{domxref("PushSubscription")}} inclui toda informação que a aplicação precisa para receber uma mensagem push: um endpoint e a chave encriptada necessária para o envio de dados.</p> + +<p>O service worker será iniciado conforme o necessário para lidar com as mensagens recebidas, que são entregues ao manipulador de evento {{domxref("ServiceWorkerGlobalScope.onpush")}} . Isto permite que a aplicação reaja a cada mensagem recebida, por exemplo para exibir a notificação ao usuário (usando {{domxref("ServiceWorkerRegistration.showNotification()")}}.)</p> + +<p>Cada assinatura é única para um service worker. O endpoint para a assinatura é uma <a href="http://www.w3.org/TR/capability-urls/">capability URL</a> única: o conhecimento do endpoint é tudo que é necessário para enviar uma mensagem para sua aplicação. A URL do endpoint precisa ser mantida em segredo, ou outras aplicações estranhas poderão enviar mensagens push para a sua aplicação.</p> + +<p>A ativação de um service worker para entregar mensagens push pode resultar em um aumento de uso de recursos, particularmente de bateria. Diferentes navegadores tem diferentes formas para lidar com isso — atualmente não existe uma forma padrão. Firefox permite um número limitado (cota) de mensagens push para serem enviadas para uma aplicação, embora as mensagens Push que gerem notificações são isentas deste limite. O limite é atualizado a cada site visitado. Numa comparação, Chrome não aplica nenhum limite, mas requer que cada mensagem push exiba uma notificação.</p> + +<div class="note"> +<p><strong>Nota</strong>: A partir do Gecko 44, a cota permitida de mensagens push por aplicação não é incrementada quando uma nova notificação é disparada quando outra está visível, por um período de três segundos. Isso lida com casos em que várias notificações são recebidas ao mesmo tempo, mas nem todas estão visíveis.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Chrome atualmente requer que você crie um projeto no <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> para enviar mensagens push e use um número do projeto e chave da API para o envio de notificações push. Isto também requer um <em>app manifest</em> com alguns parâmetros especiais para usar o serviço. Essa restrição deverá ser removida no futuro.</p> +</div> + +<h2 id="Interfaces">Interfaces</h2> + +<dl> + <dt>{{domxref("PushEvent")}}</dt> + <dd>Representa uma ação push enviada para o <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">global scope</a> de um {{domxref("ServiceWorker")}}. Ele contém informações enviadas de uma aplicação para um {{domxref("PushSubscription")}}.</dd> + <dt>{{domxref("PushManager")}}</dt> + <dd>Fornece uma forma de receber notificações de servidor third-party bem como solicitar URL para notificações push. Essa interface substitui a funcionalidade oferecida que está obsoleta {{domxref("PushRegistrationManager")}} interface.</dd> + <dt>{{domxref("PushMessageData")}}</dt> + <dd>Fornece acesso aos dados push enviados por um servidor, e inclui métodos para manipular os dados recebidos.</dd> + <dt>{{domxref("PushSubscription")}}</dt> + <dd>Fornece a URL de assinatura do endpoint e permite o cancelamento da assinatura de um serviço push.</dd> +</dl> + +<h2 id="Service_worker_additions">Service worker additions</h2> + +<p>As seguintes informações adicionais para a <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> foram especificadas na Push API spec, para fornecer um ponto de entrada para usar mensagens Push, e para monitorar e responder os eventos de envio e assinatura.</p> + +<dl> + <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt> + <dd>Retorna uma referência para a interface {{domxref("PushManager")}} para administrar assinaturas push incluindo subscrever, obter uma assinatura ativa e acessar o status de permissão de envio. Este é o ponto de entrada para usar mensagens Push.</dd> + <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt> + <dd>Um manipulador de eventos disparado sempre que um evento {{Event("push")}} ocorre; isto é, sempre que uma mensagem do servidor de envio for recebida.</dd> + <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt> + <dd>Um manipulador de eventos disparado sempre que um evento {{Event("pushsubscriptionchange")}} ocorre; por exemplo, quando uma assinatura push está inválida, ou está prestes a ser invalidada (ex. quando um serviço push service define um tempo de expiração.)</dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName("Push API")}}</td> + <td>{{Spec2("Push API")}}</td> + <td>Definição Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_em_Browsers">Compatibilidade em Browsers</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(44.0)}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("PushEvent.data")}},<br> + {{domxref("PushMessageData")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(44.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>{{domxref("PushEvent.data")}},<br> + {{domxref("PushMessageData")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Atualmente disponível apenas nas versões desktop do Firefox; ainda, mensagens push são encaminhadas apenas quando o Firefox está em execução.</p> + +<p>[2] Ainda não implementado. Veja <a href="https://dev.modern.ie/platform/status/pushapi/">Microsoft Edge status information</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Usando Push API</a></li> + <li><a href="https://github.com/chrisdavidmills/push-api-demo">Push API Demo</a>, no Github</li> + <li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li> + <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> +</ul> |