Веб-пуши для AMP

AMP — это фреймворк Google с открытым исходным кодом для разработки ориентированных на пользователя веб-страниц, которые загружаются почти мгновенно.

Интегрировав компонент AMP Web Push в ваши AMP-страницы, вы сможете взаимодействовать с вашими клиентами, когда они просматривают веб-страницы в своих мобильных браузерах.

Интеграция AMP на ваш сайт

Добавьте следующие файлы в корневой каталог вашего сайта:

В файле 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>

Где:

{Subscribe to push notifications} — призыв к действию, предлагающий пользователям разрешить пуш-уведомления;
{Unblock push notifications in your browser settings} — призыв к действию, предлагающий пользователям разблокировать пуш-уведомления в настройках браузера (в случае, если пуш-уведомления были явно заблокированы пользователем).

Чтобы настроить внешний вид диалогового окна запроса разрешений, добавьте следующий код в тег <head>:

 <style amp-custom>
    .subscribe {
        /* ваш CSS здесь */
    }

    .blocked {
        /* ваш CSS здесь */
    }
</style>

Интеграция AMP Web Pushes

Чтобы реализовать веб-пуш-уведомления на AMP-страницах, добавьте компонент amp-web-push на каждую AMP-страницу.

Для этого выполните следующие два шага:

1. Добавьте следующий скрипт в тег <head>:

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

2. Добавьте следующий код в тег <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>
    ...
    <!-- Начало: кнопка подписки на уведомления -->
    <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>
    <!-- Конец: кнопка подписки на уведомления -->
    <!-- Начало: кнопка отписки от уведомлений -->
    <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>
    <!-- Конец: кнопка отписки от уведомлений -->
    <!-- Начало: резервный блок, если пользователь блокирует уведомления -->
    <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>
    <!-- Конец: резервный блок, если пользователь блокирует уведомления -->
...
</body>

Где:

{domain} — URL вашего сайта,
{applicationCode} — код вашего приложения Pushwoosh,
{senderId} — Sender ID из вашей консоли Firebase,
{applicationServerKey} — Server Key из вашей консоли Firebase,
{Text on Subscribe button} — текст на кнопке, включающей пуш-уведомления,
{Text on Unsubscribe button} — текст на кнопке, отключающей пуш-уведомления,
{Fallback if a user blocks notifications} — резервный блок, который отображается, когда пользователь блокирует пуш-уведомления.

Чтобы настроить стиль кнопок, добавьте следующий код в тег <head>:

<style amp-custom>
    amp-web-push-widget button.subscribe {
        /* ваш CSS здесь */
    }
    amp-web-push-widget button.unsubscribe {
        /* ваш CSS здесь */
    }
    amp-web-push-widget .fallback {
        /* ваш CSS здесь */
    }
</style>

Чтобы проверить, все ли вы сделали правильно, воспользуйтесь https://search.google.com/test/amp