From def744b3df6ec32a08fb9c802c78022e4a38df3b Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Mon, 1 Jan 2024 20:04:37 -0700
Subject: [PATCH] don't allow notification service-worker interaction until it
 is ready

---
 src/views/AccountViewView.vue    | 11 +++++++++--
 sw_scripts/additional-scripts.js |  4 +++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 65f261bd..8af43b77 100644
--- a/src/views/AccountViewView.vue
+++ b/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) {
diff --git a/sw_scripts/additional-scripts.js b/sw_scripts/additional-scripts.js
index 60c00846..87b01728 100644
--- a/sw_scripts/additional-scripts.js
+++ b/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).",
+    );
   }
 }