From 5efc90ca17079823a65af3c7dfef6c1b521ce906 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sat, 20 May 2023 15:52:37 +0200
Subject: [PATCH] Better PWA installation prompt.

Display a popup modal instead of a confirm box to prompt the user to
install the PWA app.

`confirm` blocks the JavaScript engine when run in `beforeMount` and
therefore the browser won't be able to proceed with `event.prompt()`.
---
 platypush/backend/http/webapp/src/App.vue      | 18 +++++++++++++++---
 .../src/components/elements/ConfirmDialog.vue  |  2 --
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/platypush/backend/http/webapp/src/App.vue b/platypush/backend/http/webapp/src/App.vue
index f10cd04b..c19f9063 100644
--- a/platypush/backend/http/webapp/src/App.vue
+++ b/platypush/backend/http/webapp/src/App.vue
@@ -4,11 +4,15 @@
   <VoiceAssistant ref="voice-assistant" v-if="hasAssistant" />
   <Pushbullet ref="pushbullet" v-if="hasPushbullet" />
   <Ntfy ref="ntfy" v-if="hasNtfy" />
+  <ConfirmDialog ref="pwaDialog" @input="installPWA">
+    Would you like to install this application locally?
+  </ConfirmDialog>
 
   <router-view />
 </template>
 
 <script>
+import ConfirmDialog from "@/components/elements/ConfirmDialog";
 import Notifications from "@/components/Notifications";
 import Utils from "@/Utils";
 import Events from "@/Events";
@@ -21,13 +25,14 @@ export default {
   name: 'App',
   mixins: [Utils],
   components: {
-    Pushbullet, Ntfy, Notifications, Events, VoiceAssistant
+    ConfirmDialog, Pushbullet, Ntfy, Notifications, Events, VoiceAssistant
   },
 
   data() {
     return {
       config: {},
       userAuthenticated: false,
+      pwaInstallEvent: null,
     }
   },
 
@@ -62,6 +67,13 @@ export default {
       this.config = await this.request('config.get', {}, 60000, false)
       this.userAuthenticated = true
     },
+
+    installPWA() {
+      if (this.pwaInstallEvent)
+        this.pwaInstallEvent.prompt()
+
+      this.$refs.pwaDialog.close()
+    }
   },
 
   created() {
@@ -71,8 +83,8 @@ export default {
   beforeMount() {
     window.addEventListener('beforeinstallprompt', (e) => {
       e.preventDefault()
-      if (confirm('Would you like to install the application for more features?'))
-        e.prompt()
+      this.pwaInstallEvent = e
+      this.$refs.pwaDialog.show()
     })
   },
 
diff --git a/platypush/backend/http/webapp/src/components/elements/ConfirmDialog.vue b/platypush/backend/http/webapp/src/components/elements/ConfirmDialog.vue
index 54368aac..3439ad48 100644
--- a/platypush/backend/http/webapp/src/components/elements/ConfirmDialog.vue
+++ b/platypush/backend/http/webapp/src/components/elements/ConfirmDialog.vue
@@ -64,10 +64,8 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: right;
-    padding: 1em 0 1em 1em;
     border: 0;
     border-radius: 0;
-    box-shadow: 0 -1px 2px 0 $default-shadow-color;
 
     button {
       margin-right: 1em;