Uygulama eğer güncelleme varsa gösterecek
This commit is contained in:
parent
7db239a5d4
commit
4fd6d9627a
1 changed files with 85 additions and 4 deletions
|
|
@ -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')
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue