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>
Encontrou sua resposta?