diff --git a/server/notification-providers/Webpush.js b/server/notification-providers/Webpush.js index 9d7b4d770..5919f1c4b 100644 --- a/server/notification-providers/Webpush.js +++ b/server/notification-providers/Webpush.js @@ -13,10 +13,9 @@ class Webpush extends NotificationProvider { const okMsg = "Sent Successfully."; try { - // Get VAPID keys from settings const publicVapidKey = await setting("webpushPublicVapidKey"); const privateVapidKey = await setting("webpushPrivateVapidKey"); - // Set Vapid keys in web-push helper lib + webpush.setVapidDetails("https://github.com/louislam/uptime-kuma", publicVapidKey, privateVapidKey); if (heartbeatJSON === null && monitorJSON === null) { @@ -25,7 +24,7 @@ class Webpush extends NotificationProvider { title: "TEST", body: "Test Alert - " + msg }); - //send push notification using web-push lib + await webpush.sendNotification(notification.subscription, data); return okMsg; @@ -39,7 +38,7 @@ class Webpush extends NotificationProvider { title: title, body: `${heartbeatJSON["status"] === UP ? up : down}` }); - //send push notification using web-push lib + await webpush.sendNotification(notification.subscription, data); return okMsg; diff --git a/server/server.js b/server/server.js index d8fcb2569..1211f97b0 100644 --- a/server/server.js +++ b/server/server.js @@ -1495,7 +1495,7 @@ let needSetup = false; let publicVapidKey = await Settings.get("webpushPublicVapidKey"); if (!publicVapidKey) { - console.debug("Generating new VAPID keys"); + log.debug("webpush", "Generating new VAPID keys"); const vapidKeys = webpush.generateVAPIDKeys(); await Settings.set("webpushPublicVapidKey", vapidKeys.publicKey); diff --git a/src/components/notifications/Webpush.vue b/src/components/notifications/Webpush.vue index a76928b62..cd6ed9dd6 100644 --- a/src/components/notifications/Webpush.vue +++ b/src/components/notifications/Webpush.vue @@ -4,7 +4,7 @@ type="button" :class="[ 'btn', - canRegister ? 'btn-primary' : 'btn-danger' + browserSupportsServiceWorkers ? 'btn-primary' : 'btn-danger' ]" :disabled="!btnEnabled" @click="registerWebpush" @@ -14,8 +14,8 @@ {{ btnText }} -
- {{ $t("documentationOf", ["Webpush"]) }} +
+ {{ $t("Webpush Helptext") }}
@@ -23,31 +23,26 @@ export default { data() { return { - //store subscription info btnEnabled: false, btnText: "", processing: false, - //determines if browser supports service worker - canRegister: false, - //store public vapid key + browserSupportsServiceWorkers: false, publicVapidKey: null, }; }, mounted() { - // if already subscribed if (this.$parent.notification.subscription) { this.btnEnabled = false; - this.canRegister = true; - this.btnText = "Notifications Enabled"; - } else { //not subscribed - //check if browser supports service worker + this.browserSupportsServiceWorkers = true; + this.btnText = this.$t("Notifications Enabled"); + } else { if (("serviceWorker" in navigator)) { - this.btnText = "Allow Notifications"; - this.canRegister = true; + this.btnText = this.$t("Allow Notifications"); + this.browserSupportsServiceWorkers = true; this.btnEnabled = true; - } else { //browser does not support service worker - this.btnText = "Browser not supported"; - this.canRegister = false; + } else { + this.btnText = this.$t("Browser not supported"); + this.browserSupportsServiceWorkers = false; this.btnEnabled = false; } } @@ -57,40 +52,37 @@ export default { this.processing = true; try { - // Get the VAPID public key from the server const publicKey = await new Promise((resolve, reject) => { this.$root.getSocket().emit("getWebpushVapidPublicKey", (resp) => { if (!resp.ok) { reject(new Error(resp.msg)); } + console.log(resp.msg); resolve(resp.msg); }); }); - //request permission to send notifications const permission = await Notification.requestPermission(); if (permission !== "granted") { this.$root.toastRes({ ok: false, - msg: "Unable to get permission to notify.", + msg: this.$t("Unable to get permission to notify"), }); this.processing = false; return; } - //get service worker registration const registration = await navigator.serviceWorker.ready; - //subscribe to push notifications + const subscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: publicKey, }); - //store subscription info and update button this.$parent.notification.subscription = subscription; this.btnEnabled = false; - this.canRegister = true; - this.btnText = "Notifications Enabled"; + this.browserSupportsServiceWorkers = true; + this.btnText = this.$t("Notifications Enabled"); } catch (error) { console.error("Subscription failed:", error); this.$root.toastRes({ diff --git a/src/lang/en.json b/src/lang/en.json index e215f1031..ee87cc53c 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -1051,5 +1051,10 @@ "RabbitMQ Password": "RabbitMQ Password", "rabbitmqHelpText": "To use the monitor, you will need to enable the Management Plugin in your RabbitMQ setup. For more information, please consult the {rabitmq_documentation}.", "SendGrid API Key": "SendGrid API Key", - "Separate multiple email addresses with commas": "Separate multiple email addresses with commas" + "Separate multiple email addresses with commas": "Separate multiple email addresses with commas", + "Notifications Enabled": "Notifications Enabled", + "Allow Notifications": "Allow Notifications", + "Browser not supported": "Browser not supported", + "Unable to get permission to notify": "Unable to get permission to notify (request either denied or ignored).", + "Webpush Helptext": "Web push only works with SSL (HTTPS) connections. For iOS devices, webpage must be added to homescreen beforehand." } diff --git a/src/serviceWorker.ts b/src/serviceWorker.ts index 06614c0f5..c31649c41 100644 --- a/src/serviceWorker.ts +++ b/src/serviceWorker.ts @@ -5,21 +5,19 @@ precacheAndRoute(self.__WB_MANIFEST) // Receive push notifications self.addEventListener('push', function (event) { - - if (!( - self.Notification && - self.Notification.permission === 'granted' - )) { - //notifications aren't supported or permission not granted! - console.log("Notifications aren't supported or permission not granted!"); + if (self.Notification?.permission !== 'granted') { + console.error("Notifications aren't supported or permission not granted!"); return; } if (event.data) { - console.log(event); let message = event.data.json(); - self.registration.showNotification(message.title, { - body: message.body, - }); + try { + self.registration.showNotification(message.title, { + body: message.body, + }); + } catch (error) { + console.error('Failed to show notification:', error); + } } -}); \ No newline at end of file +});