52 lines
1.6 KiB
Vue
52 lines
1.6 KiB
Vue
<template>
|
|
<div v-if="deferredPrompt && !isStandalone" class="fixed bottom-6 right-6 z-50">
|
|
<button
|
|
@click="installApp"
|
|
class="bg-blue-600 hover:bg-blue-500 text-white px-6 py-3 rounded-2xl font-bold shadow-2xl flex items-center gap-3 transition-all transform hover:scale-105 active:scale-95 group"
|
|
>
|
|
<span class="text-xl group-hover:rotate-12 transition-transform">📲</span>
|
|
<span>Установить XFlow</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const deferredPrompt = ref(null)
|
|
const isStandalone = ref(false)
|
|
|
|
onMounted(() => {
|
|
isStandalone.value = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone
|
|
|
|
window.addEventListener('beforeinstallprompt', (e) => {
|
|
e.preventDefault()
|
|
deferredPrompt.value = e
|
|
})
|
|
|
|
window.addEventListener('appinstalled', () => {
|
|
deferredPrompt.value = null
|
|
})
|
|
})
|
|
|
|
const installApp = async () => {
|
|
if (!deferredPrompt.value) {
|
|
alert('Браузер еще не подготовил установку. Пожалуйста, подождите 10-20 секунд или проверьте вкладку Application в консоли.')
|
|
return
|
|
}
|
|
|
|
deferredPrompt.value.prompt()
|
|
const { outcome } = await deferredPrompt.value.userChoice
|
|
console.log(`PWA: user choice outcome: ${outcome}`)
|
|
deferredPrompt.value = null
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@keyframes bounce-subtle {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-5px); }
|
|
}
|
|
.animate-bounce-subtle {
|
|
animation: bounce-subtle 3s ease-in-out infinite;
|
|
}
|
|
</style>
|