Frontend:
- Установлен Sonner для toast уведомлений
- Создан Service Worker (public/sw.js) для Web Push
- Реализован хук useWebPush для управления подписками
- Добавлены утилиты Web Push (lib/push.ts)
- Создан компонент NotificationCenter с UI
- Интегрирован в AppShell (header desktop + mobile)
- Добавлен Toaster в Providers
API методы:
- getVapidPublicKey() - получение VAPID ключа
- subscribePush() - создание подписки
- unsubscribePush() - удаление подписки
- getPushSubscriptions() - список подписок
Возможности:
- � Web Push (работают даже когда вкладка закрыта)
- � NotificationCenter с badge и историей
- � Toast уведомления (Sonner)
- ⚙️ Настройки push подписок
- � Респонсивный дизайн
Документация: frontend/NOTIFICATIONS_IMPLEMENTATION.md
154 lines
4.6 KiB
TypeScript
154 lines
4.6 KiB
TypeScript
/**
|
|
* Web Push утилиты для управления подписками
|
|
*/
|
|
|
|
/**
|
|
* Конвертирует base64 строку в Uint8Array для applicationServerKey
|
|
*/
|
|
export function urlBase64ToUint8Array(base64String: string): Uint8Array {
|
|
const padding = '='.repeat((4 - base64String.length % 4) % 4);
|
|
const base64 = (base64String + padding)
|
|
.replace(/-/g, '+')
|
|
.replace(/_/g, '/');
|
|
|
|
const rawData = window.atob(base64);
|
|
const outputArray = new Uint8Array(rawData.length);
|
|
|
|
for (let i = 0; i < rawData.length; ++i) {
|
|
outputArray[i] = rawData.charCodeAt(i);
|
|
}
|
|
|
|
return outputArray;
|
|
}
|
|
|
|
/**
|
|
* Проверяет поддержку Web Push браузером
|
|
*/
|
|
export function isPushSupported(): boolean {
|
|
if (typeof window === 'undefined') return false;
|
|
|
|
if (!('serviceWorker' in navigator)) {
|
|
console.warn('[PushNotifications] Service Worker не поддерживается');
|
|
return false;
|
|
}
|
|
if (!('PushManager' in window)) {
|
|
console.warn('[PushNotifications] Push API не поддерживается');
|
|
return false;
|
|
}
|
|
if (!('Notification' in window)) {
|
|
console.warn('[PushNotifications] Notification API не поддерживается');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Получает текущее разрешение на уведомления
|
|
*/
|
|
export function getNotificationPermission(): NotificationPermission {
|
|
if (typeof window === 'undefined' || !('Notification' in window)) {
|
|
return 'default';
|
|
}
|
|
return Notification.permission;
|
|
}
|
|
|
|
/**
|
|
* Запрашивает разрешение на уведомления
|
|
*/
|
|
export async function requestNotificationPermission(): Promise<NotificationPermission> {
|
|
if (typeof window === 'undefined' || !('Notification' in window)) {
|
|
return 'default';
|
|
}
|
|
|
|
return await Notification.requestPermission();
|
|
}
|
|
|
|
/**
|
|
* Регистрирует Service Worker
|
|
*/
|
|
export async function registerServiceWorker(): Promise<ServiceWorkerRegistration> {
|
|
if (!('serviceWorker' in navigator)) {
|
|
throw new Error('Service Worker не поддерживается');
|
|
}
|
|
|
|
const registration = await navigator.serviceWorker.register('/sw.js', {
|
|
scope: '/'
|
|
});
|
|
|
|
console.log('[PushNotifications] Service Worker зарегистрирован:', registration.scope);
|
|
|
|
// Ждем активации
|
|
if (registration.installing) {
|
|
await new Promise<void>((resolve) => {
|
|
registration.installing!.addEventListener('statechange', (e) => {
|
|
if ((e.target as ServiceWorker).state === 'activated') {
|
|
resolve();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
return registration;
|
|
}
|
|
|
|
/**
|
|
* Получает или создает push подписку
|
|
*/
|
|
export async function subscribeToPush(
|
|
registration: ServiceWorkerRegistration,
|
|
vapidPublicKey: string
|
|
): Promise<PushSubscription> {
|
|
const applicationServerKey = urlBase64ToUint8Array(vapidPublicKey);
|
|
|
|
const subscription = await registration.pushManager.subscribe({
|
|
userVisibleOnly: true,
|
|
applicationServerKey: applicationServerKey as BufferSource
|
|
});
|
|
|
|
console.log('[PushNotifications] Push подписка создана');
|
|
return subscription;
|
|
}
|
|
|
|
/**
|
|
* Отписывается от push уведомлений
|
|
*/
|
|
export async function unsubscribeFromPush(
|
|
registration: ServiceWorkerRegistration
|
|
): Promise<boolean> {
|
|
const subscription = await registration.pushManager.getSubscription();
|
|
|
|
if (!subscription) {
|
|
return false;
|
|
}
|
|
|
|
const success = await subscription.unsubscribe();
|
|
console.log('[PushNotifications] Push подписка удалена');
|
|
return success;
|
|
}
|
|
|
|
/**
|
|
* Получает текущую push подписку
|
|
*/
|
|
export async function getCurrentSubscription(
|
|
registration: ServiceWorkerRegistration
|
|
): Promise<PushSubscription | null> {
|
|
return await registration.pushManager.getSubscription();
|
|
}
|
|
|
|
/**
|
|
* Конвертирует PushSubscription в формат для отправки на сервер
|
|
*/
|
|
export function serializeSubscription(subscription: PushSubscription) {
|
|
const key = subscription.getKey('p256dh');
|
|
const token = subscription.getKey('auth');
|
|
|
|
return {
|
|
endpoint: subscription.endpoint,
|
|
keys: {
|
|
p256dh: key ? btoa(String.fromCharCode(...new Uint8Array(key))) : '',
|
|
auth: token ? btoa(String.fromCharCode(...new Uint8Array(token))) : ''
|
|
}
|
|
};
|
|
}
|