add PWA update from change version

src/App.svelte

@@ -2,10 +2,14 @@
   import MainMenu from '$lib/pages/main/MainMenu.svelte';
   import PrintMenu from '$lib/pages/print/PrintMenu.svelte';
   import ScanPage from '$lib/pages/scan/ScanPage.svelte';
+  import UpdateBanner from '$lib/common/ui/UpdateBanner.svelte';
+  import { useUpdateCheck } from '$lib/common/hooks/useUpdateCheck.svelte.js';
 
   /** @type {'main' | 'print' | 'scan'} */
   let page = $state('main');
 
+  const { needRefresh, doUpdate } = useUpdateCheck();
+
   /** @param {'print' | 'scan' | 'photo' | 'access'} id */
   function handleAction(id) {
     if (id === 'print') {
@@ -20,6 +24,10 @@
   function handleBack() {
     page = 'main';
   }
+
+  function handleDismiss() {
+    // Пользователь нажал "Позже", баннер скроется
+  }
 </script>
 
 <style>
@@ -29,7 +37,6 @@
     padding: 0;
     background: #0b0d11;
   }
-
   :global(body) {
     display: block;
     place-items: initial;
@@ -38,12 +45,10 @@
     font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
     -webkit-font-smoothing: antialiased;
   }
-
   .app-wrapper {
     display: flex;
     justify-content: center;
   }
-
   @media (max-width: 480px) {
     .app-wrapper {
       justify-content: center;
@@ -51,6 +56,10 @@
   }
 </style>
 
+{#if needRefresh}
+  <UpdateBanner onUpdate={doUpdate} onDismiss={handleDismiss} />
+{/if}
+
 <main class="app-wrapper">
   {#if page === 'main'}
     <MainMenu onAction={handleAction} />

src/lib/common/hooks/useUpdateCheck.svelte.js

@@ -0,0 +1,55 @@
+// lib/common/hooks/useUpdateCheck.svelte.js
+let needRefresh = $state(false);
+let updateServiceWorker = () => {};
+
+try {
+  const { useRegisterSW } = await import('virtual:pwa-register/svelte');
+  
+  const sw = useRegisterSW({
+    onRegistered(registration) {
+      console.log('✅ Service Worker зарегистрирован:', registration);
+      
+      if (registration) {
+        setInterval(() => {
+          registration.update();
+        }, 30 * 60 * 1000);
+        
+        document.addEventListener('visibilitychange', () => {
+          if (document.visibilityState === 'visible') {
+            registration.update();
+          }
+        });
+      }
+    },
+    onRegisterError(error) {
+      console.error('❌ Ошибка регистрации SW:', error);
+    }
+  });
+
+  if (sw?.needRefresh) {
+    $effect(() => {
+      needRefresh = sw.needRefresh[0];
+    });
+    updateServiceWorker = sw.updateServiceWorker || (() => {});
+  }
+} catch (error) {
+  console.warn('⚠️ PWA update check не инициализирован (возможно, dev-режим):', error);
+  needRefresh = false;
+}
+
+async function doUpdate() {
+  try {
+    await updateServiceWorker(true);
+    window.location.reload();
+  } catch (error) {
+    console.error('Ошибка обновления:', error);
+    window.location.reload();
+  }
+}
+
+export function useUpdateCheck() {
+  return {
+    get needRefresh() { return needRefresh; },
+    doUpdate
+  };
+}

src/lib/common/ui/UpdateBanner.svelte

@@ -0,0 +1,139 @@
+<!-- lib/common/ui/UpdateBanner.svelte -->
+<script>
+  let { onUpdate, onDismiss } = $props();
+  let dismissed = $state(false);
+
+  function handleUpdate() {
+    onUpdate?.();
+  }
+
+  function handleDismiss() {
+    dismissed = true;
+    onDismiss?.();
+  }
+</script>
+
+{#if !dismissed}
+  <div class="update-banner">
+    <div class="banner-content">
+      <div class="banner-icon">🔄</div>
+      <div class="banner-text">
+        <p class="banner-title">Доступна новая версия</p>
+        <p class="banner-description">Обновите приложение для получения новых функций</p>
+      </div>
+      <div class="banner-actions">
+        <button class="btn-dismiss" onclick={handleDismiss}>Позже</button>
+        <button class="btn-update" onclick={handleUpdate}>Обновить</button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .update-banner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10000;
+    padding: 12px 16px;
+    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+    animation: slide-down 0.3s ease-out;
+  }
+
+  @keyframes slide-down {
+    from {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  .banner-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .banner-icon {
+    font-size: 24px;
+    flex-shrink: 0;
+  }
+
+  .banner-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .banner-title {
+    margin: 0 0 4px;
+    font-size: 15px;
+    font-weight: 700;
+    color: #fff;
+  }
+
+  .banner-description {
+    margin: 0;
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.85);
+    line-height: 1.4;
+  }
+
+  .banner-actions {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .btn-dismiss,
+  .btn-update {
+    padding: 8px 16px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s;
+  }
+
+  .btn-dismiss {
+    background: rgba(255, 255, 255, 0.15);
+    color: #fff;
+  }
+
+  .btn-dismiss:hover {
+    background: rgba(255, 255, 255, 0.25);
+  }
+
+  .btn-update {
+    background: #fff;
+    color: #6366f1;
+  }
+
+  .btn-update:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  @media (max-width: 640px) {
+    .banner-content {
+      flex-wrap: wrap;
+    }
+
+    .banner-text {
+      flex-basis: calc(100% - 48px);
+    }
+
+    .banner-actions {
+      width: 100%;
+      justify-content: flex-end;
+      margin-top: 8px;
+    }
+  }
+</style>

src/lib/pages/print/PrintUI.svelte

@@ -1,4 +1,4 @@
-<!-- svelte-ignore a11y_click_1vents_have_key_events a11y_no_static_element_interactions a11y_label_has_associated_control slot_element_deprecated svelte_self_deprecated -->
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions a11y_label_has_associated_control slot_element_deprecated svelte_self_deprecated -->
 <!-- lib/pages/print/PrintUI.svelte -->
 <script>
   import { QUALITIES, COLOR_MODES } from '$lib/common/utils/pricing.util.js';

vite.config.js

@@ -19,9 +19,28 @@ export default defineConfig({
       }
     }),
     VitePWA({
-      registerType: 'autoUpdate',
+      registerType: 'prompt',
+      injectRegister: 'auto',
       workbox: {
-        globPatterns: ['**/*.{js,css,html,ico,png,svg,wasm}']
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,wasm}'],
+        // Важно: не кэшируем API endpoint версии
+        navigateFallbackDenylist: [/^\/api\/version/],
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'google-fonts-cache',
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 60 * 24 * 365 // 1 год
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          }
+        ]
       },
       manifest: {
         name: 'UnitPrint',
@@ -29,12 +48,17 @@ export default defineConfig({
         start_url: '/',
         display: 'standalone',
         background_color: '#ffffff',
-        theme_color: '#ff3e00',
+        theme_color: '#6366f1',
         icons: [
           {
             src: '/icon-192x192.png',
             sizes: '192x192',
             type: 'image/png'
+          },
+          {
+            src: '/icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
           }
         ]
       }