Uygulama eğer güncelleme varsa gösterecek

This commit is contained in:
Sedat Öztürk 2026-05-09 10:17:25 +03:00
parent 7db239a5d4
commit 4fd6d9627a

View file

@ -1,12 +1,93 @@
import { registerSW } from 'virtual:pwa-register'
function showUpdateOverlay() {
if (document.getElementById('sw-update-overlay')) return
const style = document.createElement('style')
style.id = 'sw-update-overlay-style'
style.textContent = `
#sw-update-overlay {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
#sw-update-overlay .sw-update-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
background: #fff;
border-radius: 16px;
padding: 40px 56px;
box-shadow: 0 8px 40px rgba(0,0,0,0.25);
text-align: center;
max-width: 360px;
width: 90%;
}
#sw-update-overlay .sw-update-spinner {
width: 56px;
height: 56px;
border: 5px solid #e5e7eb;
border-top-color: #6366f1;
border-radius: 50%;
animation: sw-spin 0.8s linear infinite;
}
@keyframes sw-spin {
to { transform: rotate(360deg); }
}
#sw-update-overlay .sw-update-title {
font-size: 18px;
font-weight: 700;
color: #1f2937;
margin: 0;
}
#sw-update-overlay .sw-update-desc {
font-size: 14px;
color: #6b7280;
margin: 0;
}
`
document.head.appendChild(style)
const overlay = document.createElement('div')
overlay.id = 'sw-update-overlay'
overlay.innerHTML = `
<div class="sw-update-card">
<div class="sw-update-spinner"></div>
<p class="sw-update-title">System Updating</p>
<p class="sw-update-desc">Loading new version, please wait...<br/>The page will reload automatically.</p>
</div>
`
document.body.appendChild(overlay)
}
export const registerServiceWorker = () => {
// autoUpdate modunda onNeedRefresh tetiklenmez.
// updatefound → yeni SW installing → overlay aç.
// skipWaiting: true (workbox config) → controllerchange → autoUpdate reload.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then((registration) => {
registration.addEventListener('updatefound', () => {
const newWorker = registration.installing
if (!newWorker) return
newWorker.addEventListener('statechange', () => {
// Yeni SW kuruldu, aktivasyon aşamasına geçiyor
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
showUpdateOverlay()
}
})
})
})
}
registerSW({
immediate: true,
onNeedRefresh() {
console.log('🔔 New version available, please refresh.')
window.location.reload()
},
onOfflineReady() {
console.log('📦 App offline ready')
},