diff --git a/src/lib/notifications.ts b/src/lib/notifications.ts index ab781dad..7bd1f0b1 100644 --- a/src/lib/notifications.ts +++ b/src/lib/notifications.ts @@ -1,3 +1,4 @@ +import { goto } from '$app/navigation'; export async function requestNotificationPermission() { // Check if the browser supports notifications @@ -19,12 +20,27 @@ export async function requestNotificationPermission() { } } -export function sendNotification(title: string, options?: NotificationOptions & { iconSize?: number }) { - // Only send if permission is granted - if (Notification.permission === 'granted') { - new Notification(title, { - icon: "/pwa-192x192.png", // Use the imported image directly - ...options - }); - } + +export function sendNotification( + title: string, + options?: NotificationOptions & { iconSize?: number; url?: string } +) { + // Only send if permission is granted + if (Notification.permission === 'granted') { + // Extract custom properties and remaining NotificationOptions + const { iconSize, url, ...notificationOptions } = options || {}; + + const notification = new Notification(title, { + icon: "/pwa-192x192.png", + ...notificationOptions // Spread only valid NotificationOptions + }); + + // Navigate when the notification is clicked + if (url) { + notification.onclick = () => { + window.focus(); // Ensure the window is focused + goto(url); // Client-side navigation + }; + } + } } \ No newline at end of file diff --git a/src/lib/workers/notificationWorker.ts b/src/lib/workers/notificationWorker.ts index f680e241..90de5f2e 100644 --- a/src/lib/workers/notificationWorker.ts +++ b/src/lib/workers/notificationWorker.ts @@ -1,11 +1,13 @@ // lib/workers/test.ts async function loadNotifications() { + const postData = {'readed': false} const response = await fetch("/api/get-notifications", { - method: "GET", + method: "POST", headers: { "Content-Type": "application/json", }, + body: JSON.stringify(postData) }); const output = await response?.json() || []; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index ad71bdf2..8d1d8d13 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -51,12 +51,11 @@ import AudioLine from "lucide-svelte/icons/audio-lines"; import Gem from "lucide-svelte/icons/gem"; import stocknear_logo from "$lib/images/stocknear_logo.png"; - /* + import { requestNotificationPermission, sendNotification, } from "$lib/notifications"; -*/ export let data; @@ -96,21 +95,21 @@ //pushNotification() }; - /* // Send notification and handle click redirection async function handleNotificationClick() { const permissionGranted = await requestNotificationPermission(); if (permissionGranted) { sendNotification("Stocknear", { - body: "This is a detailed notification message", - iconSize: 12, // Smaller logo size + body: "Celestica shares are trading higher following better-than-expected Q4 financial results and Q1 guidance issued above estimates.", + iconSize: 12, + url: "/notifications", }); } } //Check Service Worker (SW) - + /* async function detectSWUpdate() { try { const registration = await navigator.serviceWorker.ready; @@ -1216,11 +1215,10 @@