Как мы реализовали push-уведомления на нашем сайте

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

Это не только вредит UX, но также является рискованным делом. Если пользователь блокирует возможность отправлять уведомления в самом начале, этот сайт больше не сможет запросить разрешение в дальнейшем (в Chrome).

Это не значит, что push-уведомления — плохая технология сама по себе. Если использовать её правильно, она предоставляет возможность связать пользователей с контентом, который им необходим.

Наш подход

Нам хотелось найти надежный способ использования push-уведомлений. В конце каждого поста в блоге мы показываем эти кнопки, чтобы дать возможность гостям сайта быть в курсе, когда добавляется новый пост.

Когда люди нажмут на кнопку подписки, браузер запросит разрешение:

В любой момент пользователи могут отключить уведомления на сайте.

А что под капотом

Это решение затрагивает как фронтенд, так и бэкенд. На фронтенде есть Service Worker, который слушает сообщения, даже когда пользователи не просматривают сайт. Тем временем бэкенд хранит подписки и отправляет сообщения на те браузеры, которые зарегистрированы в этих подписках.

Вместо того, чтобы разрабатывать это все самим с нуля, мы решили использовать сервис OneSignal. Он дает нам возможность безо всяких проблем отправлять сообщения, управлять подписками и не только.

OneSignal имеет дополнительную поддержку для Safari на macOS, который использует нестандартный способ отправки уведомлений. В итоге получаем такую поддержку браузерами:

Покажите код!

Документация OneSignal довольно хороша, но она не содержит наглядного примера для нашего подхода, так что давайте рассмотрим его в этой статье.

Сначала мы добавили OneSignal на наш сайт

 <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
    var OneSignal = window.OneSignal || [];
</script> 

Обратите внимание на атрибут async, который не даст скрипту блокировать отрисовку страницы. Все запросы, отправляемые OneSignal фактически являются асинхронными.

Инициализация

Следующим делом инициализируем OneSignal.

OneSignal.push(() => {
  OneSignal.init({
    appId: "",
    safari_web_id: '',
    autoRegister: false,
    allowLocalhostAsSecureOrigin: true,
    welcomeNotification: {
      title: '14islands',
      message: 'We will keep you posted!'
    },
    promptOptions: {},
    notifyButton: { enable: false }
  })
})

Мы получили app_id и safari_id в панели управления OneSignal, после создания там нового приложения.

Флаг allowLocalhostAsSecureOrigin: true устанавливает http://localhost и http://127.0.0.1 как безопасный источник. В production-режиме для уведомлений необходимо HTTPS-соединение для работы.

Стоит отметить, что вызов init больше одного раза выдаст ошибку.

Прогрессивное улучшение

Push-уведомления поддерживаются не всеми браузерами. Для тех, которые не поддерживают, мы просто показываем форму подписки на email-рассылку.

Подписка на email работает в любом браузере даже при отключенном JavaScript.

Далее мы проверяем, есть ли поддержка push-уведомлений, и в этом случае показываем соответствующую кнопку.

OneSignal.push(() => {
    this.showNotfications = OneSignal.isPushNotificationsSupported()
    if (this.showNotfications) {
        this.$context.addClass('show-notifications')
    }
})

В CSS класс show-notifications будет переключать внешний вид, чтобы были показаны обе кнопки.

Подписка

Когда пользователи кликнут на кнопку «Get Notification», они будут подписаны.

OneSignal.push(() => {
    OneSignal.registerForPushNotifications()
    OneSignal.setSubscription(true)
})

В этот момент отправляется приветственное уведомление. Это хороший способ показать пользователю, что теперь он получает уведомления.

В конструкторе у нас содежится такой код, чтобы проверять подписан ли пользователь и реагировать на изменения.

OneSignal.push(() => {
    // Проверяем подписан ли пользователь
    OneSignal.isPushNotificationsEnabled().then((isSubscribed) => {
        this.$context.toggleClass('is-subscribed-to-push', isSubscribed)
    })
    // Пользователь нажимает на кнопку подписки
    OneSignal.on('subscriptionChange', (isSubscribed) => {
        this.$context.toggleClass('is-subscribed-to-push', isSubscribed)
    })
})

В CSS класс is-subscribed-to-push будет показывать кнопку «Turn off Notification».

Отключение уведомлений

Пользователи отписываются, когда они кликают на кнопку «Turn off».

new window.Notification('14islands', {
    body: 'Notifications are now turned off.',
    icon: '/icons/android-chrome-192x192.png'
})
OneSignal.push(() => {
    OneSignal.setSubscription(false)
})

Мы отправляем уведомление при помощи обычного Notification API. Это полезно, чтобы дать понять пользователю, что он больше не подписан.

Обобщим

Пользователи должны проявить желание подписаться, прежде чем сайт будет запрашивать разрешение. Также при необходимости они должны иметь возможность без проблем отключить уведомления.

Статью перевел aziev. Оригинал на 14islands.com доступен по ссылке.