Added permission step; UI workflow documentation

src/App.vue

@@ -162,17 +162,22 @@
 
                 <button
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
+                  @click="
+                    close(notification.id);
+                    turnOnNotifications();
+                  "
                 >
                   Turn on Notifications
                 </button>
                 <div class="grid grid-cols-2 gap-2">
                   <button
-                    @click="close(notification.id)"
+                    @click="maybeLater(notification.id)"
                     class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
                   >
                     Maybe Later
                   </button>
                   <button
+                    @click="never(notification.id)"
                     class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md"
                   >
                     Never
@@ -254,4 +259,62 @@
 
 <style></style>
 
-<script lang="ts"></script>
+<script lang="ts">
+import { Vue, Component } from "vue-facing-decorator";
+
+@Component
+export default class App extends Vue {
+  private askPermission(): Promise<NotificationPermission> {
+    // Check if Notifications are supported
+    if (!("Notification" in window)) {
+      alert("This browser does not support notifications.");
+      return Promise.reject("This browser does not support notifications.");
+    }
+
+    // Check existing permissions
+    if (Notification.permission === "granted") {
+      return Promise.resolve("granted");
+    }
+
+    // Request permission
+    return new Promise((resolve, reject) => {
+      const permissionResult = Notification.requestPermission((result) => {
+        resolve(result);
+      });
+
+      if (permissionResult) {
+        permissionResult.then(resolve, reject);
+      }
+    }).then((permissionResult) => {
+      console.log("Permission result:", permissionResult);
+
+      if (permissionResult !== "granted") {
+        alert("We need notification permission to provide certain features.");
+        return Promise.reject("We weren't granted permission.");
+      }
+
+      return permissionResult;
+    });
+  }
+
+  async turnOnNotifications() {
+    return this.askPermission()
+      .then((permission) => {
+        console.log("Permission granted:", permission);
+        // Initialize notifications here
+      })
+      .catch((error) => {
+        console.error("An error occurred:", error);
+        // Handle error appropriately here
+      });
+  }
+
+  never(ID: string) {
+    alert(ID);
+  }
+
+  maybeLater(ID: string) {
+    alert(ID);
+  }
+}
+</script>

web-push.md

@@ -1,3 +1,6 @@
+
+# Overivew of Web Push
+
 Web Push notifications is a web browser messaging protocol defined by the W3C.
 
 Discussions of this interesting technology are clouded because of a
@@ -360,29 +363,29 @@ 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
+# NOTIFICATION DIALOG WORKFLOW
 
-# ON APP FIRST-LAUNCH:
+## 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":
+## 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:
+## 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:
+## TO UNMUTE NOTIFICATIONS:
 Simply tap on the Mute Notifications toggle switch in `AccountViewView` to immediately unmute notifications. No dialog needed.
 
-# TO TURN OFF NOTIFICATIONS:
+## 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).