don't allow notification service-worker interaction until it is ready

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"
+        v-if="!notificationMaybeChanged && serviceWorkerReady"
         class="flex items-center justify-between cursor-pointer"
         @click="showNotificationChoice()"
       >
@@ -130,10 +130,14 @@
           ></div>
         </div>
       </div>
-      <div v-else>
+      <div v-else-if="notificationMaybeChanged">
         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>
@@ -515,6 +519,7 @@ 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;
@@ -562,6 +567,8 @@ 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) {

sw_scripts/additional-scripts.js

@@ -18,7 +18,9 @@ function logConsoleAndDb(message, arg1, arg2) {
     self.appendDailyLog(fullMessage);
   } else {
     // sometimes we get the error: "Uncaught TypeError: self.appendDailyLog is not a function"
-    console.log("Not logging to DB because self.appendDailyLog doesn't exist.");
+    console.log(
+      "Not logging to DB (often because self.appendDailyLog doesn't exist).",
+    );
   }
 }