Cashu: PWA install button (#1455)

lnbits/extensions/cashu/templates/cashu/wallet.html

@@ -370,7 +370,7 @@ page_container %}
             <div class="col-4 q-pt-xs">
               <div align="center">
                 <q-btn
-                  class="q-mx-xs q-px-none"
+                  class="q-mx-xs q-px-none q-my-sm"
                   size="0.5rem"
                   rectangle
                   color="warning"
@@ -380,7 +380,7 @@ page_container %}
                   ><q-tooltip>Warning</q-tooltip></q-btn
                 >
                 <q-btn
-                  class="q-mx-xs q-px-none"
+                  class="q-mx-xs q-px-none q-my-sm"
                   size="0.5rem"
                   outline
                   rectangle
@@ -389,6 +389,15 @@ page_container %}
                   @click="getLocalstorageToFile"
                   ><q-tooltip>Download wallet backup</q-tooltip></q-btn
                 >
+                <q-btn
+                  class="q-mx-xs q-px-none q-my-sm"
+                  outline
+                  size="0.5rem"
+                  v-if="getPWADisplayMode()=='browser' && deferredPWAInstallPrompt != null"
+                  color="primary"
+                  @click="triggerPWAInstall()"
+                  ><b>Install</b><q-tooltip>Install Cashu</q-tooltip></q-btn
+                >
               </div>
             </div>
             <div class="col-4 q-pt-none">
@@ -708,8 +717,20 @@ page_container %}
               Backup button to download a copy of your tokens.
             </p>
             <div class="row q-mt-lg">
-              <q-btn outline color="grey" @click="copyText(baseURL)"
+              <q-btn
-                >Copy wallet URL</q-btn
+                outline
+                class="q-mx-sm"
+                v-if="getPWADisplayMode()=='browser' && deferredPWAInstallPrompt != null"
+                color="primary"
+                @click="triggerPWAInstall()"
+                >Install Cashu</q-btn
+              >
+              <q-btn
+                outline
+                color="grey"
+                class="q-mx-sm"
+                @click="copyText(baseURL)"
+                >Copy URL</q-btn
               >
               <q-btn
                 v-close-popup
@@ -1033,6 +1054,7 @@ page_container %}
         keys: '',
         proofs: [],
         activeProofs: [],
+        deferredPWAInstallPrompt: null,
         invoicesCashu: [],
         historyTokens: [],
         invoiceData: {
@@ -2443,7 +2465,6 @@ page_container %}
       ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
       ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-      ////////////// UI HELPERS /////////////
       assertMintError: function (response, verbose = true) {
         if (response.error != null) {
           if (verbose) {
@@ -2452,6 +2473,32 @@ page_container %}
           throw new Error(`Mint error: ${response.error}`)
         }
       },
+
+      ////////////// UI HELPERS /////////////
+      getPWADisplayMode: function () {
+        const isStandalone = window.matchMedia(
+          '(display-mode: standalone)'
+        ).matches
+        if (document.referrer.startsWith('android-app://')) {
+          return 'twa'
+        } else if (navigator.standalone || isStandalone) {
+          return 'standalone'
+        }
+        return 'browser'
+      },
+      triggerPWAInstall: function () {
+        // Show the install prompt
+        this.deferredPWAInstallPrompt.prompt()
+        // Wait for the user to respond to the prompt
+        this.deferredPWAInstallPrompt.userChoice.then(choiceResult => {
+          if (choiceResult.outcome === 'accepted') {
+            console.log('User accepted the install prompt')
+            this.setWelcomeDialogSeen()
+          } else {
+            console.log('User dismissed the install prompt')
+          }
+        })
+      },
       showNoMintsWarning: function () {
         if (!this.activeMintURL) {
           this.walletURL = this.baseURL
@@ -2680,26 +2727,6 @@ page_container %}
         await this.fetchMintKeys()
       }
 
-      // const keysJson = localStorage.getItem(this.mintKey(this.mintId, 'keys'))
-      // if (!keysJson) {
-      //   if (this.activeMintURL.length) {
-      //     this.fetchMintKeys()
-      //   }
-      // } else {
-      //   this.keys = JSON.parse(keysJson)
-      // }
-
-      // this.invoicesCashu = JSON.parse(
-      //   localStorage.getItem(this.mintKey(this.mintId, 'invoicesCashu')) || '[]'
-      // )
-
-      // this.historyTokens = JSON.parse(
-      //   localStorage.getItem(this.mintKey(this.mintId, 'historyTokens')) || '[]'
-      // )
-      // this.proofs = JSON.parse(
-      //   localStorage.getItem(this.mintKey(this.mintId, 'proofs')) || '[]'
-      // )
-
       this.invoicesCashu = JSON.parse(
         localStorage.getItem('cashu.invoicesCashu') || '[]'
       )
@@ -2752,7 +2779,20 @@ page_container %}
         this.activateMint(startupMintUrl)
       }
 
+      // Initialize deferredPWAInstallPrompt for use later to show browser install prompt.
       this.showWelcomeDialog()
+
+      // register event listener for PWA install prompt
+      window.addEventListener('beforeinstallprompt', e => {
+        // Prevent the mini-infobar from appearing on mobile
+        // e.preventDefault()
+        // Stash the event so it can be triggered later.
+        this.deferredPWAInstallPrompt = e
+        console.log(
+          `'beforeinstallprompt' event was fired.`,
+          this.getPWADisplayMode()
+        )
+      })
     }
   })
 </script>