Todas as coleções
Push Notifications
Utilizando Push Notifications em páginas AMP
Utilizando Push Notifications em páginas AMP

As AMP são um projeto do Google que consiste em servir uma versão mais leve do seu site para que o tempo de carregamento seja menor

Kely Galante avatar
Escrito por Kely Galante
Atualizado há mais de uma semana

Aviso - Embora efetivamente o load da página seja menor é importante referir que as Push Notifications não funcionam em AMP da mesma forma que funcionam em páginas "normais", então não espere uma taxa de inscrições muito elevada (ressaltamos que o convite nativo não funciona em páginas AMP, usufruindo apenas do convite em dois passos).

Nesse guia vamos te ensinar a colocar um botão de inscrição Push na sua página AMP.

Adicione o web-push plugin

No bloco HEAD você deve incluir o script web-push:

<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

De seguida, coloque o seguinte código no BODY, substituindo SEU_DOMINIO_AQUI pelo domínio real do seu website e SEU_APPID_AQUI pelo App Id do seu Site dentro do Pushnews (não sabe como? aprenda aqui):

<amp-web-push
id="amp-web-push"
layout="nodisplay"
helper-iframe-url="https://SEU_DOMINIO_AQUI/amp-web-push-helper-frame.html?appId=SEU_APPID_AQUI"
permission-dialog-url="https://SEU_DOMINIO_AQUI/amp-web-push-permission-dialog.html?appId=SEU_APPID_AQUI"
service-worker-url="https://SEU_DOMINIO_AQUI/pushnews-sw.js?appId=SEU_APPID_AQUI"
service-worker-scope="https://SEU_DOMINIO_AQUI/">
</amp-web-push>

Adicione os arquivos necessários

Baixe os arquivos abaixo (clique do lado direito e faça "Salvar como..."), e coloque eles no seu website.

Eles têm que ficar acessíveis na internet acessando as respectivas URLs, exemplo: https://SEU_DOMINIO_AQUI/pushnews-sw.js

Adicione o botão de inscrição

Dentro do BODY escolha onde você quer exibir o botão de inscrição nas Push:

<amp-web-push-widget
visibility="unsubscribed"
layout="fixed"
width="500"
height="70">
<button on="tap:amp-web-push.subscribe">
Receber Notificações Push
</button>
</amp-web-push-widget>

(opcional) Adicione o botão para cancelamento de push

Opcionalmente você pode incluir um botão no BODY para cancelar a inscrição nas Push. Este botão só será exibido para usuários que estão efetivamente inscritos:

<amp-web-push-widget
visibility="subscribed"
layout="fixed"
width="500"
height="180">
<button on="tap:amp-web-push.unsubscribe">
Cancelar Notifications Push
</button>
</amp-web-push-widget>
Respondeu à sua pergunta?