Merge pull request #149 from mowolf/PWA-Install-Button

Pwa install button

components/ExportExplainer.vue

@@ -28,6 +28,16 @@
                 @click.native.stop="tabStatus = [i, i]"
               >
                 <v-row v-html="tabItem.text" style="cursor: pointer"> </v-row>
+                <v-btn
+                  v-if="i === 0 && tab === 1"
+                  v-bind:disabled="!installButtonStatus"
+                  v-on:click="downloadPWA"
+                  id="dlPWA "
+                  class="mt-5 pa-2 white--text"
+                  color="#07bc4c"
+                  style=""
+                  >add to Homescreen</v-btn
+                >
               </v-timeline-item>
             </v-timeline>
 
@@ -41,7 +51,6 @@
               "
               color="#07bc4c"
               class="text-md-h6 text-caption ml-10 white--text"
-              style="max-width: 100%"
             >
               <v-icon>mdi-arrow-right</v-icon>
               Select file via box above.
@@ -65,8 +74,7 @@
                   :key="idx"
                   @click.native.stop="increaseTabstatus()"
                 >
-                  <v-img contain :lazy-src="item.imgLazy" :src="item.img">
-                  </v-img>
+                  <v-img :lazy-src="item.imgLazy" :src="item.img"> </v-img>
                   <v-btn
                     fab
                     outlined
@@ -104,8 +112,6 @@ import iOS_img6_lazy from "@/assets/img/iOS/Frame6_lazy.png";
 import iOS_img6 from "@/assets/img/iOS/Frame6.png";
 import iOS_img7_lazy from "@/assets/img/iOS/Frame7_lazy.png";
 import iOS_img7 from "@/assets/img/iOS/Frame7.png";
-import iOS_img8_lazy from "@/assets/img/iOS/Frame8_lazy.png";
-import iOS_img8 from "@/assets/img/iOS/Frame8.png";
 // Android
 import AndroidFrame from "@/assets/img/Android/frameAndroid.png";
 import img1_lazy from "@/assets/img/Android/1copy.png";
@@ -116,11 +122,15 @@ import img3_lazy from "@/assets/img/Android/3copy.png";
 import img3 from "@/assets/img/Android/3.png";
 import img4_lazy from "@/assets/img/Android/4copy.png";
 import img4 from "@/assets/img/Android/4.png";
-import img5_lazy from "@/assets/img/Android/5copy.png";
 import img5 from "@/assets/img/Android/5.png";
+import img5_lazy from "@/assets/img/Android/5copy.png";
+import img6 from "@/assets/img/Android/6.png";
+import img6_lazy from "@/assets/img/Android/6copy.png";
 
 export default {
   data: () => ({
+    deferredPrompt: null,
+    installButtonStatus: false,
     tabStatus: [0, 0],
     tab:
       navigator.platform.toLowerCase().includes("ios") ||
@@ -139,66 +149,55 @@ export default {
             imgLazy: iOS_img1_lazy,
             text: "",
             x: "50%",
-            y: "20%",
+            y: "10%",
           },
           {
             img: iOS_img2,
             imgLazy: iOS_img2_lazy,
             text: "",
             x: "50%",
-            y: "10%",
+            y: "88%",
           },
           {
             img: iOS_img3,
             imgLazy: iOS_img3_lazy,
             text: "",
-            x: "50%",
-            y: "88%",
+            x: "20%",
+            y: "61%",
           },
           {
             img: iOS_img4,
             imgLazy: iOS_img4_lazy,
             text: "",
-            x: "20%",
-            y: "61%",
+            x: "50%",
+            y: "76%",
           },
           {
             img: iOS_img5,
             imgLazy: iOS_img5_lazy,
             text: "",
             x: "50%",
-            y: "76%",
+            y: "63%",
           },
           {
             img: iOS_img6,
             imgLazy: iOS_img6_lazy,
             text: "",
             x: "50%",
-            y: "63%",
+            y: "32%",
           },
           {
             img: iOS_img7,
             imgLazy: iOS_img7_lazy,
             text: "",
-            x: "85%",
-            y: "11%",
-          },
-          {
-            img: iOS_img8,
-            imgLazy: iOS_img8_lazy,
-            text: "",
             x: "50%",
             y: "81.5%",
           },
         ],
         tabItems: [
           {
             text:
-              "<span>On iPhone open WhatsApp and tap on the chat you would like to export.</span>",
-          },
-          {
-            text:
-              "<span>Tap on the name of the chat at the top to open <b>Group/Chat Info</b>.</span>",
+              "<span>On iPhone <b>open</b> WhatsApp and the <b>chat</b> or <b>group chat</b> you would like to export > at the top <b>tap on</b> the <b>name</b> of the chat.</span>",
           },
           {
             text:
@@ -216,7 +215,7 @@ export default {
           },
           {
             text:
-              "<span>Finally select <b >On my iPhone</b> to save it locally.</span>",
+              "<span>Finally select <b >On my iPhone</b> and <b >save</b> to save it locally.</span>",
           },
           {
             text:
@@ -232,14 +231,14 @@ export default {
             img: img1,
             imgLazy: img1_lazy,
             text: "",
-            x: "50%",
-            y: "18%",
+            x: "78%",
+            y: "51%",
           },
           {
             img: img2,
             imgLazy: img2_lazy,
             text: "",
-            x: "50%",
+            x: "89%",
             y: "13%",
           },
           {
@@ -260,18 +259,25 @@ export default {
             img: img5,
             imgLazy: img5_lazy,
             text: "",
-            x: "27%",
-            y: "50%",
+            x: "67%",
+            y: "48%",
+          },
+          {
+            img: img6,
+            imgLazy: img6_lazy,
+            text: "",
+            x: "14%",
+            y: "73%",
           },
         ],
         tabItems: [
           {
             text:
-              "<span>On your Android phone open <b>WhatsApp</b> and tap on the chat you would like to export.</span>",
+              "<span>On your Android phone open this Website in <b>Chrome</b> and tap on the button <b>add to Homescreen</b> and press install</span>",
           },
           {
             text:
-              "<span>Tap on the name of the chat at the top to open the <b >Group/Chat Info</b>.</span>",
+              "<span>Open <b>WhatsApp</b> and tap on the chat you would like to export > tap on the <b>three-dots</b> at the top right corner.</span>",
           },
           {
             text: "<span>In the new menu tap on <b>More</b>.</span>",
@@ -281,7 +287,11 @@ export default {
           },
           {
             text:
-              "<span>Choose <b>Without Media</b> and send the file yourself via <b>E-Mail</b> or save it to <b>Google Drive</b>.</span>",
+              "<span>Choose Without Media or <b>Include Media</b> if you want to include your images and other files in the export.</span>",
+          },
+          {
+            text:
+              "<span>Now in the sharing view tap on <b>Whatsanalyze</b> or alternatively if you skipped step 1 send it to your self via <b>E-Mail</b> or save it to <b>Google Drive</b>.</span>",
           },
         ],
       },
@@ -294,6 +304,46 @@ export default {
       a[this.tab] = Math.min(a[this.tab] + 1, maxValue);
       this.tabStatus = a;
     },
+    async downloadPWA() {
+      {
+        // Hide the app provided install promotion
+        this.showInstallPromotion(false);
+        // Show the install prompt
+        if (this.deferredPrompt) {
+          this.deferredPrompt.prompt();
+          // Wait for the user to respond to the prompt
+          const { outcome } = await this.deferredPrompt.userChoice;
+          // Optionally, send analytics event with outcome of user choice
+
+          this.$gtag.event("PWA install", {
+            event_category: "home",
+            event_label: "lead",
+            value: outcome,
+          });
+
+          // We've used the prompt, and can't use it again, throw it away
+          this.deferredPrompt = null;
+        }
+      }
+    },
+    // eslint-disable-next-line no-unused-vars
+    showInstallPromotion(status) {
+      this.installButtonStatus = status;
+    },
+    catchPWA() {
+      window.addEventListener("beforeinstallprompt", (e) => {
+        // Prevent the mini-infobar from appearing on mobile
+        e.preventDefault();
+        // Stash the event so it can be triggered later.
+        this.deferredPrompt = e;
+        // Update UI notify the user they can install the PWA
+        this.showInstallPromotion(true);
+        // Optionally, send analytics event that PWA install promo was shown.
+      });
+    },
+  },
+  created() {
+    this.catchPWA();
   },
 };
 </script>
@@ -315,6 +365,7 @@ export default {
   z-index: 99999;
   top: 2px;
 }
+
 .blinking {
   animation-name: blink;
   animation-duration: 2s;