PWA, Service Workers та Offline-First стратегії в React-застосунках

// Service Worker: Fullstack Agentic Lab Enterprise PWA Core v2.4.0
// Використовує Workbox з офіційного CDN Google
importScripts('https://storage.googleapis.com/workbox-cdn/releases/7.0.0/workbox-sw.js');

if (workbox) {
  console.log('[SW]: Workbox успішно ініціалізовано.');

  // Примусове керування клієнтами
  workbox.core.clientsClaim();

  // 1. Прекешування критичного каркаса застосунку (App Shell)
  const PRECACHE_ASSETS = [
    { url: '/', revision: '2026-v2-core' },
    { url: '/manifest.webmanifest', revision: '2026-v2-manifest' },
    { url: '/offline.html', revision: '2026-v2-offline-page' },
  ];
  workbox.precaching.precacheAndRoute(PRECACHE_ASSETS);

  // 2. Стратегія Cache-First для незмінної статики: шрифти, логотипи, скомпільовані CSS/JS
  workbox.routing.registerRoute(
    ({ request }) =>
      request.destination === 'style' ||
      request.destination === 'script' ||
      request.destination === 'font' ||
      request.destination === 'image',
    new workbox.strategies.CacheFirst({
      cacheName: 'agenticlab-static-assets-v2',
      plugins: [
        new workbox.cacheableResponse.CacheableResponsePlugin({
          statuses: [0, 200],
        }),
        new workbox.expiration.ExpirationPlugin({
          maxEntries: 100,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 днів
          purgeOnQuotaError: true,
        }),
      ],
    })
  );

  // 3. Стратегія Stale-While-Revalidate для REST / GraphQL API запитів
  workbox.routing.registerRoute(
    ({ url, request }) => url.pathname.startsWith('/api/') && request.method === 'GET',
    new workbox.strategies.StaleWhileRevalidate({
      cacheName: 'agenticlab-api-cache-v2',
      plugins: [
        new workbox.cacheableResponse.CacheableResponsePlugin({
          statuses: [200],
        }),
        new workbox.expiration.ExpirationPlugin({
          maxEntries: 50,
          maxAgeSeconds: 24 * 60 * 60, // 24 години
        }),
      ],
    })
  );

  // 4. Стратегія Network-First зі швидким таймаутом для HTML-навігації
  const navigationHandler = new workbox.strategies.NetworkFirst({
    cacheName: 'agenticlab-pages-cache-v2',
    networkTimeoutSeconds: 3,
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [200],
      }),
    ],
  });

  workbox.routing.registerRoute(({ request }) => request.mode === 'navigate', async (params) => {
    try {
      return await navigationHandler.handle(params);
    } catch {
      // При повній відсутності мережі та кешу віддаємо офлайн-заглушку
      return (await caches.match('/offline.html')) || Response.error();
    }
  });

  // 5. Background Sync: гарантована відправка мутацій при появі зв'язку
  const bgSyncPlugin = new workbox.backgroundSync.BackgroundSyncPlugin('offline-mutations-queue', {
    maxRetentionTime: 24 * 60, // Черга живе 24 години (у хвилинах)
  });

  workbox.routing.registerRoute(
    ({ url, request }) => url.pathname.startsWith('/api/mutations/') && request.method === 'POST',
    new workbox.strategies.NetworkOnly({
      plugins: [bgSyncPlugin],
    }),
    'POST'
  );

  // 6. Слухач міжпроцесного повідомлення для негайного оновлення
  self.addEventListener('message', (event) => {
    if (event.data && event.data.type === 'SKIP_WAITING') {
      console.log('[SW]: Отримано команду SKIP_WAITING. Активація нового воркера...');
      self.skipWaiting();
    }
  });
} else {
  console.error('[SW]: Помилка завантаження скриптів Workbox.');
}

'use client';

import * as React from 'react';

/**
 * Підписка на нативні браузерні події зміни мережевого статусу
 */
function subscribe(callback: () => void): () => void {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

function getSnapshot(): boolean {
  return navigator.onLine;
}

function getServerSnapshot(): boolean {
  // На сервері завжди припускаємо наявність мережі для запобігання hydration mismatch
  return true;
}

/**
 * Хук відстеження статусу інтернет-з'єднання
 * @returns boolean: true якщо мережа доступна, false якщо пристрій офлайн
 */
export function useOnlineStatus(): boolean {
  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}

'use client';

import * as React from 'react';

interface ServiceWorkerUpdateState {
  isUpdateAvailable: boolean;
  registration: ServiceWorkerRegistration | null;
  updateApp: () => void;
}

/**
 * Хук управління життєвим циклом та оновленням Service Worker
 */
export function useServiceWorkerUpdate(): ServiceWorkerUpdateState {
  const [isUpdateAvailable, setIsUpdateAvailable] = React.useState(false);
  const [registration, setRegistration] = React.useState<ServiceWorkerRegistration | null>(null);

  React.useEffect(() => {
    if (typeof window === 'undefined' || !('serviceWorker' in navigator)) {
      return;
    }

    let refreshing = false;

    // Автоматичне перезавантаження сторінки після зміни контролера
    const handleControllerChange = () => {
      if (!refreshing) {
        refreshing = true;
        window.location.reload();
      }
    };

    navigator.serviceWorker.addEventListener('controllerchange', handleControllerChange);

    navigator.serviceWorker
      .register('/sw.js')
      .then((reg) => {
        setRegistration(reg);

        // Якщо нова версія вже очікує активації (наприклад, відкрита паралельна вкладка)
        if (reg.waiting) {
          setIsUpdateAvailable(true);
        }

        // Слухач виявлення нової версії файлу sw.js
        reg.addEventListener('updatefound', () => {
          const newWorker = reg.installing;
          if (!newWorker) return;

          newWorker.addEventListener('statechange', () => {
            // Якщо новий воркер встановився, але старий все ще керує сторінкою
            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
              setIsUpdateAvailable(true);
            }
          });
        });
      })
      .catch((err) => {
        console.error('[SW Registration Error]:', err);
      });

    return () => {
      navigator.serviceWorker.removeEventListener('controllerchange', handleControllerChange);
    };
  }, []);

  const updateApp = React.useCallback(() => {
    if (registration?.waiting) {
      // Відправляємо команду SKIP_WAITING в очікуючий воркер
      registration.waiting.postMessage({ type: 'SKIP_WAITING' });
    }
  }, [registration]);

  return { isUpdateAvailable, registration, updateApp };
}

'use client';

import * as React from 'react';
import { useOnlineStatus } from '@/hooks/useOnlineStatus';
import { useServiceWorkerUpdate } from '@/hooks/useServiceWorkerUpdate';

interface BeforeInstallPromptEvent extends Event {
  prompt: () => Promise<void>;
  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
}

export function PwaOfflineManager() {
  const isOnline = useOnlineStatus();
  const { isUpdateAvailable, updateApp } = useServiceWorkerUpdate();
  const [installPrompt, setInstallPrompt] = React.useState<BeforeInstallPromptEvent | null>(null);
  const [isStandalone, setIsStandalone] = React.useState(false);

  React.useEffect(() => {
    // Детекція standalone-режиму (вже встановлено на домашній екран)
    const checkStandalone =
      window.matchMedia('(display-mode: standalone)').matches ||
      (window.navigator as unknown as { standalone?: boolean }).standalone === true;

    setIsStandalone(checkStandalone);

    // Перехоплення системного діалогу встановлення
    const handleBeforeInstall = (e: Event) => {
      e.preventDefault();
      setInstallPrompt(e as BeforeInstallPromptEvent);
    };

    window.addEventListener('beforeinstallprompt', handleBeforeInstall);

    window.addEventListener('appinstalled', () => {
      setIsStandalone(true);
      setInstallPrompt(null);
    });

    return () => {
      window.removeEventListener('beforeinstallprompt', handleBeforeInstall);
    };
  }, []);

  const handleInstallClick = async () => {
    if (!installPrompt) return;
    await installPrompt.prompt();
    const { outcome } = await installPrompt.userChoice;
    if (outcome === 'accepted') {
      setIsStandalone(true);
    }
    setInstallPrompt(null);
  };

  return (
    <div aria-live="polite" className="pointer-events-none fixed inset-x-0 bottom-0 z-50 p-4 flex flex-col gap-3 items-end">
      {/* 1. Банер обриву інтернет-з'єднання */}
      {!isOnline && (
        <div className="pointer-events-auto w-full max-w-md p-3.5 rounded-xl bg-red-950/95 border border-red-800 text-red-100 text-xs flex items-center justify-between shadow-2xl backdrop-blur-md animate-fade-in">
          <div className="flex items-center gap-2.5">
            <span className="w-2.5 h-2.5 rounded-full bg-red-500 animate-ping shrink-0" />
            <span>Ви в офлайн-режимі. Застосунок працює з локального кешу, мутації зберігаються.</span>
          </div>
          <span className="font-mono text-[10px] uppercase font-bold text-red-400 bg-red-900/60 px-2 py-0.5 rounded">
            Offline
          </span>
        </div>
      )}

      {/* 2. Банер доступного оновлення застосунку */}
      {isUpdateAvailable && (
        <div className="pointer-events-auto w-full max-w-md p-4 rounded-2xl bg-bg-surface border border-accent-violet/40 shadow-2xl space-y-3 animate-slide-up">
          <div className="flex items-start gap-3">
            <div className="w-9 h-9 rounded-xl bg-accent-violet/20 border border-accent-violet/40 flex items-center justify-center text-accent-violet font-bold text-sm shrink-0">
              ⚡
            </div>
            <div>
              <h4 className="text-sm font-bold text-text-primary">Доступне оновлення застосунку</h4>
              <p className="text-xs text-text-secondary mt-0.5">
                Завантажено нову версію платформи. Оновіть сторінку для застосування змін.
              </p>
            </div>
          </div>
          <div className="flex items-center justify-end gap-2 pt-1">
            <button
              type="button"
              onClick={updateApp}
              className="px-3.5 py-1.5 text-xs font-semibold bg-accent-violet text-white rounded-lg hover:bg-accent-violet/90 transition-colors cursor-pointer shadow-md"
            >
              Оновити зараз
            </button>
          </div>
        </div>
      )}

      {/* 3. Пропозиція встановлення PWA на робочий стіл */}
      {installPrompt && !isStandalone && (
        <div className="pointer-events-auto w-full max-w-sm p-4 rounded-2xl bg-bg-surface border border-border shadow-2xl space-y-3 animate-slide-up">
          <div className="flex items-start gap-3">
            <div className="w-10 h-10 rounded-xl bg-accent-violet/15 border border-accent-violet/30 flex items-center justify-center text-accent-violet font-bold text-base shrink-0">
              AL
            </div>
            <div className="flex-1">
              <h4 className="text-sm font-bold text-text-primary">Встановити Fullstack Agentic Lab</h4>
              <p className="text-xs text-text-secondary mt-0.5">
                Швидкий запуск із робочого столу та офлайн-доступ до навчальних матеріалів.
              </p>
            </div>
          </div>
          <div className="flex items-center justify-end gap-2 pt-1">
            <button
              type="button"
              onClick={() => setInstallPrompt(null)}
              className="px-3 py-1.5 text-xs text-text-muted hover:text-text-primary transition-colors cursor-pointer"
            >
              Пізніше
            </button>
            <button
              type="button"
              onClick={handleInstallClick}
              className="px-3 py-1.5 text-xs font-semibold bg-accent-violet text-white rounded-lg hover:bg-accent-violet/90 transition-colors cursor-pointer"
            >
              Встановити
            </button>
          </div>
        </div>
      )}
    </div>
  );
}