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

CHANGELOG.md

@@ -9,7 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 
-## [0.1.5] - 2023.12.09
+## [0.1.6]
+
+
+## [0.1.5] - 2023.12.09 - 9c36bb509a9bae9bb3306d3bd9eeb144b67aa8ad
 ### Added
 - Web push notifications (though not finalized)
 - Credentials details page

README.md

@@ -110,9 +110,9 @@ To add an icon, add to main.ts and reference with `fa` element and `icon` attrib
 
 ### Clear/Reset data & restart
 
-* Clear cache for site. (In Chrome, go to `chrome://settings/cookies` and "all site data and permissions"; in Firefox, go to `about:preferences` and search for cache.)
+* Clear cache for site. (In Chrome, go to `chrome://settings/cookies` and "all site data and permissions"; in Firefox, go to `about:preferences` and search for "cache" then "Manage Data".)
-* Unregister service worker (in Chrome, go to `chrome://serviceworker-internals/`; in Firefox, go to `about:serviceworkers` or `about:debugging`).
+* Unregister service worker (in Chrome, go to `chrome://serviceworker-internals/`; in Firefox, go to `about:serviceworkers`).
-* Clear notification permission (in Chrome, go to `chrome://settings/content/notifications`; in Firefox, go to `about:preferences` and search).
+* Clear notification permission (in Chrome, go to `chrome://settings/content/notifications`; in Firefox, go to `about:preferences` and search for "notifications").
 * Clear Cache Storage (in Chrome, in dev tools under Application; in Firefox, in dev tools under Storage).
 
 

project.task.yaml

@@ -3,12 +3,15 @@ tasks:
 
 - 08 notifications :
   - lock down regenerate_vapid endpoint (so only we admins can do it on demand)
-  - remove sleep in py-push-server app.py
+  - make the app behave correctly when App Notifications are turned off
+  - remove "mute notifications"
+  - remove sleep in py-push-server app.py?
   - see if we can detect OS-level notifications if turned off
   - write troubleshooting docs for notifications
   - make the "App Notifications" toggle on when they first turn notifications on
   - in py-push-server, when sending a push to a subscriber and we get on a 410 "error #106", delete the subscription record
   - https://gitea.anomalistdesign.com/trent_larson/py-push-server/pulls/3/files
+  - remove "notification push server" advanced setting since it only makes sense on the current domain
 
 - .3 fix the Project-location-selection map display to not show on top of bottom icons (and any other UI tweaks on the map flow) assignee-group:ui
 

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.subscription = await registration.pushManager.getSubscription();
-      this.toggleNotifications = !!subscription;
+      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>