Detect if other tabs are running (#123)

* detect if another tab is already running * detect if another tab is already running * register broadcast channel earlier
cashubtc · May 9, 2024 · 0cf4138 · 0cf4138
1 parent a6dd266
commit 0cf4138
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 52 deletions.
diff --git a/src/pages/AlreadyRunning.vue b/src/pages/AlreadyRunning.vue
@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="fullscreen bg-dark text-white text-center q-pa-md flex flex-center"
+  >
+    <div>
+      <div class="text-h3">Nope.</div>
+      <div class="text-h5 q-ma-lg text-grey">
+        Another tab is already running. Close this tab and try again.
+      </div>
+      <q-btn
+        rounded
+        class="q-mt-md"
+        color="white"
+        text-color="black"
+        unelevated
+        to="/"
+        label="Retry"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "AlreadyRunning",
+});
+</script>
diff --git a/src/pages/WalletPage.vue b/src/pages/WalletPage.vue
@@ -530,52 +530,47 @@ export default {
         }
       });
     },
-    registerLocalStorageSyncHook: function () {
-      // makes sure that local storage stays up to date
-      // in multiple tabs of the same window
-      window.addEventListener("storage", (e) => {
-        // console.log(`Key Changed: ${e.key}`)
-        // console.log(`New Value: ${e.newValue}`)
-        // if these were the proofs, reload them
-        if (e.key == "cashu.proofs") {
-          console.log("updating proofs");
-          this.setProofs(JSON.parse(e.newValue));
+    registerBroadcastChannel: function () {
+      // register broadcast channel to communicate between tabs
+      const channel = new BroadcastChannel("app_channel");
+      channel.postMessage("new_tab_opened");
+      channel.onmessage = (event) => {
+        console.log("Message from another tab:", event.data);
+        if (event.data == "new_tab_opened") {
+          // if another tab is opened, respond with "already_running"
+          channel.postMessage("already_running");
         }
-        // if these were the activeMintUrl, reload
-        if (e.key == "cashu.activeMintUrl") {
-          this.activateMintUrl(e.newValue);
+        if (event.data == "already_running") {
+          // if another tab is already running, navigate to /already-running
+          window.location.href = "/already-running";
         }
-      });
-    },
-
-    ////////////// STORAGE /////////////
-    migrationLocalstorage: async function () {
-      // migration from old db to multimint
-      for (var key in localStorage) {
-        let match = key.match("cashu.(.+).proofs");
-        if (match != null) {
-          console.log("Migrating mint", match[1]);
-          let mint_id = match[1];
-          const old_proofs = JSON.parse(
-            localStorage.getItem(`cashu.${mint_id}.proofs`)
-          );
-          if (old_proofs) {
-            this.setProofs(this.proofs.concat(old_proofs));
-            // this.storeProofs();
-            let mint_url = this.baseHost + `/cashu/api/v1/${mint_id}`;
-            console.log("Adding mint", mint_url);
-            await this.addMint(mint_url);
-            localStorage.removeItem(`cashu.${mint_id}.proofs`);
-          }
-        }
-      }
+      };
     },
+    // registerLocalStorageSyncHook: function () {
+    //   // receives events if other tabs change local storage
+    //   window.addEventListener("storage", (e) => {
+    //     // console.log(`Key Changed: ${e.key}`);
+    //     // console.log(`New Value: ${e.newValue}`);
+    //     // if these were the proofs, reload them
+    //     // if (e.key == "cashu.proofs") {
+    //     //   console.log("updating proofs");
+    //     //   this.setProofs(JSON.parse(e.newValue));
+    //     // }
+    //     // // if these were the activeMintUrl, reload
+    //     // if (e.key == "cashu.activeMintUrl") {
+    //     //   this.activateMintUrl(e.newValue);
+    //     // }
+    //   });
+    // },
   },
   watch: {},
 
   mounted: function () {},
 
   created: async function () {
+    // check if another tab is open
+    this.registerBroadcastChannel();
+
     let params = new URL(document.location).searchParams;
 
     // mint url
@@ -592,9 +587,6 @@ export default {
     console.log("Mint URL " + this.activeMintUrl);
     console.log("Wallet URL " + this.baseURL);
 
-    // run migrations
-    await this.migrationLocalstorage();
-
     // get token to receive tokens from a link
     if (params.get("token")) {
       let tokenBase64 = params.get("token");
@@ -627,18 +619,9 @@ export default {
     );
 
     // startup tasks
-    // await this.checkProofsSpendable(this.activeProofs, true).catch((err) => {
-    //   return;
-    // });
-    // await this.checkPendingInvoices().catch((err) => {
-    //   return;
-    // });
-    // await this.checkPendingTokens().catch((err) => {
-    //   return;
-    // });
-
-    // Local storage sync hook
-    this.registerLocalStorageSyncHook();
+
+    // // Local storage sync hook
+    // this.registerLocalStorageSyncHook();
 
     // PWA install hook
     this.registerPWAEventHook();

diff --git a/src/router/routes.js b/src/router/routes.js
@@ -11,6 +11,13 @@ const routes = [
     component: () => import("layouts/FullscreenLayout.vue"),
     children: [{ path: "", component: () => import("src/pages/Settings.vue") }],
   },
+  {
+    path: "/already-running",
+    component: () => import("layouts/FullscreenLayout.vue"),
+    children: [
+      { path: "", component: () => import("src/pages/AlreadyRunning.vue") },
+    ],
+  },
   // Always leave this as last one,
   // but you can also remove it
   {