Push web para AMP

AMP é um framework de código aberto do Google para desenvolver páginas da web focadas no usuário que carregam quase instantaneamente.

Integrando o componente AMP Web Push em suas páginas da web AMP, você pode alcançar seus clientes enquanto eles navegam na web em seus navegadores móveis.

Integre o AMP ao seu site

Adicione os seguintes arquivos ao diretório raiz do seu site:

Existem dois blocos personalizáveis no arquivo permission-dialog.html:

<div class="subscribe" permission="default">
    <p class="message">
    {Subscribe to push notifications}
    </p>
</div>

<div class="blocked" permission="denied">
    <p class="message">
    {Unblock push notifications in your browser settings}
    </p>
</div>

Onde:

{Subscribe to push notifications} — uma mensagem de CTA pedindo aos usuários para permitir notificações push;
{Unblock push notifications in your browser settings} — uma mensagem de CTA solicitando que os usuários desbloqueiem as notificações push nas configurações do navegador (caso as notificações push sejam explicitamente bloqueadas por um usuário).

Para personalizar a aparência da caixa de diálogo de permissão, adicione o seguinte código à tag <head>:

 <style amp-custom>
    .subscribe {
        /* your css here */
    }

    .blocked {
        /* your css here */
    }
</style>

Integre os Pushes Web AMP

Para implementar notificações push da web em páginas AMP, adicione o componente amp-web-push a cada página AMP.

Para fazer isso, siga estes dois passos:

1. Adicione o seguinte script à tag <head>:

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

2. Adicione o seguinte código à tag <body>:

<body>
    <amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://{domain}/helper-iframe.html"
                 permission-dialog-url="https://{domain}/permission-dialog.html"
service-worker-url="https://{domain}/service-worker.js?applicationCode={applicationCode}&senderId={senderId}&applicationServerKey={applicationServerKey}"
    ></amp-web-push>
    ...
    <!-- Start Subscribe to notifications button -->
    <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
    <button class="subscribe" on="tap:amp-web-push.subscribe">
        {Text on Subscribe button}
    </button>
    </amp-web-push-widget>
    <!-- End the Subscribe to notifications button -->
    <!-- Start Unsubscribe from notifications button -->
    <amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
    <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">
        {Text on Unsubscribe button}
    </button>
    </amp-web-push-widget>
    <!-- End Unsubscribe from notifications button -->
    <!-- Start Fallback if a user blocks notifications -->
    <amp-web-push-widget visibility="blocked" layout="fixed" width="250" height="80">
    <div class="fallback">
            {Fallback if a user blocks notifications}
        </div>
    </amp-web-push-widget>
    <!-- End Fallback if a user blocks notifications -->
...
</body>

Onde:

{domain} — a URL do seu site,
{applicationCode} — o código do seu aplicativo Pushwoosh,
{senderId} — o Sender ID do seu console do Firebase,
{applicationServerKey} — a Server Key do seu console do Firebase,
{Text on Subscribe button} — um texto em um botão que ativa as notificações push,
{Text on Unsubscribe button} — um texto em um botão que desativa as notificações push,
{Fallback if a user blocks notifications} — um bloco de fallback que é exibido quando um usuário bloqueia as notificações push.

Para personalizar o estilo dos botões, adicione o seguinte código à tag <head>:

<style amp-custom>
    amp-web-push-widget button.subscribe {
        /* your css here */
    }
    amp-web-push-widget button.unsubscribe {
        /* your css here */
    }
    amp-web-push-widget .fallback {
        /* your css here */
    }
</style>

Para verificar se você fez tudo corretamente, por favor, use https://search.google.com/test/amp\