Addressing CommanderStorm code comments

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;

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);

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 }}
     </button>
 
-    <div class="mb-3 form-text">
+    <div class="form-text">
-        <a href="TODO" target="_blank">{{ $t("documentationOf", ["Webpush"]) }}</a>
+        {{ $t("Webpush Helptext") }}
     </div>
 </template>
 
@@ -23,31 +23,26 @@
 export default {
     data() {
         return {
-            //store subscription info
             btnEnabled: false,
             btnText: "",
             processing: false,
-            //determines if browser supports service worker
+            browserSupportsServiceWorkers: false,
-            canRegister: false,
-            //store public vapid key
             publicVapidKey: null,
         };
     },
     mounted() {
-        // if already subscribed
         if (this.$parent.notification.subscription) {
             this.btnEnabled = false;
-            this.canRegister = true;
+            this.browserSupportsServiceWorkers = true;
-            this.btnText = "Notifications Enabled";
+            this.btnText = this.$t("Notifications Enabled");
-        } else { //not subscribed
+        } else {
-            //check if browser supports service worker
             if (("serviceWorker" in navigator)) {
-                this.btnText = "Allow Notifications";
+                this.btnText = this.$t("Allow Notifications");
-                this.canRegister = true;
+                this.browserSupportsServiceWorkers = true;
                 this.btnEnabled = true;
-            } else { //browser does not support service worker
+            } else {
-                this.btnText = "Browser not supported";
+                this.btnText = this.$t("Browser not supported");
-                this.canRegister = false;
+                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.browserSupportsServiceWorkers = true;
-                this.btnText = "Notifications Enabled";
+                this.btnText = this.$t("Notifications Enabled");
             } catch (error) {
                 console.error("Subscription failed:", error);
                 this.$root.toastRes({

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."
 }

src/serviceWorker.ts

@@ -5,21 +5,19 @@ precacheAndRoute(self.__WB_MANIFEST)
 
 // Receive push notifications
 self.addEventListener('push', function (event) {
-    
+    if (self.Notification?.permission !== 'granted') {
-    if (!(
+        console.error("Notifications aren't supported or permission not granted!");
-        self.Notification &&
-        self.Notification.permission === 'granted'
-    )) {
-        //notifications aren't supported or permission not granted!
-        console.log("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, {
+        try {
-            body: message.body,
+            self.registration.showNotification(message.title, {
-        });
+                body: message.body,
+            });
+        } catch (error) {
+            console.error('Failed to show notification:', error);
+        }
     }
 });