move wait for service-worker initialization into the notification modal

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
 

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(

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) {

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,

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>