optimize notifications

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
+            };
+        }
+    }
 }

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() || [];

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 @@
           </div>
           <div class="w-full">
             <main class="w-full overflow-y-auto bg-default sm:p-4">
-              <!--
               <button on:click={handleNotificationClick}>
                 Send Notification
               </button>
-              -->
+
               <slot />
               <Toaster class="bg-[#1A1A27] text-white text-medium" />
               {#if Cookie && $showCookieConsent === true}

src/routes/api/get-notifications/+server.ts

@@ -1,16 +1,26 @@
 import type { RequestHandler } from "./$types";
 
-export const GET: RequestHandler = async ({ locals }) => {
+export const POST: RequestHandler = async ({ locals, request }) => {
   const { pb, user } = locals;
-
+ const data = await request.json();
   let output;
 
   try {
-    output = await pb?.collection("notifications")?.getFullList({
-      filter: `opUser="${user?.id}" `,
+
+    if (data?.readed === false) {
+        output = await pb?.collection("notifications")?.getFullList({
+      filter: `opUser="${user?.id}" && readed=False`,
       expand: "user",
       sort: "-created",
     });
+    } else {
+        output = await pb?.collection("notifications")?.getFullList({
+      filter: `opUser="${user?.id}"`,
+      expand: "user",
+      sort: "-created",
+    });
+    }
+  
   } catch (e) {
     console.log(e);
     output = [];

src/routes/notifications/+page.server.ts

@@ -8,11 +8,14 @@ export const load = async ({ locals, fetch }) => {
   }
 
   async function getNotifications() {
+
+    const postData = {'readed': true}
     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();