enhance service-worker logging, allow for filtered-push test

project.task.yaml

@@ -21,11 +21,14 @@ tasks:
     https://web.dev/articles/get-installed-related-apps
   - fix maskable icon
 
+- .1 fix ability to record a give on the contacts page without a number of hours
+
 - .2 fix the projects on /discover to show the issuer (currently all "Someone Anonymous")
 
 - .3 bug - make or edit a project, choose "Include location", and see the map display shows on top of the bottom icons assignee-group:ui
 
 - .5 If notifications are not enabled, add message to front page with link/button to enable
+- bug - totals on contact page are not correct
 
 - show VC details... somehow:
   - 01 show my VCs - most interesting, or via search
@@ -50,7 +53,9 @@ tasks:
 - 02 watch for the service worker activation before showing the button to turn on notifications
 - 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
+- bug (that is hard to reproduce) - 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
+- bug (that is hard to reproduce) - in Chrome, install app then delete app and try from Chrome browser and see log errors "Uncaught TypeError: self.appendDailyLog is not a function"
+- bug (that is hard to reproduce) - on the second 'give' recorded on prod it showed me as the agent
 - 01 send visibility signal as a VC and store it
 - 04 remove 'rowid' references (that are sqlite-specific); may involve server
 - 04 look at other examples for better UI friend.tech
@@ -64,7 +69,6 @@ tasks:
 - .5 Display a more appealing confirmation on the map when erasing the marker
 - .5 include the hash of the latest commit on help page next to version (maybe Trent's git-hash branch)
 - .5 remove references to localStorage for projectId (now that it's pulling from the path)
-- bug (that is hard to reproduce) - on the second 'give' recorded on prod it showed me as the agent
 - switch some checks for activeDid to check for isRegistered
 - .2 in SeedBackupView, don't load the mnemonic and keep it in memory; only load it when they click "show"
 - .5 fix cert generation on server (since it didn't happen automatically for Nov 30)

src/App.vue

@@ -534,7 +534,7 @@ export default class App extends Vue {
   private sendSubscriptionToServer(
     subscription: PushSubscription,
   ): Promise<void> {
-    console.log("About to send subscription", subscription);
+    console.log("About to send subscription...", subscription);
     return fetch("/web-push/subscribe", {
       method: "POST",
       headers: {

src/views/AccountViewView.vue

@@ -134,7 +134,7 @@
         latest setting.
       </div>
       <router-link class="px-4 text-sm text-blue-500" to="/help-notifications">
-        Troubleshoot notifications here.
+        Test your notification setup.
       </router-link>
     </div>
 
@@ -297,7 +297,7 @@
         :to="{ name: 'statistics' }"
         class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
       >
-        See Global Animated History of Giving
+        See Animated Global History of Giving
       </router-link>
 
       <!-- id used by puppeteer test script -->

src/views/HelpNotificationsView.vue

@@ -29,10 +29,11 @@
         <p>
           If this works then you're all set.
           <button
-            @click="sendTestWebPushMessage()"
+            @click="sendTestWebPushMessage(true)"
-            class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+            class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
           >
-            Send Yourself a Test Web Push Message
+            Send Yourself a Test Web Push Message (Through Push Server but
+            Skipping Client Filter)
           </button>
         </p>
       </div>
@@ -40,10 +41,10 @@
       <h2 class="text-xl font-semibold">If this app is not installed...</h2>
       <div>
         <p>
-          For best results, install this app on your device. In Chrome, it may
+          For best results on mobile, install this app on your device (as
-          prompt you, and you can also look for the "Install" command in the
+          opposed to using it inside the broser app). In Chrome, it may prompt
-          browser settings (as opposed to using it inside the broser app); on
+          you, and you can also look for the "Install" command in the browser
-          the deskop, look for this icon in the address bar:
+          settings; on the the deskop, look for this icon in the address bar:
           <img
             src="../assets/help/chrome-install-pwa.png"
             alt="Chrome 'install' icon"
@@ -192,23 +193,32 @@
 
       <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"
+        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
       >
-        Send Test Notification Directly to Device
+        Send Test Notification Directly to Device (Not Through Push Server)
       </button>
 
       <button
         @click="alertWebPushSubscription()"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
       >
         Show Web Push Subscription Info
       </button>
 
+      <button
+        @click="sendTestWebPushMessage(true)"
+        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+      >
+        Send Yourself a Test Web Push Message (Through Push Server but Skipping
+        Client Filter)
+      </button>
+
       <button
         @click="sendTestWebPushMessage()"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
       >
-        Send Yourself a Test Web Push Message
+        Send Yourself a Test Web Push Message (Through Push Server and Client
+        Filter)
       </button>
     </div>
   </section>
@@ -255,7 +265,7 @@ export default class HelpNotificationsView extends Vue {
     alert(JSON.stringify(this.subscription));
   }
 
-  async sendTestWebPushMessage() {
+  async sendTestWebPushMessage(skipFilter: boolean = false) {
     if (!this.subscription) {
       this.$notify(
         {
@@ -277,6 +287,7 @@ export default class HelpNotificationsView extends Vue {
         pushUrl = settings.webPushServer;
       }
 
+      // This is a special value that tells the service worker to send a direct notification to the device, skipping filters.
       // 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";
@@ -299,8 +310,10 @@ export default class HelpNotificationsView extends Vue {
           auth: authB64,
           p256dh: p256dhB64,
         },
-        message: "This is a test message, triggered by you.",
+        message: `Test, where you will see this message ${
-        title: DIRECT_PUSH_TITLE,
+          skipFilter ? "un" : ""
+        }filtered.`,
+        title: skipFilter ? DIRECT_PUSH_TITLE : "Your Web Push",
       };
       console.log("Sending a test web push message:", newPayload);
       const payloadStr = JSON.stringify(newPayload);
@@ -321,7 +334,7 @@ export default class HelpNotificationsView extends Vue {
           group: "alert",
           type: "success",
           title: "Test Web Push Sent",
-          text: "Check your device for the test web push message.",
+          text: "Check your device for the test web push message, depending on the filtering you chose.",
         },
         -1,
       );
@@ -340,9 +353,10 @@ export default class HelpNotificationsView extends Vue {
   }
 
   showTestNotification() {
+    const TEST_NOTIFICATION_TITLE = "It Worked";
     navigator.serviceWorker.ready
       .then((registration) => {
-        return registration.showNotification("It Worked", {
+        return registration.showNotification(TEST_NOTIFICATION_TITLE, {
           body: "This is your test notification.",
         });
       })
@@ -352,7 +366,7 @@ export default class HelpNotificationsView extends Vue {
             group: "alert",
             type: "success",
             title: "Sent",
-            text: "A notification was triggered, so one should show on your device soon.",
+            text: `A notification was triggered, so one should show on your device entitled '${TEST_NOTIFICATION_TITLE}'.`,
           },
           5000,
         );

sw_scripts/additional-scripts.js

@@ -4,19 +4,10 @@ importScripts(
   "https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js",
 );
 
-self.addEventListener("install", (event) => {
-  console.log("Service worker got install. Importing scripts...", event);
-  importScripts(
-    "safari-notifications.js",
-    "nacl.js",
-    "noble-curves.js",
-    "noble-hashes.js",
-  );
-  console.log("Service worker imported scripts.");
-});
-
 function logConsoleAndDb(message, arg1, arg2) {
+  // in chrome://serviceworker-internals note that the arg1 and arg2 here will show as "[object Object]" in that page but will show as expandable objects in the console
   console.log(`${new Date().toISOString()} ${message}`, arg1, arg2);
+  if (self.appendDailyLog) {
     let fullMessage = `${new Date().toISOString()} ${message}`;
     if (arg1) {
       fullMessage += `\n${JSON.stringify(arg1)}`;
@@ -25,8 +16,32 @@ function logConsoleAndDb(message, arg1, arg2) {
       fullMessage += `\n${JSON.stringify(arg2)}`;
     }
     self.appendDailyLog(fullMessage);
+  } else {
+    // sometimes we get the error: "Uncaught TypeError: self.appendDailyLog is not a function"
+    console.log("Not logging to DB because self.appendDailyLog doesn't exist.");
+  }
 }
 
+self.addEventListener("install", async (event) => {
+  console.log("Service worker got install event. Importing scripts...", event);
+  await importScripts(
+    "safari-notifications.js",
+    "nacl.js",
+    "noble-curves.js",
+    "noble-hashes.js",
+  );
+  // this should now be available
+  logConsoleAndDb("Service worker imported all scripts.");
+});
+
+self.addEventListener("activate", (event) => {
+  logConsoleAndDb("Service worker is activating...", event);
+  // see https://developer.mozilla.org/en-US/docs/Web/API/Clients/claim
+  // and https://web.dev/articles/service-worker-lifecycle#clientsclaim
+  event.waitUntil(clients.claim());
+  logConsoleAndDb("Service worker is activated.");
+});
+
 self.addEventListener("push", function (event) {
   let text = null;
   if (event.data) {
@@ -45,18 +60,27 @@ self.addEventListener("push", function (event) {
           }
         }
 
+        // This is a special value that tells the service worker that it's a daily update.
+        const DAILY_UPDATE_TITLE = "DAILY_UPDATE";
+
+        // This is a special value that tells the service worker to send a direct notification to the device, skipping filters.
         // 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";
 
-        let title = "Generic Notification";
+        let title;
         let message = "Got some empty message.";
         if (payload && payload.title == DIRECT_PUSH_TITLE) {
           // skip any search logic and show the message directly
-          title = "Direct Message";
+          title = "Direct Notification";
           message = payload.message || "No details were provided.";
         } else {
-          title = payload && payload.title ? payload.title : "Note";
+          // any other title will run through regular filtering logic
+          if (payload && payload.title === DAILY_UPDATE_TITLE) {
+            title = "Daily Update";
+          } else {
+            title = payload.title || "Update";
+          }
           message = await self.getNotificationCount();
         }
         if (message) {
@@ -86,14 +110,6 @@ self.addEventListener("message", (event) => {
   logConsoleAndDb("Service worker posted a message.");
 });
 
-self.addEventListener("activate", (event) => {
-  logConsoleAndDb("Service worker activating...", event);
-  // see https://developer.mozilla.org/en-US/docs/Web/API/Clients/claim
-  // and https://web.dev/articles/service-worker-lifecycle#clientsclaim
-  event.waitUntil(clients.claim());
-  logConsoleAndDb("Service worker is activated.");
-});
-
 self.addEventListener("fetch", (event) => {
   logConsoleAndDb("Service worker got fetch event.", event);
 });

sw_scripts/safari-notifications.js

@@ -565,5 +565,6 @@ async function getNotificationCount() {
   return result;
 }
 
+self.appendDailyLog = appendDailyLog;
 self.getNotificationCount = getNotificationCount;
 self.decodeBase64 = decodeBase64;