106 lines
3.1 KiB
Vue
106 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<Transition name="fade">
|
||
|
|
<div
|
||
|
|
v-if="showUpdatePrompt"
|
||
|
|
class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 z-[9999]"
|
||
|
|
>
|
||
|
|
<div class="glass-card p-4 flex items-center gap-4">
|
||
|
|
<div class="flex-1">
|
||
|
|
<p class="text-white/90 text-sm font-medium mb-1">Update Available</p>
|
||
|
|
<p class="text-white/70 text-xs">A new version is available. Click to update.</p>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
@click="handleUpdate"
|
||
|
|
class="glass-button px-4 py-2 rounded-lg text-sm font-medium transition-all hover:bg-black/70 hover:border-white/30"
|
||
|
|
>
|
||
|
|
Update
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
@click="dismissUpdate"
|
||
|
|
class="text-white/50 hover:text-white/80 transition-colors p-2"
|
||
|
|
aria-label="Dismiss"
|
||
|
|
>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Transition>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted } from 'vue'
|
||
|
|
|
||
|
|
const showUpdatePrompt = ref(false)
|
||
|
|
let updateCallback: (() => Promise<void>) | null = null
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
// Listen for service worker updates
|
||
|
|
if ('serviceWorker' in navigator) {
|
||
|
|
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
||
|
|
// Service worker updated, reload the page
|
||
|
|
window.location.reload()
|
||
|
|
})
|
||
|
|
|
||
|
|
// Check for updates periodically
|
||
|
|
const checkForUpdates = async () => {
|
||
|
|
const registration = await navigator.serviceWorker.getRegistration()
|
||
|
|
if (registration) {
|
||
|
|
await registration.update()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Check for updates every 5 minutes
|
||
|
|
setInterval(checkForUpdates, 5 * 60 * 1000)
|
||
|
|
|
||
|
|
// Listen for updatefound event
|
||
|
|
navigator.serviceWorker.getRegistration().then((registration) => {
|
||
|
|
if (registration) {
|
||
|
|
registration.addEventListener('updatefound', () => {
|
||
|
|
const newWorker = registration.installing
|
||
|
|
if (newWorker) {
|
||
|
|
newWorker.addEventListener('statechange', () => {
|
||
|
|
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
|
||
|
|
// New service worker installed, show update prompt
|
||
|
|
showUpdatePrompt.value = true
|
||
|
|
updateCallback = async () => {
|
||
|
|
if (newWorker.state === 'installed' && registration.waiting) {
|
||
|
|
// Skip waiting and activate the new service worker
|
||
|
|
registration.waiting.postMessage({ type: 'SKIP_WAITING' })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
function dismissUpdate() {
|
||
|
|
showUpdatePrompt.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
async function handleUpdate() {
|
||
|
|
if (updateCallback) {
|
||
|
|
await updateCallback()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.fade-enter-active,
|
||
|
|
.fade-leave-active {
|
||
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fade-enter-from,
|
||
|
|
.fade-leave-to {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(20px);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|