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(