95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
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,
|
||
onOfflineReady() {
|
||
console.log('📦 App offline ready')
|
||
},
|
||
})
|
||
}
|