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

Push-уведомления в приложениях на базе Quasar реализуются через интеграцию с внешними сервисами доставки сообщений и нативными API платформ. В зависимости от целевой среды (SPA, PWA, Cordova, Capacitor, Electron) используются разные механизмы:

  • PWA — Web Push API + Service Worker
  • Мобильные приложения (Cordova / Capacitor) — Firebase Cloud Messaging (FCM) или аналогичные сервисы
  • Electron — системные уведомления через API платформы

Ключевые компоненты системы:

  • Клиентская часть (Quasar-приложение)
  • Service Worker (для PWA)
  • Push-сервис (например, FCM)
  • Сервер приложения (генерация и отправка уведомлений)

Подключение push-уведомлений в PWA режиме

Настройка Service Worker

Quasar автоматически генерирует Service Worker при использовании режима PWA. Для работы с push необходимо расширить файл:

/src-pwa/custom-service-worker.js

Пример обработки события push:

self.addEventListener('push', event => {
  const data = event.data.json()

  const options = {
    body: data.body,
    icon: 'icons/icon-128x128.png',
    badge: 'icons/icon-128x128.png',
    data: {
      url: data.url
    }
  }

  event.waitUntil(
    self.registration.showNotification(data.title, options)
  )
})

Обработка клика по уведомлению

self.addEventListener('notificationclick', event => {
  event.notification.close()

  const url = event.notification.data.url

  event.waitUntil(
    clients.openWindow(url)
  )
})

Регистрация подписки на push-уведомления

В клиентском коде (например, boot-файл Quasar):

async function subscribeUser () {
  const registration = await navigator.serviceWorker.ready

  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: '<VAPID_PUBLIC_KEY>'
  })

  return subscription
}

Ключевые моменты:

  • userVisibleOnly: true — обязательное требование браузеров
  • applicationServerKey — публичный VAPID ключ

VAPID ключи и безопасность

Для Web Push используется механизм VAPID (Voluntary Application Server Identification):

  • Генерируется пара ключей (публичный и приватный)
  • Публичный ключ используется на клиенте
  • Приватный — на сервере для подписи сообщений

Пример генерации (Node.js):

npx web-push generate-vapid-keys

Отправка push-уведомлений с сервера

Пример на Node.js с использованием библиотеки web-push:

const webpush = require('web-push')

webpush.setVapidDetails(
  'mailto:example@domain.com',
  VAPID_PUBLIC_KEY,
  VAPID_PRIVATE_KEY
)

const payload = JSON.stringify({
  title: 'Новое сообщение',
  body: 'У вас есть обновление',
  url: 'https://example.com'
})

webpush.sendNotification(subscription, payload)

Интеграция Firebase Cloud Messaging (FCM)

Для мобильных приложений Quasar (через Capacitor или Cordova) чаще используется FCM.

Установка плагина (Capacitor)

npm install @capacitor/push-notifications
npx cap sync

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

import { PushNotifications } from '@capacitor/push-notifications'

PushNotifications.requestPermissions().then(result => {
  if (result.receive === 'granted') {
    PushNotifications.register()
  }
})

Получение токена устройства

PushNotifications.addListener('registration', token => {
  console.log('Token:', token.value)
})

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

PushNotifications.addListener('pushNotificationReceived', notification => {
  console.log('Получено уведомление:', notification)
})

Обработка клика:

PushNotifications.addListener('pushNotificationActionPerformed', action => {
  console.log('Действие:', action)
})

Хранение токенов и подписок

Сервер должен хранить:

  • Push subscription (для Web Push)
  • Device token (для FCM)

Рекомендуется:

  • Привязывать к пользователю
  • Обновлять при каждом входе
  • Удалять устаревшие токены

Пример структуры:

{
  "userId": "123",
  "platform": "web",
  "subscription": { ... }
}

Работа с уведомлениями внутри интерфейса

Quasar предоставляет UI-утилиту Notify:

import { Notify } from 'quasar'

Notify.create({
  message: 'Новое сообщение',
  color: 'primary',
  position: 'top'
})

Сценарии использования:

  • Отображение уведомлений при активном приложении
  • Дублирование push-событий
  • Локальные уведомления

Локальные уведомления

Для мобильных приложений можно использовать локальные уведомления:

npm install @capacitor/local-notifications

Пример:

import { LocalNotifications } from '@capacitor/local-notifications'

await LocalNotifications.schedule({
  notifications: [
    {
      title: 'Напоминание',
      body: 'Проверить данные',
      id: 1,
      schedule: { at: new Date(Date.now() + 10000) }
    }
  ]
})

Управление разрешениями

Web

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    // можно подписываться
  }
})

Мобильные платформы

Разрешения обрабатываются через API плагинов (Capacitor / Cordova).

Особенности платформ

PWA

  • Требуется HTTPS
  • Ограничения в iOS (частичная поддержка)
  • Service Worker обязателен

Android (Capacitor / Cordova)

  • Полная поддержка FCM
  • Возможность фоновых уведомлений

iOS

  • Требует APNs (Apple Push Notification Service)
  • Дополнительная настройка сертификатов

Electron

Используются системные уведомления:

new Notification('Заголовок', {
  body: 'Текст уведомления'
})

Обработка состояний приложения

Push-уведомления ведут себя по-разному:

Состояние Поведение
Активное Обрабатывается в приложении
Фоновое Показывается системой
Закрыто Запускает приложение

Важно:

  • Обрабатывать переходы по уведомлению
  • Сохранять контекст (например, URL)

Глубокие ссылки (Deep Linking)

Push-уведомления часто содержат ссылку:

{
  "url": "/messages/42"
}

Обработка:

router.push(notification.data.url)

Оптимизация и best practices

Минимизация спама

  • Ограничение частоты отправки
  • Персонализация уведомлений

Размер payload

  • Не превышать лимиты (обычно ~4KB)

Fallback

  • Обработка отсутствия поддержки push

Сегментация

  • Отправка только релевантным пользователям

Отладка push-уведомлений

PWA

  • Chrome DevTools → Application → Service Workers
  • Проверка подписки:
navigator.serviceWorker.ready.then(reg => {
  reg.pushManager.getSubscription().then(console.log)
})

Firebase

  • Firebase Console → Cloud Messaging
  • Логи устройства

Типовые ошибки

1. Отсутствие HTTPS

  • Web Push не работает без защищённого соединения

2. Неверный VAPID ключ

  • Подписка не создаётся

3. Service Worker не зарегистрирован

  • push-события не обрабатываются

4. Токен устарел

  • уведомления не доходят

Расширенные возможности

Action-кнопки в уведомлениях

actions: [
  { action: 'open', title: 'Открыть' },
  { action: 'close', title: 'Закрыть' }
]

Группировка уведомлений

  • Используется tag:
tag: 'messages'

Silent push (ограниченно)

  • Обновление данных без отображения UI (не во всех браузерах)

Интеграция с backend-логикой

Push-уведомления часто используются вместе с:

  • системой событий
  • очередями (RabbitMQ, Kafka)
  • cron-задачами

Пример сценария:

  1. Пользователь получает новое сообщение
  2. Backend фиксирует событие
  3. Сервис отправляет push
  4. Клиент открывает нужный экран

Масштабирование

При большом количестве пользователей:

  • Используются очереди сообщений
  • Распараллеливание отправки
  • Кэширование подписок

Безопасность

  • Проверка подлинности пользователя перед привязкой токена
  • Защита API отправки уведомлений
  • Ограничение частоты запросов

UX-подходы

  • Отправка только значимых уведомлений
  • Понятные заголовки
  • Контекстные действия
  • Учет времени пользователя (таймзона)

Связь с экосистемой Quasar

Push-уведомления органично дополняют:

  • роутинг (Vue Router)
  • глобальное состояние (Pinia)
  • UI-компоненты (Notify, Dialog)

Это позволяет строить полноценные реактивные интерфейсы, синхронизированные с сервером в реальном времени.

Оглавление