add another alert message & test button

project.task.yaml

@@ -46,6 +46,7 @@ tasks:
   blocks: ref:https://raw.githubusercontent.com/trentlarson/lives-of-gifts/master/project.yaml#kickstarter%20for%20time
 
 - make identicons for contacts into more-memorable faces (and maybe change project identicons, too)
+- 04 split out notification logic & tests from web-push-subscription logic & tests
 - 01 server - show all claim details when issued by the issuer
 - bug - got error adding on Firefox user #0 as contact for themselves
 - bug - back-and-forth on discovery & project pages led to "You need an identity to load your projects." error on product page when I had an identity

src/App.vue

@@ -449,6 +449,15 @@ export default class App extends Vue {
             console.log(
               "Subscription data sent to server and all finished successfully.",
             );
+            this.$notify(
+              {
+                group: "alert",
+                type: "success",
+                title: "Notifications Turned On",
+                text: "Notifications are on. You should see one on your device; if not, see the 'Troubleshoot' page.",
+              },
+              -1,
+            );
           })
           .catch((error) => {
             console.error(

src/views/HelpNotificationsView.vue

@@ -22,10 +22,16 @@
     </div>
 
     <div>
-      <p>Here are things to get notifications working.</p>
+      <p>Here are ways to get notifications working.</p>
 
       <h2 class="text-xl font-semibold">Test</h2>
       <p>Somehow call the service-worker self.showNotification</p>
+      <button
+        @click="showTestNotification()"
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+      >
+        See a Test Notification
+      </button>
 
       <h2 class="text-xl font-semibold">Check OS-level permissions</h2>
       <div>
@@ -150,7 +156,7 @@ export default class HelpNotificationsView extends Vue {
         pushUrl = settings.webPushServer;
       }
 
-      // This should be a constant shared with the service worker. See TEST_PUSH_TITLE in additional-scripts.js
+      // This is shared with the service worker and should be a constant. Look for the same name in additional-scripts.js
       // Use something other than "Daily Update" https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/3c0e196c11bc98060ec5934e99e7dbd591b5da4d/app.py#L213
       const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";
 
@@ -172,7 +178,7 @@ export default class HelpNotificationsView extends Vue {
           auth: authB64,
           p256dh: p256dhB64,
         },
-        message: "This is a test message, hopefully triggered by you.",
+        message: "This is a test message, triggered by you.",
         title: DIRECT_PUSH_TITLE,
       };
       console.log("Sending a test web push message:", newPayload);
@@ -211,5 +217,37 @@ export default class HelpNotificationsView extends Vue {
       );
     }
   }
+
+  showTestNotification() {
+    navigator.serviceWorker.ready
+      .then((registration) => {
+        return registration.showNotification("It Worked", {
+          body: "This is your test notification.",
+        });
+      })
+      .then(() => {
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Sent",
+            text: "A notification was triggered, so one should show on your device soon.",
+          },
+          5000,
+        );
+      })
+      .catch((error) => {
+        console.error("Got a notification error:", error);
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Failed",
+            text: "Got an error sending a notification.",
+          },
+          -1,
+        );
+      });
+  }
 }
 </script>

sw_scripts/additional-scripts.js

@@ -45,7 +45,7 @@ self.addEventListener("push", function (event) {
           }
         }
 
-        // This should be a constant shared with the notification-test code. See TEST_PUSH_TITLE in HelpNotificationsView.vue
+        // This is shared with the notification-test code and should be a constant. Look for the same name in HelpNotificationsView.vue
         // Use something other than "Daily Update" https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/3c0e196c11bc98060ec5934e99e7dbd591b5da4d/app.py#L213
         const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";