100 lines
2.5 KiB
TypeScript
100 lines
2.5 KiB
TypeScript
import { useState, useEffect, useCallback, useRef } from "react";
|
|
|
|
import { useLocalSettings } from "../settings";
|
|
|
|
interface NotificationOptions {
|
|
body?: string;
|
|
icon?: string;
|
|
badge?: string;
|
|
tag?: string;
|
|
data?: unknown;
|
|
requireInteraction?: boolean;
|
|
silent?: boolean;
|
|
}
|
|
|
|
interface UseNotificationReturn {
|
|
permission: NotificationPermission;
|
|
isSupported: boolean;
|
|
requestPermission: () => Promise<NotificationPermission>;
|
|
showNotification: (title: string, options?: NotificationOptions) => void;
|
|
}
|
|
|
|
export function useNotification(): UseNotificationReturn {
|
|
const [permission, setPermission] =
|
|
useState<NotificationPermission>("default");
|
|
const [isSupported, setIsSupported] = useState(false);
|
|
|
|
const lastNotificationTime = useRef<Date>(new Date());
|
|
|
|
useEffect(() => {
|
|
// Check if browser supports Notification API
|
|
if ("Notification" in window) {
|
|
setIsSupported(true);
|
|
setPermission(Notification.permission);
|
|
}
|
|
}, []);
|
|
|
|
const requestPermission =
|
|
useCallback(async (): Promise<NotificationPermission> => {
|
|
if (!isSupported) {
|
|
console.warn("Notification API is not supported in this browser");
|
|
return "denied";
|
|
}
|
|
|
|
const result = await Notification.requestPermission();
|
|
setPermission(result);
|
|
return result;
|
|
}, [isSupported]);
|
|
|
|
const [settings] = useLocalSettings();
|
|
|
|
const showNotification = useCallback(
|
|
(title: string, options?: NotificationOptions) => {
|
|
if (!isSupported) {
|
|
console.warn("Notification API is not supported");
|
|
return;
|
|
}
|
|
|
|
if (!settings.notification.enabled) {
|
|
console.warn("Notification is disabled");
|
|
return;
|
|
}
|
|
|
|
if (
|
|
new Date().getTime() - lastNotificationTime.current.getTime() <
|
|
1000
|
|
) {
|
|
console.warn("Notification sent too soon");
|
|
return;
|
|
}
|
|
lastNotificationTime.current = new Date();
|
|
|
|
if (permission !== "granted") {
|
|
console.warn("Notification permission not granted");
|
|
return;
|
|
}
|
|
|
|
const notification = new Notification(title, options);
|
|
|
|
// Optional: Add event listeners
|
|
notification.onclick = () => {
|
|
console.log("Notification clicked");
|
|
window.focus();
|
|
notification.close();
|
|
};
|
|
|
|
notification.onerror = (error) => {
|
|
console.error("Notification error:", error);
|
|
};
|
|
},
|
|
[isSupported, settings.notification.enabled, permission],
|
|
);
|
|
|
|
return {
|
|
permission,
|
|
isSupported,
|
|
requestPermission,
|
|
showNotification,
|
|
};
|
|
}
|