Advertencia : aunque la carga de la página en realidad es menor, es importante tener en cuenta que las notificaciones automáticas no funcionan en AMP de la misma manera que funcionan en las páginas "normales", así que no esperes una tasa de registro muy alta.
En esta guía, te enseñaremos cómo poner un botón de suscripción en tu página AMP.
Agrega el complemento web-push
En el bloque HEAD debes incluir el script web-push:
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
Luego, pon el siguiente código en BODY , reemplazando TU_DOMINIO_AQUÍ con el dominio real de tu sitio web y TU_APPID_AQUÍ con el ID de la aplicación de tu sitio web dentro de Pushnews (¿no sabes cómo? aprende aquí ):
<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>
Agregar los archivos necesarios
Descarga los archivos a continuación (haga clic con el botón derecho y seleccione "Guardar como...") y colóquelos en tu sitio web.
Deben ser accesibles en internet accediendo a las respectivas URL, por ejemplo: https://SEU_DOMINIO_AQUI/pushnews-sw.js
Añadir botón de suscripción
Dentro de BODY elige donde quieres mostrar el botón de suscripción en el 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) Agregar botón de cancelación
Opcionalmente puedes incluir un botón en BODY para darte de baja de Push. Este botón solo se mostrará para los usuarios que estén realmente suscritos:
<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>