From 1f13bf772c7404c9d35dc8a1ce43b59469803b7a Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Mon, 1 Jan 2024 20:36:23 -0700
Subject: [PATCH] move wait for service-worker initialization into the
 notification modal

---
 project.task.yaml                   |  2 +-
 src/App.vue                         | 14 +++++++++++++-
 src/views/AccountViewView.vue       | 11 ++---------
 src/views/HelpNotificationsView.vue | 12 ++++++++----
 src/views/HomeView.vue              |  6 ++++--
 5 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/project.task.yaml b/project.task.yaml
index 86ac243..7921f11 100644
--- a/project.task.yaml
+++ b/project.task.yaml
@@ -3,10 +3,10 @@ tasks:
 
 - 08 notifications :
   - .2 after turning on notification, don't wait in push server but wait in client for message test (so that users don't have to wait 10 seconds for confirmation for some kind of confirmation)
-  - if navigator.serviceWorker is null, then tell the user to wait
   - Make sure instructions note - Local install works after cleared out cache in Chrome
 
 - fix maskable icon
+- change all list-inside to list-outside
 
 - 04 generate & store next public key hash, and give to contacts for storage
 
diff --git a/src/App.vue b/src/App.vue
index b8481b8..f34557a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -156,11 +156,17 @@
               class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
             >
               <div class="w-full px-6 py-6 text-slate-900 text-center">
-                <p class="text-lg mb-4">
+                <p v-if="serviceWorkerReady" class="text-lg mb-4">
                   Would you like to <b>turn on</b> notifications for this app?
                 </p>
+                <p v-else class="text-lg mb-4">
+                  Waiting for system initialization, which may take up to 10
+                  seconds...
+                  <fa icon="spinner" spin />
+                </p>
 
                 <button
+                  v-if="serviceWorkerReady"
                   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);
@@ -169,6 +175,7 @@
                 >
                   Turn on Notifications
                 </button>
+
                 <button
                   @click="close(notification.id)"
                   class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
@@ -297,6 +304,7 @@ export default class App extends Vue {
   $notify!: (notification: Notification, timeout?: number) => void;
 
   b64 = "";
+  serviceWorkerReady = false;
 
   async mounted() {
     try {
@@ -343,6 +351,10 @@ export default class App extends Vue {
         );
       }
     }
+    // there may be a long pause here on first initialization
+    navigator.serviceWorker.ready.then(() => {
+      this.serviceWorkerReady = true;
+    });
   }
 
   private sendMessageToServiceWorker(
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 8af43b7..65f261b 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -107,7 +107,7 @@
 
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
       <div
-        v-if="!notificationMaybeChanged && serviceWorkerReady"
+        v-if="!notificationMaybeChanged"
         class="flex items-center justify-between cursor-pointer"
         @click="showNotificationChoice()"
       >
@@ -130,14 +130,10 @@
           ></div>
         </div>
       </div>
-      <div v-else-if="notificationMaybeChanged">
+      <div v-else>
         Notification status may have changed. Revisit this page to see the
         latest setting.
       </div>
-      <div v-else-if="!serviceWorkerReady">
-        Waiting for system initialization...
-        <fa icon="spinner" class="fa-spin"></fa>
-      </div>
       <router-link class="px-4 text-sm text-blue-500" to="/help-notifications">
         Test your notification setup.
       </router-link>
@@ -519,7 +515,6 @@ export default class AccountViewView extends Vue {
   limits: RateLimits | null = null;
   limitsMessage = "";
   loadingLimits = true; // might as well now that we do it on mount, to avoid flashing the registration message
-  serviceWorkerReady = false;
   showContactGives = false;
 
   showDidCopy = false;
@@ -567,8 +562,6 @@ export default class AccountViewView extends Vue {
   async mounted() {
     try {
       const registration = await navigator.serviceWorker.ready;
-      // there may be a long pause here on first initialization
-      this.serviceWorkerReady = true;
       this.subscription = await registration.pushManager.getSubscription();
       this.isSubscribed = !!this.subscription;
     } catch (error) {
diff --git a/src/views/HelpNotificationsView.vue b/src/views/HelpNotificationsView.vue
index 4c53035..8400747 100644
--- a/src/views/HelpNotificationsView.vue
+++ b/src/views/HelpNotificationsView.vue
@@ -38,7 +38,10 @@
         </p>
       </div>
 
-      <h2 class="text-xl font-semibold">If this app is not installed...</h2>
+      <h2 class="text-xl font-semibold">
+        If this is not installed as an app...
+        <!-- Note that that exact verbiage shows in a message elsewhere. -->
+      </h2>
       <div>
         <p>
           For best results on mobile, install this app on your device (as
@@ -54,13 +57,13 @@
       </div>
 
       <h2 class="text-xl font-semibold">
-        If "you must enable notifications"...
+        If you must enable notifications...
+        <!-- Note that that exact verbiage shows in a message elsewhere. -->
       </h2>
       <div>
         <p>
-          Wait for about 10 seconds (for the service worker to activate), then
           <button class="text-blue-500" @click="showNotificationChoice()">
-            click here.
+            Click here.
           </button>
         </p>
       </div>
@@ -273,6 +276,7 @@ export default class HelpNotificationsView extends Vue {
           group: "alert",
           type: "danger",
           title: "Not Subscribed",
+          // Note that this exact verbiage shows in help text.
           text: "You must enable notifications before testing the web push.",
         },
         -1,
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 45177c7..69b39ce 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -15,12 +15,14 @@
         class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
       >
         <p>
-          You should install this as an app.
+          This is not installed as an app.
+          <!-- Note that that exact verbiage shows in the help. -->
+          Look for an "install" prompt or action.
           <router-link
             :to="{ name: 'help-notifications' }"
             class="text-blue-500"
           >
-            Go here for instructions.
+            Go here for more help.
           </router-link>
         </p>
       </div>