From 3ddb514d9ca6a62042c62f1cc705d33326bc3e39 Mon Sep 17 00:00:00 2001 From: Dobromir Popov Date: Mon, 8 Apr 2024 00:29:27 +0300 Subject: [PATCH] push notifications: ask for user permission; --- .env | 3 +++ package-lock.json | 48 +++++++++++++++++++++++++++++++++ package.json | 1 + pages/_app.tsx | 69 ++++++++++++++++++++++++----------------------- 4 files changed, 88 insertions(+), 33 deletions(-) diff --git a/.env b/.env index 44e9f90..909df19 100644 --- a/.env +++ b/.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 diff --git a/package-lock.json b/package-lock.json index ebd6f8c..2c2b77f 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index dbe05d2..7d0966b 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.tsx b/pages/_app.tsx index 6f6177c..51e37c1 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -14,39 +14,12 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs' // Use of the is mandatory to allow components that call // `useSession()` anywhere in your application to access the `session` object. -export const metadata: Metadata = { - title: "Специално Свидетелстване София", - description: "Специално Свидетелстване София", - viewport: "width=device-width, initial-scale=1", - 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 const metadata: Metadata = { +// title: "Специално Свидетелстване София", +// description: "Специално Свидетелстване София", +// viewport: "width=device-width, initial-scale=1", +// appleWebApp: true, +// } 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 ( <>