sozsoft-platform/ui/src/views/version/swRegistration.ts

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 refresh automatically.</p>
    </div>
  `
  document.body.appendChild(overlay)
}

export const registerServiceWorker = () => {
  registerSW({
    immediate: true,
    onNeedRefresh() {
      console.log('🔔 New version available, refreshing…')
      showUpdateOverlay()
      window.location.reload()
    },
    onOfflineReady() {
      console.log('📦 App offline ready')
    },
  })
}