push notifications: ask for user permission;

.env

@@ -56,3 +56,6 @@ GMAIL_EMAIL_APP_PASS=
 
 TELEGRAM_BOT=false
 TELEGRAM_BOT_TOKEN=7050075088:AAH6VRpNCyQd9x9sW6CLm6q0q4ibUgYBfnM
+
+VAPID_PUBLIC_KEY=BGxXJ0jdsQ4ihE7zp8mxrBO-QPSjeEtO9aCtPoMTuxc1VLW0OfRIt-DYinK9ekjTl2w-j0eQbeprIyBCpmmfciI
+VAPID_PRIVATE_KEY=VXHu2NgcyM4J4w3O4grkS_0yLwWHCvVKDJexyBjqgx0

package-lock.json

@@ -82,6 +82,7 @@
         "tw-elements": "^1.1.0",
         "typescript": "^5",
         "uuid": "^9.0.1",
+        "web-push": "^3.6.7",
         "webpack-bundle-analyzer": "^4.10.1",
         "winston": "^3.11.0",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz",
@@ -5069,6 +5070,17 @@
         "safer-buffer": "~2.1.0"
       }
     },
+    "node_modules/asn1.js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+      "dependencies": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
     "node_modules/assert-plus": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
@@ -5370,6 +5382,11 @@
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
       "integrity": "sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA=="
     },
+    "node_modules/bn.js": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
+    },
     "node_modules/body-parser": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
@@ -8644,6 +8661,14 @@
         "readable-stream": "^3.1.1"
       }
     },
+    "node_modules/http_ece": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http_ece/-/http_ece-1.2.0.tgz",
+      "integrity": "sha512-JrF8SSLVmcvc5NducxgyOrKXe3EsyHMgBFgSaIUGmArKe+rwr0uphRkRXvwiom3I+fpIfoItveHrfudL8/rxuA==",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -10369,6 +10394,11 @@
         "mini-svg-data-uri": "cli.js"
       }
     },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -14957,6 +14987,24 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/web-push": {
+      "version": "3.6.7",
+      "resolved": "https://registry.npmjs.org/web-push/-/web-push-3.6.7.tgz",
+      "integrity": "sha512-OpiIUe8cuGjrj3mMBFWY+e4MMIkW3SVT+7vEIjvD9kejGUypv8GPDf84JdPWskK8zMRIJ6xYGm+Kxr8YkPyA0A==",
+      "dependencies": {
+        "asn1.js": "^5.3.0",
+        "http_ece": "1.2.0",
+        "https-proxy-agent": "^7.0.0",
+        "jws": "^4.0.0",
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "web-push": "src/cli.js"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

package.json

@@ -99,6 +99,7 @@
     "tw-elements": "^1.1.0",
     "typescript": "^5",
     "uuid": "^9.0.1",
+    "web-push": "^3.6.7",
     "webpack-bundle-analyzer": "^4.10.1",
     "winston": "^3.11.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz",

pages/_app.tsx

@@ -14,39 +14,12 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 // Use of the <SessionProvider> is mandatory to allow components that call
 // `useSession()` anywhere in your application to access the `session` object.
 
-export const metadata: Metadata = {
+// export const metadata: Metadata = {
-  title: "Специално Свидетелстване София",
+//   title: "Специално Свидетелстване София",
-  description: "Специално Свидетелстване София",
+//   description: "Специално Свидетелстване София",
-  viewport: "width=device-width, initial-scale=1",
+//   viewport: "width=device-width, initial-scale=1",
-  appleWebApp: true,
+//   appleWebApp: true,
-  /// manifest: "/manifest.json",
+// }
-  // manifest: {
-  //   theme_color: "#000000",
-  //   background_color: "#ffffff",
-  //   icons: [
-  //     {
-  //       purpose: "maskable",
-  //       sizes: "512x512",
-  //       src: "favicon.png",
-  //       type: "image/png"
-  //     },
-  //     {
-  //       purpose: "any",
-  //       sizes: "512x512",
-  //       src: "favicon.png",
-  //       type: "image/png"
-  //     }
-  //   ],
-  //   orientation: "any",
-  //   display: "standalone",
-  //   dir: "auto",
-  //   lang: "en-US",
-  //   name: "Специално Свидетелстване София",
-  //   short_name: "ССС",
-  //   start_url: "/",
-  //   scope: "/cart"
-  // },
-}
 
 
 export default function App({
@@ -62,6 +35,36 @@ export default function App({
   }, []);
 
 
+  // PUSH NOTIFICATIONS
+  useEffect(() => {
+    // Function to ask for Notification permission
+    const askForNotificationPermission = async () => {
+      // Check if the browser supports service workers and push notifications
+      if ('serviceWorker' in navigator && 'PushManager' in window) {
+        try {
+          // Wait for service worker registration
+          const registration = await navigator.serviceWorker.ready;
+          // Ask for notification permission
+          const permission = await Notification.requestPermission();
+          if (permission === 'granted') {
+            console.log('Notification permission granted.');
+            // TODO: Subscribe the user to push notifications here
+          } else {
+            console.log('Notification permission not granted.');
+          }
+        } catch (error) {
+          console.error('Error during service worker registration:', error);
+        }
+      } else {
+        console.log('Service Worker or Push notifications not supported in this browser.');
+      }
+    };
+
+    // Call the function to ask for permission on first load
+    askForNotificationPermission();
+  }, []);
+
+
   return (
     <>
       <SessionProvider session={session} >