notification permission fixes, show server urls at bottom, service worker fixes

src/components/Footer.ts

@@ -33,5 +33,7 @@ export const Footer = html`<footer class="container">
         second: "numeric",
       })}
     </p>
+    <p class="center">Server: <code>${import.meta.env.VITE_BASE_URL}</code></p>
+    <p class="center">API: <code>${import.meta.env.VITE_API_BASE_URL}</code></p>
   </div>
 </footer>`;

src/components/Header.ts

@@ -1,7 +1,9 @@
 import { html } from "uhtml";
 
 export const Header = html` <hgroup>
-  <h1>SURE<span class="primary">DOG</span></h1>
+  <h1>
+    SURE<span class="primary"><a href="/">DOG</a></span>
+  </h1>
   <h2>
     <span class="primary">S</span>ecure <span class="primary">U</span>RL
     <span class="primary">Re</span>quests

src/components/settings/NotificationManager.ts

@@ -23,7 +23,8 @@ export const NotificationManager = () => html` <h2>Notifications</h2>
   <p>
     <button
       @click=${subscribeUserToPush}
-      ?disabled=${notificationPermission.value === "granted"}
+      ?disabled=${notificationPermission.value === "granted" &&
+      pushSubscription.value !== null}
     >
       Enable Notifications
     </button>
@@ -94,12 +95,18 @@ export async function subscribeUserToPush(
 ) {
   event?.preventDefault();
   try {
-    const permission = await Notification.requestPermission();
-    if (permission !== "granted") {
-      throw new Error("Notification permission not granted");
+    notificationPermission.value = Notification.permission;
+    if (notificationPermission.value !== "granted") {
+      const permission = await Notification.requestPermission();
+
+      notificationPermission.value = permission;
     }
 
-    notificationPermission.value = permission;
+    if (notificationPermission.value !== "granted") {
+      throw new Error(
+        `Notification permission not granted: ${notificationPermission.value}`
+      );
+    }
 
     const registration = await navigator.serviceWorker.ready;
     let subscription = await registration.pushManager.getSubscription();

src/sw.js

@@ -24,13 +24,24 @@ self.addEventListener("push", function (e) {
   }
 });
 
-self.addEventListener("notificationclick", function (event) {
-  event.notification.close();
-  var url = event.notification.data.url;
-  event.waitUntil(
-    clients
-      .openWindow(event.notification.data.url)
-      .catch((err) => console.log(err))
+self.addEventListener("notificationclick", (e) => {
+  // Close the notification popout
+  e.notification.close();
+  // Get all the Window clients
+  e.waitUntil(
+    clients.matchAll({ type: "window" }).then((clientsArr) => {
+      // If a Window tab matching the targeted URL already exists, focus that;
+      const hadWindowToFocus = clientsArr.some((windowClient) =>
+        windowClient.url === e.notification.data.url
+          ? (windowClient.focus(), true)
+          : false
+      );
+      // Otherwise, open a new tab to the applicable URL and focus it.
+      if (!hadWindowToFocus)
+        clients
+          .openWindow(e.notification.data.url)
+          .then((windowClient) => (windowClient ? windowClient.focus() : null));
+    })
   );
 });
 

src/utils/vite-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  VITE_BASE_URL?: string;
-  VITE_API_BASE_URL?: string;
+  readonly VITE_BASE_URL?: string;
+  readonly VITE_API_BASE_URL?: string;
 }