As páginas AMP, ou Accelerated Mobile Pages, são um projeto do Google que consiste em servir uma versão mais leve do seu site para que o tempo de carregamento em celulares seja menor.
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.
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>