147 lines
3.5 KiB
Vue
147 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<div v-if="deferredPrompt" class="prompt-modal">
|
||
|
|
<div class="pwa-install-prompt-box">
|
||
|
|
<h1 class="title mb-4">نصب نسخه pwa هم فهمی - زیست بوم پژوهشگران</h1>
|
||
|
|
<div class="d-flex align-items-center mb-3">
|
||
|
|
<img
|
||
|
|
width="50"
|
||
|
|
height="50"
|
||
|
|
alt="لوگو"
|
||
|
|
src="assets/common/img/logo/logo.png"
|
||
|
|
/>
|
||
|
|
<p class="description mr-2 mb-0">
|
||
|
|
با نصب نسخه pwa، میتوانید بصورت آفلاین نیز کارهایتان رو انجام دهید.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex justify-content-between">
|
||
|
|
<div>
|
||
|
|
<button
|
||
|
|
id="installPWA"
|
||
|
|
title="نصب"
|
||
|
|
class="btn btn-primary ml-2"
|
||
|
|
type="button"
|
||
|
|
@click.prevent="installPwa()"
|
||
|
|
>
|
||
|
|
نصب
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
id="remindMeLater"
|
||
|
|
title="یادآوری بعد از 1 روز "
|
||
|
|
class="btn btn-secondary"
|
||
|
|
@click.prevnet="dismissPwaInstallationBox(1)"
|
||
|
|
>
|
||
|
|
بعدا
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
id="noNeed"
|
||
|
|
title="دیگر یادآوری نکن"
|
||
|
|
class="btn btn-danger"
|
||
|
|
@click.prevnet="dismissPwaInstallationBox(365)"
|
||
|
|
>
|
||
|
|
نیاز ندارم
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Cookies from "js-cookie";
|
||
|
|
import { mapActions } from "pinia";
|
||
|
|
import { useCommonStore } from "~/stores/commonStore";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
mounted() {
|
||
|
|
const vm = this;
|
||
|
|
|
||
|
|
this.checkBeforeAlertPwaNotSupported();
|
||
|
|
|
||
|
|
window.addEventListener("beforeinstallprompt", vm.beforeInstallPrompt);
|
||
|
|
window.addEventListener("appinstalled", vm.appInstalled);
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
window.removeEventListener("beforeinstallprompt", this.beforeInstallPrompt);
|
||
|
|
window.removeEventListener("appinstalled", this.appInstalled);
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
deferredPrompt: null,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
...mapActions(useCommonStore, [
|
||
|
|
"SET_IS_MOBILE",
|
||
|
|
"SET_IS_DESKTOP",
|
||
|
|
"SET_PWA_INSTALL_PROMPT_EVENT",
|
||
|
|
]),
|
||
|
|
beforeInstallPrompt(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
// Stash the event so it can be triggered later.
|
||
|
|
if (Cookies.get("add-to-home-screen") === undefined) {
|
||
|
|
this.SET_PWA_INSTALL_PROMPT_EVENT(e);
|
||
|
|
// vm.deferredPrompt = e;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
appInstalled() {
|
||
|
|
this.SET_PWA_INSTALL_PROMPT_EVENT(null);
|
||
|
|
// vm.deferredPrompt = null;
|
||
|
|
},
|
||
|
|
checkBeforeAlertPwaNotSupported() {
|
||
|
|
// let vm = this;
|
||
|
|
|
||
|
|
if (
|
||
|
|
identifyBrowser().includes("Firefox") &&
|
||
|
|
Cookies.get("add-to-home-screen") === undefined
|
||
|
|
)
|
||
|
|
alertPwaNotSupported();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.prompt-modal {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
z-index: 999;
|
||
|
|
background-color: rgba(0, 0, 0, 0.11);
|
||
|
|
|
||
|
|
// &::before {
|
||
|
|
// content: "";
|
||
|
|
// }
|
||
|
|
|
||
|
|
.pwa-install-prompt-box {
|
||
|
|
max-width: 30em;
|
||
|
|
width: 100%;
|
||
|
|
background: #fafafa;
|
||
|
|
border: 1px solid #eee;
|
||
|
|
margin: auto;
|
||
|
|
padding: 1em;
|
||
|
|
border-radius: 0 0 0.5em 0.5em;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 1rem;
|
||
|
|
font-family: "sahel-bold";
|
||
|
|
}
|
||
|
|
.description {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
text-align: justify;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-version-number {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
color: #aaa;
|
||
|
|
}
|
||
|
|
.new-version-number {
|
||
|
|
font-family: "sahel-bold";
|
||
|
|
font-size: 0.8rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|