show web-push subscription info on demand, and refine docs

src/App.vue

@@ -402,7 +402,10 @@ export default class App extends Vue {
   private requestNotificationPermission(): Promise<NotificationPermission> {
     return Notification.requestPermission().then((permission) => {
       if (permission !== "granted") {
-        alert("We need notification permission to provide certain features.");
+        alert(
+          "Allow this app permission to make notifications for personal reminders." +
+            " You can adjust them at any time in your settings.",
+        );
         throw new Error("We weren't granted permission.");
       }
       return permission;

src/views/AccountViewView.vue

@@ -157,7 +157,6 @@
 
     <router-link
       :to="{ name: 'seed-backup' }"
-      href=""
       class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
     >
       Backup Identifier Seed
@@ -319,6 +318,15 @@
         </button>
       </div>
 
+      <div class="flex py-2">
+        <button
+          @click="alertWebPushSubscription()"
+          class="block text-center text-md uppercase bg-blue-500 text-white px-1.5 py-2 rounded-md mb-2"
+        >
+          Show Subscription from Web Push Server
+        </button>
+      </div>
+
       <div class="flex py-4">
         <h2 class="text-slate-500 text-sm font-bold mb-2">Claim Server</h2>
         <input
@@ -457,12 +465,12 @@ export default class AccountViewView extends Vue {
 
   showAdvanced = false;
 
-  private isSubscribed = false;
+  subscription: PushSubscription | null = null;
 
+  private isSubscribed = false;
   get toggleNotifications() {
     return this.isSubscribed;
   }
-
   set toggleNotifications(value) {
     this.isSubscribed = value;
   }
@@ -549,7 +557,6 @@ export default class AccountViewView extends Vue {
    * @throws Will display specific messages to the user based on different errors.
    */
   async created() {
-    console.error("created");
     try {
       await db.open();
 
@@ -569,13 +576,12 @@ export default class AccountViewView extends Vue {
   }
 
   async mounted() {
-    console.error("mounted()");
     try {
       const registration = await navigator.serviceWorker.ready;
-      const subscription = await registration.pushManager.getSubscription();
-      this.toggleNotifications = !!subscription;
+      this.subscription = await registration.pushManager.getSubscription();
+      this.toggleNotifications = !!this.subscription;
     } catch (error) {
-      console.error(error);
+      console.error("Mount error:", error);
       this.toggleNotifications = false;
     }
   }
@@ -937,5 +943,10 @@ export default class AccountViewView extends Vue {
       -1,
     );
   }
+
+  alertWebPushSubscription() {
+    console.log("Web push subscription:", this.subscription);
+    alert(JSON.stringify(this.subscription));
+  }
 }
 </script>