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'
|
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 = () => {
|
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({
|
registerSW({
|
||||||
immediate: true,
|
immediate: true,
|
||||||
onNeedRefresh() {
|
|
||||||
console.log('🔔 New version available, please refresh.')
|
|
||||||
window.location.reload()
|
|
||||||
},
|
|
||||||
onOfflineReady() {
|
onOfflineReady() {
|
||||||
console.log('📦 App offline ready')
|
console.log('📦 App offline ready')
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue