push notifications: ask for user permission;

This commit is contained in:
Dobromir Popov
2024-04-08 00:29:27 +03:00
parent 6bfbd73162
commit 3ddb514d9c
4 changed files with 88 additions and 33 deletions

3
.env
View File

@ -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

48
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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 = {
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"
// export const metadata: Metadata = {
// title: "Специално Свидетелстване София",
// description: "Специално Свидетелстване София",
// viewport: "width=device-width, initial-scale=1",
// appleWebApp: true,
// }
// ],
// 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} >