From f8d3fe2ee18171553785424e88c2b8e1df9c603d Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Wed, 27 Dec 2023 13:59:24 -0700 Subject: [PATCH] enhance service-worker logging, allow for filtered-push test --- project.task.yaml | 8 +++- src/App.vue | 2 +- src/views/AccountViewView.vue | 4 +- src/views/HelpNotificationsView.vue | 50 +++++++++++++-------- sw_scripts/additional-scripts.js | 68 ++++++++++++++++++----------- sw_scripts/safari-notifications.js | 1 + 6 files changed, 84 insertions(+), 49 deletions(-) diff --git a/project.task.yaml b/project.task.yaml index 33ff99393..70e8ad372 100644 --- a/project.task.yaml +++ b/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) diff --git a/src/App.vue b/src/App.vue index 058b1bd3a..b8481b826 100644 --- a/src/App.vue +++ b/src/App.vue @@ -534,7 +534,7 @@ export default class App extends Vue { private sendSubscriptionToServer( subscription: PushSubscription, ): Promise { - console.log("About to send subscription", subscription); + console.log("About to send subscription...", subscription); return fetch("/web-push/subscribe", { method: "POST", headers: { diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue index b2dd89bc3..010705e77 100644 --- a/src/views/AccountViewView.vue +++ b/src/views/AccountViewView.vue @@ -134,7 +134,7 @@ latest setting. - Troubleshoot notifications here. + Test your notification setup. @@ -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 diff --git a/src/views/HelpNotificationsView.vue b/src/views/HelpNotificationsView.vue index 7886ac524..967eb02c4 100644 --- a/src/views/HelpNotificationsView.vue +++ b/src/views/HelpNotificationsView.vue @@ -29,10 +29,11 @@

If this works then you're all set.

@@ -40,10 +41,10 @@

If this app is not installed...

- For best results, install this app on your device. In Chrome, it may - prompt you, and you can also look for the "Install" command in the - browser settings (as opposed to using it inside the broser app); on - the deskop, look for this icon in the address bar: + For best results on mobile, install this app on your device (as + opposed to using it inside the broser app). In Chrome, it may prompt + you, and you can also look for the "Install" command in the browser + settings; on the the deskop, look for this icon in the address bar: Chrome 'install' icon - Send Test Notification Directly to Device + Send Test Notification Directly to Device (Not Through Push Server) + +

@@ -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.", - title: DIRECT_PUSH_TITLE, + message: `Test, where you will see this message ${ + 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, ); diff --git a/sw_scripts/additional-scripts.js b/sw_scripts/additional-scripts.js index 2421d0db4..6611cf909 100644 --- a/sw_scripts/additional-scripts.js +++ b/sw_scripts/additional-scripts.js @@ -4,28 +4,43 @@ 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( +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)}`; + } + if (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", ); - console.log("Service worker imported scripts."); + // this should now be available + logConsoleAndDb("Service worker imported all scripts."); }); -function logConsoleAndDb(message, arg1, arg2) { - console.log(`${new Date().toISOString()} ${message}`, arg1, arg2); - let fullMessage = `${new Date().toISOString()} ${message}`; - if (arg1) { - fullMessage += `\n${JSON.stringify(arg1)}`; - } - if (arg2) { - fullMessage += `\n${JSON.stringify(arg2)}`; - } - self.appendDailyLog(fullMessage); -} +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; @@ -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); }); diff --git a/sw_scripts/safari-notifications.js b/sw_scripts/safari-notifications.js index 0d0eb9c3b..f070179bf 100644 --- a/sw_scripts/safari-notifications.js +++ b/sw_scripts/safari-notifications.js @@ -565,5 +565,6 @@ async function getNotificationCount() { return result; } +self.appendDailyLog = appendDailyLog; self.getNotificationCount = getNotificationCount; self.decodeBase64 = decodeBase64;