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>