Utilizando Push Notifications em páginas AMP

Aviso - Embora efetivamente o load da página seja menor é importante referir que as Push Notifications não funcionam em AMP ou até mesmo PWA 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>