Как использовать push-уведомления в Angular?

Как использовать push-уведомления в Angular?

@WebMentor


Оригинальная статья без перевода.


В этом посте мы рассмотрим полный пример того, как реализовать веб-push-уведомления в приложении Angular с помощью Angular Service Worker.

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

Эти уведомления могут отображаться пользователю даже в том случае, если все вкладки приложений закрыты, благодаря Service Workers! При правильном использовании Push-уведомления — отличный способ повторно вовлечь пользователей в наше приложение.

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

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

Серия Angular PWA

Обратите внимание, что этот пост является частью серии Angular PWA, вот полная серия:

Service Workers — практическое руководство (несколько примеров)

Angular App Shell — повышение производительности запуска приложения

Angular Service Worker — пошаговое руководство по превращению вашего приложения в PWA

Angular Push-уведомления — пошаговое руководство

Оглавление

В этом посте мы затронем следующие темы:

  • Как работают Push-уведомления?
  • Поставщики услуг push-уведомлений в браузере
  • Что такое пара ключей VAPID?
  • генерация пары ключей VAPID с помощью node webpush
  • Подписка на push-уведомления
  • снова показывает всплывающее окно «Разрешить/запретить уведомления»
  • Общие сведения об объекте PushSubscription и его свойствах
  • Как использовать Push-подписку?
  • Отправка push-уведомлений из серверной части узла
  • Push-уведомления в действии — демонстрация
  • Исходный код + пример запуска Github (полный Angular PWA) Итак, без лишних слов, давайте начнем изучать, как обрабатывать push-уведомления с помощью Angular Service Worker.

Введение в push-уведомления

То, что мы знаем как веб-push-уведомления, на самом деле основано на двух отдельных стандартах браузера:

Push API — это API, который позволяет отправлять сообщения с сервера в браузер (даже когда сайт не сфокусирован или браузер закрыт).

Notifications API: отображает собственные системные уведомления для пользователя.

Push API — это то, что позволяет передавать сообщение с сервера в браузер, а Notifications API — это то, что позволяет отображать сообщение, как только оно попадает в браузер.

Но обратите внимание, что мы не можем отправлять уведомления с нашего сервера напрямую в браузер пользователя. Вместо этого только определенные серверы, специально выбранные компаниями-разработчиками браузеров (например, Google, Mozilla и т. д.), смогут отправлять уведомления в данный браузер.

Эти серверы известны как служба Browser Push. Обратите внимание, что, например, служба Push, используемая Chrome, отличается от службы, используемой Firefox, и каждая служба Push находится под контролем соответствующей компании-браузера.

Поставщики услуг push-уведомлений в браузере

Как мы иногда видим в Интернете, Push-уведомления могут быть очень разрушительными для пользователя, и разработчики браузеров хотят, чтобы пользователи браузера всегда имели хороший опыт работы в Интернете.

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

Браузеры, такие как Chrome или Firefox, гарантируют, что Push-сообщения не вызовут проблем с пользовательским интерфейсом, и направляют все push-сообщения через серверы, находящиеся под их контролем.

Например, в случае с браузером Chrome все Push-сообщения приходят в браузер через службу Firebase Cloud Messaging, а НЕ напрямую с нашего сервера приложений.

В этом случае Firebase Cloud Messaging действует как служба push-уведомлений браузера Chrome. Служба push-уведомлений, используемая каждым браузером, не может быть изменена и определяется поставщиком браузера.

Чтобы иметь возможность доставить сообщение данному пользователю и только этому пользователю, служба Push идентифицирует пользователя анонимно, обеспечивая конфиденциальность пользователя. Кроме того, Push-сервис не знает содержимого сообщений, так как они зашифрованы.

Давайте тогда пройдемся по всему жизненному циклу конкретного сообщения, чтобы детально понять, как все работает. Мы начнем с уникальной идентификации нашего сервера и узнаем, почему это важно.

Зачем идентифицировать наш сервер как источник Push?

Первое, что мы должны сделать, это однозначно идентифицировать наш сервер для нескольких доступных Browser Push Services.

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

Затем мы начнем с уникальной идентификации нашего сервера приложений с помощью пары ключей VAPID.

Что такое пара ключей VAPID?

VAPID означает добровольную идентификацию сервера приложений для протокола Web Push. Пара ключей VAPID — это криптографическая пара открытого и закрытого ключей, которая используется следующим образом:

открытый ключ используется в качестве уникального идентификатора сервера для подписки пользователя на уведомления, отправляемые этим сервером

; закрытый ключ должен храниться в секрете (в отличие от открытого ключа) и использоваться сервером приложений для подписи сообщений перед их отправкой на сервер. Push-сервис для доставки.

Генерация пары ключей VAPID с помощью узла web-push

Начнем с создания ключа VAPID с помощью библиотеки node webpush. Сначала мы установим библиотеку webpush глобально, как инструмент командной строки:

npm install web-push -g


Затем мы можем сгенерировать пару ключей VAPID с помощью следующей команды:

web-push generate-vapid-keys --json


Используя эту команду, вот как выглядит пара ключей VAPID:

{
  "publicKey":"BLBx-hf2WrL2qEa0qKb-aCJbcxEvyn62GDTyyP9KTS5K7ZL0K7TfmOKSPqp8vQF0DaG8hpSBknz_x3qf5F4iEFo",
  "privateKey":"PkVHOUKgY29NM7myQXXoGbp_bH_9j-cxW5cO-fGcSsA"
}


Подписка на push-уведомления

Первое, что нам понадобится, это Angular Service Worker, и для этого вот руководство о том, как добавить его в существующее приложение Angular.

После того, как у нас установлен Angular Service Worker, мы можем запросить разрешение пользователя на отправку push-уведомлений:

@Component({
    selector: 'app-root',
    template: `
        <button class="button button-primary" (click)="subscribeToNotifications()">
          Subscribe
        </button>
`})
export class AppComponent {

    readonly VAPID_PUBLIC_KEY = "BLBx-hf2WrL2qEa0qKb-aCJbcxEvyn62GDTyyP9KTS5K7ZL0K7TfmOKSPqp8vQF0DaG8hpSBknz_x3qf5F4iEFo";

    constructor(
        private swPush: SwPush,
        private newsletterService: NewsletterService) {}

    subscribeToNotifications() {

        this.swPush.requestSubscription({
            serverPublicKey: this.VAPID_PUBLIC_KEY
        })
        .then(sub => this.newsletterService.addPushSubscriber(sub).subscribe())
        .catch(err => console.error("Could not subscribe to notifications", err));
    }
}


Давайте разберем, что происходит в этом примере кода:

  • пользователь нажимает кнопку «Подписаться», и выполняется метод subscribeToNotifications().
  • используя службу swPush, мы собираемся спросить пользователя, разрешает ли он нашему серверу (идентифицированному открытым ключом VAPID) отправлять ему сообщения Web Push.
  • метод requestSubscription() возвращает Promise, который выдает объект push-подписки, если пользователь разрешает уведомления
  • Затем пользователь увидит всплывающее окно браузера с просьбой разрешить или отклонить запрос:
  • Всплывающее окно с push-уведомлениями


  • если пользователь принимает запрос, обещание, возвращаемое requestSubscription(), будет успешно оценено, и объект push-подписки будет передан в .then()

Снова отображается всплывающее окно «Разрешить/запретить уведомления»

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

Вместо этого обещание будет отклонено, и сработает блок catch в нашем примере кода выше.

Вот что нам нужно сделать, чтобы всплывающее окно снова отображалось:

  • зайдите в хром://настройки/контент/уведомления
  • прокрутите вниз список заблокированных, содержащий все веб-сайты, которым запрещено отправлять push-уведомления.
  • удалить локальный хост из черного списка
  • Нажмите кнопку «Подписаться» еще раз
  • Всплывающее окно должно появиться снова, и если мы нажмем кнопку «Разрешить», будет создан объект Push Subscription.

Объект PushSubscription

Вот как выглядит объект push-подписки, полученный в предложении then():

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/cbx2QC6AGbY:APA91bEjTzUxaBU7j-YN7ReiXV-MD-bmk2pGsp9ZVq4Jj0yuBOhFRrUS9pjz5FMnIvUenVqNpALTh5Hng7HRQpcUNQMFblTLTF7aw-yu1dGqhBOJ-U3IBfnw3hz9hq-TJ4K5f9fHLvjY",
  "expirationTime": null,
  "keys": {
    "p256dh": "BOXYnlKnMkzlMc6xlIjD8OmqVh-YqswZdut2M7zoAspl1UkFeQgSLYZ7eKqKcx6xMsGK7aAguQbcG9FMmlDrDIA=",
    "auth": "if-YFywyb4g-bFB1hO9WMw=="
  }
}


просмотреть raw03.ts, размещенный с помощью ❤ на GitHub

Давайте теперь разберем содержимое объекта подписки, так как это поможет нам лучше понять, как работают push-уведомления в целом:

  • конечная точка: содержит уникальный URL-адрес конечной точки Firebase Cloud Messaging. Этот URL-адрес является общедоступной, но неуловимой конечной точкой для службы push-уведомлений браузера, используемой сервером приложений для отправки push-уведомлений в эту подписку.
  • expireTime: некоторые сообщения чувствительны ко времени, и их не нужно отправлять, если прошел определенный интервал времени. Это полезно в некоторых случаях, например, если сообщение может содержать код аутентификации, срок действия которого истекает через 1 минуту.
  • p256dh: это ключ шифрования, который наш сервер будет использовать для шифрования сообщения перед его отправкой в ​​Push-сервис.
  • auth: это секрет аутентификации, который является одним из входных данных процесса шифрования содержимого сообщения. Вся информация, представленная в объекте подписки, необходима для возможности отправки push-уведомлений этому пользователю.


Report content on this page

Report Page

Please submit your DMCA takedown request to dmca@telegram.org