I have integrated a v-dialog component that shows up when my webapp loads and is utilized for installing the PWA:
<template>
<div>
<v-dialog
v-model="popupAndroid"
max-width="80%"
>
<v-card color="background">
<v-card-title class="headline" style="word-break: normal !important;"
>Add the {{nombreFarmacia}} app to your desktop.</v-card-title>
<v-card-text>
For a better experience add the {{nombreFarmacia}} app to your desktop.
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="dismiss">Cancel</v-btn>
<v-btn @click="install" color="primary" class="textoMenu--text">Accept</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog
v-model="popupIos"
max-width="80%"
>
<v-card color="background" class="pico">
<v-card-title class="headline" style="text-align: center; word-break: normal !important;"
>Add the {{nombreFarmacia}} app to your desktop.</v-card-title>
<v-card-text>
For a better experience add the {{nombreFarmacia}} app to your desktop install {{nombreFarmacia}} in your iPhone.
Press<br><img style="display:block; margin: 0 auto" src="boton-opciones-ios-min.png" width="40" height="40"><br> then "Add to start".
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="dismiss" color="primary" class="textoMenu--text">Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: "DialogInstalation",
data() {
return {
popupAndroid: null,
popupIos: null,
deferredPrompt: null,
nombreFarmacia: "",
userAgent: "",
};
},
created() {
// Android / desktop
this.nombreFarmacia = this.$store.getters.getPharmacy.name;
window.addEventListener("beforeinstallprompt", e => {
e.preventDefault();
// Stash the event so it can be triggered later.
this.deferredPrompt = e;
//console.log(e.platforms);
setTimeout(function () {
this.popupAndroid = true
},10000)
// Update UI notify the user they can install the PWA
});
window.addEventListener("appinstalled", () => {
this.popupAndroid = null;
});
//iOS
// Detects if device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
// Checks if should display install popup notification:
if (isIos() && !isInStandaloneMode()) {
this.popupIos = true;
}
},
methods: {
dismiss() {
this.popupAndroid = null;
this.popupIos = null;
},
install() {
this.popupAndroid = null
this.deferredPrompt.prompt();
}
}
};
</script>
Everything seems to be working fine. However, I'm facing an issue where I need the prompt to appear after a delay time. To achieve this, I attempted the following within the created method:
created() {
//Android / desktop
this.pharmacyName = this.$store.getters.getPharmacy.name;
window.addEventListener("beforeinstallprompt", e => {
e.preventDefault();
// Stash the event so it can be triggered later.
this.deferredPrompt = e;
//console.log(e.platforms);
setTimeout(function () {
this.popupAndroid = true
},10000)
...
... but unfortunately, the prompt doesn't appear using this method.