From 06a66d201a6591a6d8d1e0fd2e6714efa8f9099e Mon Sep 17 00:00:00 2001 From: Vishal Date: Mon, 26 Aug 2024 17:07:25 +0530 Subject: [PATCH 1/4] add save subs script Signed-off-by: Vishal --- public/notification-service.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/public/notification-service.js b/public/notification-service.js index acda637..a420201 100644 --- a/public/notification-service.js +++ b/public/notification-service.js @@ -19,7 +19,7 @@ function urlB64ToUint8Array(base64String) { service_worker.addEventListener("activate", async () => { console.log("Hello from service worker"); try { - /** @type {PushSubscriptionOptionsInit} */ + /** @type {PushSubscriptionOptions} */ const options = { applicationServerKey: "BCOsRaxpJeR0KyIPIg1rHx3pUtWVsGDGOxH65dDkqyU5ycF-CjPJxuqiXF4M0LpUMG_rk_YxSZX34uHbrV5umJQ", @@ -30,8 +30,21 @@ service_worker.addEventListener("activate", async () => { const subscription = await service_worker.registration.pushManager.subscribe(options); - console.log("Subscription", subscription); - console.log(JSON.stringify(subscription)); + let subscribe_json = subscription.toJSON(); + console.log("Subscription", subscribe_json); + + const body = JSON.stringify(subscribe_json); + + await fetch("https://team-dev.dtutimes.com/api/v1/notification/subscribe", { + method: "POST", + body, + headers: { + "Content-Type": "application/json", + }, + }) + .then((res) => res.text()) + .then(console.log) + .catch(console.error); } catch (err) { console.log("Error", err); } From c74da2dec93b9562c7286f9d40d8590bf1e1533e Mon Sep 17 00:00:00 2001 From: Vishal Date: Mon, 26 Aug 2024 17:14:53 +0530 Subject: [PATCH 2/4] added dummy push event Signed-off-by: Vishal --- public/notification-service.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/public/notification-service.js b/public/notification-service.js index a420201..6d8a725 100644 --- a/public/notification-service.js +++ b/public/notification-service.js @@ -49,3 +49,24 @@ service_worker.addEventListener("activate", async () => { console.log("Error", err); } }); + +service_worker.addEventListener("push", function (event) { + if (event.data) { + console.log(event.data.text()); + pushNotification("Hi", event.data.text(), service_worker.registration); + } else { + console.log("No data!"); + } +}); + +/** + * @param title {string} + * @param body {string} + * @param swRegistration {ServiceWorkerRegistration} + */ +const pushNotification = (title, body, swRegistration) => { + const options = { + body, + }; + swRegistration.showNotification(title, options); +}; From dcfb2d14e41a20701c1d3272b1c18303e42891e0 Mon Sep 17 00:00:00 2001 From: Vishal Date: Mon, 26 Aug 2024 18:05:32 +0530 Subject: [PATCH 3/4] undo temp change to hide console logs Signed-off-by: Vishal --- vite.config.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/vite.config.ts b/vite.config.ts index 9235e3a..d2146d5 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -12,11 +12,11 @@ export default defineConfig({ }, }, esbuild: { - // drop: - // process.env.NODE_ENV == "production" - // ? ["console", "debugger"] - // : undefined, - // pure: ["console.error"], + drop: + process.env.NODE_ENV == "production" + ? ["console", "debugger"] + : undefined, + pure: ["console.error"], }, build: { rollupOptions: { From 324ca154310c48b16879b54e1da4802defe94524 Mon Sep 17 00:00:00 2001 From: Vishal Date: Mon, 26 Aug 2024 18:20:48 +0530 Subject: [PATCH 4/4] update notif engine Signed-off-by: Vishal --- src/pages/Notification/index.tsx | 48 +++++++--------- src/pages/Notification/notification-engine.ts | 56 +++++++++---------- 2 files changed, 44 insertions(+), 60 deletions(-) diff --git a/src/pages/Notification/index.tsx b/src/pages/Notification/index.tsx index b373e32..cc3f3c5 100644 --- a/src/pages/Notification/index.tsx +++ b/src/pages/Notification/index.tsx @@ -3,7 +3,11 @@ import { ErrorContext } from "@/contexts/error"; import API from "@/services/API"; import { INotification } from "@/types/notification"; import React, { useEffect, useState } from "react"; -import { Notification, BgService } from "./notification-engine"; +import { + setup_notification, + disable_notification, + setup_present, +} from "./notification-engine"; interface NotificationCardProps { notif: INotification; @@ -57,8 +61,11 @@ export default function NotificationPage() { const { setError } = React.useContext(ErrorContext); const [notifications, setNotifs] = useState(null); + const [status, setStatus] = useState(false); useEffect(() => { + setup_present().then(setStatus); + const notifications = "/notification"; API.get(notifications) .then((response) => { @@ -80,34 +87,17 @@ export default function NotificationPage() { return (

Latest Updates

- - - - +
+ {status ? ( + + ) : ( + + )} +
{notifications.map((notif) => { return ; })} diff --git a/src/pages/Notification/notification-engine.ts b/src/pages/Notification/notification-engine.ts index 8f53a32..ef73f1a 100644 --- a/src/pages/Notification/notification-engine.ts +++ b/src/pages/Notification/notification-engine.ts @@ -1,13 +1,6 @@ -export class Notification { +class Notification { static notify = window.Notification; - public static isPermissionGranted() { - if (!Notification.isSupported()) { - throw new Error("Notification API is not supported"); - } - return Notification.notify.permission === "granted"; - } - public static async requestPermission() { if (!Notification.isSupported()) { throw new Error("Notification API is not supported"); @@ -17,31 +10,12 @@ export class Notification { return permission; } - public static constructNotification( - title: string, - options: NotificationOptions, - ) { - return new Notification.notify(title, options); - } - public static isSupported() { return Notification.notify !== undefined; } - - public static async displayNotification( - title: string, - options: NotificationOptions, - ) { - const permission = await Notification.requestPermission(); - if (permission === "granted") { - Notification.constructNotification(title, options); - } else { - console.error("Permission denied"); - } - } } -export class BgService { +class BgService { static bg = window.navigator; public static isSupported() { @@ -55,13 +29,33 @@ export class BgService { } public static async unregisterServiceWorker() { - const registrations = await BgService.bg.serviceWorker.getRegistrations(); + const registrations = await BgService.getRegistrations(); registrations.forEach((registration) => registration.unregister()); return registrations; } - public static async getRegistration() { - const registration = await BgService.bg.serviceWorker.getRegistration(); + public static async getRegistrations() { + const registration = await BgService.bg.serviceWorker.getRegistrations(); + console.log("Service worker registered", registration); return registration; } } + +export async function setup_notification() { + Notification.requestPermission(); + + const worker = await BgService.registerServiceWorker( + "https://team-dev.dtutimes.com/notification-service.js", + ); + + console.log("Service worker registered", worker); +} + +export async function disable_notification() { + await BgService.unregisterServiceWorker(); +} + +export async function setup_present() { + const services = await BgService.getRegistrations(); + return services.length > 0; +}