move wait for service-worker initialization into the notification modal

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>