Push уведомления

Push уведомления в Angular реализуются с помощью сервисов уведомлений, интеграции с Service Worker и API браузеров. Они позволяют информировать пользователя о событиях, даже если приложение не активно в данный момент.

Настройка Angular для Push

  1. Установка Service Worker Angular поддерживает Service Worker через пакет @angular/service-worker. Его активация позволяет приложению работать с push-сообщениями в фоне.

    ng add @angular/pwa

  2. Регистрация Service Worker В app.module.ts необходимо подключить модуль Service Worker:

    import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ]
})
export class AppModule {}

  3. Запрос разрешений на уведомления Для работы push необходимо получить разрешение от пользователя:

    Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    console.log('Разрешение получено');
  }
});

  4. Подписка на Push-уведомления Angular использует SwPush сервис для работы с подписками:

    import { SwPush } from '@angular/service-worker';

constructor(private swPush: SwPush) {}

subscribeToNotifications() {
  this.swPush.requestSubscription({
    serverPublicKey: 'PUBLIC_VAPID_KEY'
  }).then(subscription => {
    console.log('Подписка успешна', subscription);
  }).catch(err => console.error('Ошибка подписки', err));
}

Обработка входящих сообщений

SwPush предоставляет метод messages, который возвращает поток входящих уведомлений:

this.swPush.messages.subscribe(message => {
  console.log('Получено push-уведомление', message);
});

Ключевые аспекты безопасности

  • Все push-уведомления требуют использования VAPID ключей для аутентификации отправителя.
  • Обработка уведомлений на клиенте должна быть защищена от XSS и CSRF атак.
  • Рекомендуется хранить минимальный объем данных в push-сообщении, используя сервер для дальнейшей детализации.

Интеграция с UI

Push-уведомления могут быть связаны с компонентами Angular для отображения всплывающих сообщений в приложении:

this.swPush.messages.subscribe(message => {
  this.notificationService.show(message['title'], message['body']);
});

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

Оглавление