UseNotifications

1'use client';
2 
3import { useCallback, useEffect, useRef, useState } from 'react';
4 
5type NotificationPermission = 'default' | 'granted' | 'denied';
6 
7type NotificationOptions<TData = void> = {
8  body?: string;
9  icon?: string;
10  image?: string;
11  badge?: string;
12  tag?: string;
13  data?: TData;
14  requireInteraction?: boolean;
15  silent?: boolean;
16  sound?: string;
17  vibrate?: number | number[];
18  dir?: 'auto' | 'ltr' | 'rtl';
19  lang?: string;
20  renotify?: boolean;
21  sticky?: boolean;
22  timestamp?: number;
23  actions?: Array<{
24    action: string;
25    title: string;
26    icon?: string;
27  }>;
28};
29 
30type UseNotificationsReturn<TData = void> = {
31  permission: NotificationPermission;
32  requestPermission: () => Promise<NotificationPermission>;
33  showNotification: (
34    title: string,
35    options?: NotificationOptions<TData>,
36  ) => void;
37  isSupported: boolean;
38  isSecureContext: boolean;
39  supportsActions: boolean;
40  supportsBadge: boolean;
41  supportsImage: boolean;
42  supportsVibrate: boolean;
43  supportsSound: boolean;
44};
45 
46// Cache to store the result of the support check
47const supportCache = new Map<string, boolean>();
48 
49type NotificationFeature = 'actions' | 'badge' | 'image' | 'vibrate' | 'sound';
50 
51function checkFeatureSupport(feature: NotificationFeature): boolean {
52  if (supportCache.has(feature)) {
53    return supportCache.get(feature)!;
54  }
55 
56  const isSupported = feature in Notification.prototype;
57  supportCache.set(feature, isSupported);
58  return isSupported;
59}
60 
61export function useNotifications<
62  TData = void,
63>(): UseNotificationsReturn<TData> {
64  const [permission, setPermission] =
65    useState<NotificationPermission>('default');
66  const [isSupported, setIsSupported] = useState(false);
67  const [isSecureContext, setIsSecureContext] = useState(false);
68  const [supportsActions, setSupportsActions] = useState(false);
69  const [supportsBadge, setSupportsBadge] = useState(false);
70  const [supportsImage, setSupportsImage] = useState(false);
71  const [supportsVibrate, setSupportsVibrate] = useState(false);
72  const [supportsSound, setSupportsSound] = useState(false);
73 
74  // Using useRef to avoid recreating objects on each render
75  const notificationRef = useRef<Notification | null>(null);
76 
77  useEffect(() => {
78    const checkSupport = () => {
79      const hasNotification = 'Notification' in window;
80      const isSecure = window.isSecureContext;
81 
82      setIsSupported(hasNotification);
83      setIsSecureContext(isSecure);
84 
85      if (hasNotification) {
86// … truncated