move wait for service-worker initialization into the notification modal

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>