From 6f4027f614aeac1ada863e1dca74805ab2f7746d Mon Sep 17 00:00:00 2001 From: Jose Olarte III Date: Thu, 7 Sep 2023 18:03:33 +0800 Subject: [PATCH 1/3] Notification UI changes to accommodate mute --- src/App.vue | 67 ++++++++++++++++++++++++++++++- src/views/AccountViewView.vue | 75 ++++++++++++++++++++++++++++------- 2 files changed, 127 insertions(+), 15 deletions(-) diff --git a/src/App.vue b/src/App.vue index b6cf7bf8..8e37ea90 100644 --- a/src/App.vue +++ b/src/App.vue @@ -157,7 +157,7 @@ >

- Would you like to turn on notifications for this app? + Would you like to turn on notifications for this app?

+
+
+
+

Mute app notifications:

+ + + + + + +
+
+
+
+
+
+

+ Would you like to turn off notifications for this app? +

+ + + +
+
+
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue index c17be54f..54f00d2c 100644 --- a/src/views/AccountViewView.vue +++ b/src/views/AccountViewView.vue @@ -117,20 +117,67 @@ > Edit Identity - + +
+ + +

Data

From d3e025c293f9c852694e684921808eebfc28b1fb Mon Sep 17 00:00:00 2001 From: Jose Olarte III Date: Thu, 7 Sep 2023 18:03:46 +0800 Subject: [PATCH 2/3] Dialog test suite additions --- src/views/HomeView.vue | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index fd9b89e9..b2e31d0e 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -105,7 +105,37 @@ " class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2" > - Notification Permission + Notif ON + + + + + From e60b56a0b05880837e080b76909ebb9f8d322aed Mon Sep 17 00:00:00 2001 From: Jose Olarte III Date: Thu, 7 Sep 2023 18:04:00 +0800 Subject: [PATCH 3/3] Added notification dialog workflow description --- web-push.md | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/web-push.md b/web-push.md index 24150335..a7b3c537 100644 --- a/web-push.md +++ b/web-push.md @@ -358,3 +358,32 @@ unsubscribeFromPush().catch((err) => { ``` NOTE: We could offer an option within the app to "mute" these notifications. This wouldn't turn off the notifications at the browser level, but you could make it so that your Service Worker doesn't display them even if it receives them. + + +## NOTIFICATION DIALOG WORKFLOW + +# ON APP FIRST-LAUNCH: +The user is periodically presented with the notification permission dialog that asks them if they want to turn on notifications. User is given 3 choices: + +- "Turn on Notifications": triggers the browser's own notification permission prompt. +- "Maybe Later": dismisses the dialog, to reappear at a later instance. (The next time the user launches the app? After X amount of days? A combination of both?) +- "Never": dismisses the dialog; app remembers to not automatically present the dialog again. + +# IF THE USER CHOOSES "NEVER": +The dialog can still be accessed via the Notifications toggle switch in `AccountViewView` (which also tells the user if notifications are turned on or off). + +# TO TEMPORARILY MUTE NOTIFICATIONS: +While notifications are turned on, the user can tap on the Mute Notifications toggle switch in `AccountViewView` (visible only when notifications are turned on) to trigger the Mute Notifications Dialog. User is given the following choices: + +- Several "Mute for X Hour/s" buttons to temporarily mute notifications. +- "Mute until I turn it back on" button to indefinitely mute notifications. +- "Cancel" to make no changes and dismiss the dialog. + +# TO UNMUTE NOTIFICATIONS: +Simply tap on the Mute Notifications toggle switch in `AccountViewView` to immediately unmute notifications. No dialog needed. + +# TO TURN OFF NOTIFICATIONS: +While notifications are turned on, the user can tap on the App Notifications toggle switch in `AccountViewView` to trigger the Turn Off Notifications Dialog. User is given the following choices: + +- "Turn off Notifications" to fully turn them off (which means the user will need to go through the dialogs agains to turn them back on). +- "Leave it On" to make no changes and dismiss the dialog. \ No newline at end of file