Passar para o conteúdo principal

Como utilizar Notifications em páginas AMP?

AMP é um projeto do Google que oferece uma versão mais leve do seu site, permitindo que ele carregue mais rápido.

Suporte avatar
Escrito por Suporte
Atualizado hoje

Atenção - Embora o carregamento da página seja mais rápido, as Push Notifications não funcionam em AMP (ou PWA) da mesma forma que em páginas “normais”. Portanto, não espere uma taxa de inscrições tão alta.

⚠️Ressaltamos que o convite nativo não funciona em páginas AMP, só é possível usar o convite em dois passos.

Neste guia, vamos mostrar como colocar um botão de inscrição Push na sua página AMP.

1️⃣ Adicione o plugin Web Push

No bloco HEAD, inclua o script web-push: 

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

2️⃣ Adicione o script no BODY

No bloco BODY da sua página, insira o seguinte código.
Substitua:

  • SEU_DOMINIO_AQUI → pelo domínio real do seu website

  • SEU_APPID_AQUI → pelo App ID do seu site dentro do Pushnews

Não sabe como encontrar essas informações? 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>

3️⃣ Adicione os arquivos necessários

  1. Baixe os arquivos abaixo (clique com o botão direito e escolha “Salvar como…”):

    • pushnews-sw.js

    • amp-web-push-helper-frame.html

    • amp-web-push-permission-dialog.html
      ​

  2. Coloque-os no seu website.

Eles precisam estar acessíveis na internet através das URLs correspondentes, por exemplo:
​https://SEU_DOMINIO_AQUI/pushnews-sw.js

4️⃣ Adicione o botão de inscrição

No bloco BODY, escolha o local onde você quer exibir o botão de inscrição Push na sua página.
​
💡Dica: posicione o botão em um lugar visível e estratégico para aumentar as chances de inscrição dos usuários.

<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>

5️⃣ Adicione o botão para cancelamento de Push (opcional)

Você também pode incluir um botão no bloco BODY para permitir que os usuários cancelem a inscrição nas Push Notifications.
​

💡Observação: este botão só será exibido para usuários que já 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?