Merge pull request #160 from dvishal485/main

test notif worker

.github/workflows/dev.yml

@@ -0,0 +1,36 @@
+# This is a basic workflow to help you get started with Actions
+
+name: Deploy on push
+
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on push or pull request events but only for the "main" branch
+  push:
+    branches: [ "dev" ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: self-hosted
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v4
+
+      - name: Get to work dir
+        run: cd $GITHUB_WORKSPACE
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: Run build task
+        run: npm run build
+
+      - name: Deploy to web
+        run: rsync -avz --delete dist/ ~/nix_frontend_dev

public/notification-service.js

@@ -0,0 +1,4 @@
+self.addEventListener("activate", async () => {
+  // This will be called only once when the service worker is activated.
+  console.log("Hello from service worker");
+});

src/pages/Notification/index.tsx

@@ -3,6 +3,7 @@ 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";
 
 interface NotificationCardProps {
   notif: INotification;
@@ -79,6 +80,24 @@ export default function NotificationPage() {
   return (
     <div className="max-w-4xl mx-auto py-12">
       <h1>Latest Updates</h1>
+      <button onClick={Notification.requestPermission}>
+        Get alerts on Notification!
+      </button>
+      <button
+        onClick={async () => {
+          console.log("Registering service!");
+          await BgService.registerServiceWorker("notification-service.js");
+        }}
+      >
+        Get alerts on spam!
+      </button>
+      <button
+        onClick={async () => {
+          console.log(await BgService.getRegistration());
+        }}
+      >
+        Get alerts on spam!
+      </button>
       {notifications.map((notif) => {
         return <NotificationCard key={notif._id} notif={notif} />;
       })}

src/pages/Notification/notification-engine.ts

@@ -0,0 +1,66 @@
+export 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");
+    }
+    const permission = await Notification.notify.requestPermission();
+    console.log("Notification API permission", permission);
+    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 {
+  static bg = window.navigator;
+
+  public static isSupported() {
+    return BgService.bg !== undefined;
+  }
+
+  public static async registerServiceWorker(swPath: string) {
+    const registration = await BgService.bg.serviceWorker.register(swPath);
+    console.log("Service worker registered", registration);
+    return registration;
+  }
+
+  public static async unregisterServiceWorker() {
+    const registrations = await BgService.bg.serviceWorker.getRegistrations();
+    registrations.forEach((registration) => registration.unregister());
+  }
+
+  public static async getRegistration() {
+    const registration = await BgService.bg.serviceWorker.getRegistration();
+    return registration;
+  }
+}

src/router/routeMap.tsx

@@ -242,7 +242,7 @@ const routeMap: CustomRouteElement[] = [
     path: "notification/",
     element: <NotificationPage />,
     icon: <NotificationIcon />,
-    permission: [],
+    permission: [Permission.AccessLogs],
     label: "Notifications",
   },
 ];

tsconfig.json

@@ -31,7 +31,8 @@
         }
     },
     "include": [
-        "src"
+        "src",
+        "public/notification-service.js"
     ],
     "references": [
         {