Офлайн-стійкість та PWA: Serwist, кеш IndexedDB та синхронізація відкладених мутацій

+-----------------------------------------------------------------------------------+
|               АРХИТЕКТУРА OFFLINE-FIRST И OUTBOX REPLAY В NEXT.JS 16              |
+-----------------------------------------------------------------------------------+
| ПОЛЬЗОВАТЕЛЬСКИЙ UI (REACT 19)        SERVICE WORKER / INDEXEDDB   NEXT.JS СЕРВЕР |
|                                                                                   |
| 1. Навигация /dashboard              [ Service Worker Cache API ]                 |
|    - Запрос RSC Flight ------------> | Проверка Cache API         |               |
|                                      | - Cache HIT: отдать RSC    |               |
|                                      | - Background fetch к сети  |               |
|    <- Мгновенный показ страницы -----+                            |               |
|                                                                                   |
| 2. Мутация (Создание заказа)         [ IndexedDB Outbox Queue ]   СЕТЬ ОТКЛЮЧЕНА  |
|    - Запись формы                    | { id: uuid,                |               |
|    - useOffline() -> true            |   action: "create_order",  |    x (нет     |
|    <- Оптимистичный UI (Черновик) -- |   payload: {...},          |       связи)  |
|                                      |   status: "pending" }      |               |
|                                                                                   |
| 3. Восстановление сети               [ Replay Orchestrator ]                      |
|    - event: "online"                | Вычитка очереди Outbox     |               |
|    - ReplayWorker запущен ---------> | Отправка с Idempotency-Key | === POST ===> |
|                                      | Разрешение конфликтов      | <== 200 OK == |
|    <- Статус: "Синхронизировано" --- | Очистка очереди            |               |
+-----------------------------------------------------------------------------------+

'use client';

import { useSyncExternalStore } from 'react';

// Функция подписки на браузерные события сети
function subscribe(callback: () => void) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);

  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

// Клиентский снимок состояния
function getClientSnapshot(): boolean {
  return !navigator.onLine;
}

// Серверный снимок состояния (по умолчанию предполагаем наличие сети)
function getServerSnapshot(): boolean {
  return false;
}

export function useOffline(): boolean {
  // useSyncExternalStore гарантирует отсутствие Hydration Mismatch
  return useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot);
}

const CACHE_NAME = 'wpskills-rsc-cache-v1';

self.addEventListener('install', (event) => {
  self.skipWaiting();
});

self.addEventListener('activate', (event) => {
  event.waitUntil(clients.claim());
});

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  const isRscRequest = event.request.headers.get('RSC') === '1' || url.searchParams.has('_rsc');

  // Стратегия Stale-While-Revalidate для RSC-запросов и страниц
  if (isRscRequest || event.request.mode === 'navigate') {
    event.respondWith(
      caches.open(CACHE_NAME).then(async (cache) => {
        const cachedResponse = await cache.match(event.request);

        const networkFetchPromise = fetch(event.request)
          .then((networkResponse) => {
            if (networkResponse.ok) {
              cache.put(event.request, networkResponse.clone());
            }
            return networkResponse;
          })
          .catch((error) => {
            console.warn('[SW] Сетевой сбой, возврат из кэша:', error);
            return cachedResponse;
          });

        // Если есть закэшированная копия, отдаем немедленно, обновляя в фоне
        return cachedResponse || networkFetchPromise;
      })
    );
  }
});

export interface OutboxMutation {
  id: string; // Уникальный UUID мутации (Idempotency Key)
  actionName: string; // Например, 'create_note'
  payload: Record<string, unknown>;
  createdAt: number;
  retryCount: number;
  version: number;
}

const DB_NAME = 'wpskills_offline_db';
const STORE_NAME = 'outbox_mutations';
const DB_VERSION = 1;

function openDB(): Promise<IDBDatabase> {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(DB_NAME, DB_VERSION);

    request.onupgradeneeded = () => {
      const db = request.result;
      if (!db.objectStoreNames.contains(STORE_NAME)) {
        db.createObjectStore(STORE_NAME, { keyPath: 'id' });
      }
    };

    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

// Добавление мутации в очередь
export async function enqueueMutation(mutation: Omit<OutboxMutation, 'createdAt' | 'retryCount'>): Promise<void> {
  const db = await openDB();
  return new Promise((resolve, reject) => {
    const tx = db.transaction(STORE_NAME, 'readwrite');
    const store = tx.objectStore(STORE_NAME);

    const record: OutboxMutation = {
      ...mutation,
      createdAt: Date.now(),
      retryCount: 0,
    };

    store.put(record);

    tx.oncomplete = () => resolve();
    tx.onerror = () => reject(tx.error);
  });
}

// Получение всех ожидающих мутаций
export async function getPendingMutations(): Promise<OutboxMutation[]> {
  const db = await openDB();
  return new Promise((resolve, reject) => {
    const tx = db.transaction(STORE_NAME, 'readonly');
    const store = tx.objectStore(STORE_NAME);
    const request = store.getAll();

    request.onsuccess = () => resolve(request.result || []);
    request.onerror = () => reject(request.error);
  });
}

// Удаление подтвержденной сервером мутации
export async function removeMutation(id: string): Promise<void> {
  const db = await openDB();
  return new Promise((resolve, reject) => {
    const tx = db.transaction(STORE_NAME, 'readwrite');
    const store = tx.objectStore(STORE_NAME);
    store.delete(id);

    tx.oncomplete = () => resolve();
    tx.onerror = () => reject(tx.error);
  });
}

'use client';

import React, { useEffect, useState, useCallback } from 'react';
import { useOffline } from '@/hooks/useOffline';
import { getPendingMutations, removeMutation, OutboxMutation } from '@/lib/offline/outboxStore';
import { replayMutationServerAction } from '@/app/actions/replay';
import { WifiOff, RefreshCw, CheckCircle2 } from 'lucide-react';

export function OfflineReplayProvider({ children }: { children: React.ReactNode }) {
  const isOffline = useOffline();
  const [isSyncing, setIsSyncing] = useState(false);
  const [pendingCount, setPendingCount] = useState(0);

  const syncOutbox = useCallback(async () => {
    if (isOffline) return;

    try {
      const mutations = await getPendingMutations();
      setPendingCount(mutations.length);

      if (mutations.length === 0) return;

      setIsSyncing(true);

      // Сортировка по времени создания (FIFO - First In, First Out)
      const sorted = mutations.sort((a, b) => a.createdAt - b.createdAt);

      for (const item of sorted) {
        try {
          // Отправка на сервер с передачей Idempotency Key
          const response = await replayMutationServerAction({
            idempotencyKey: item.id,
            actionName: item.actionName,
            payload: item.payload,
            clientVersion: item.version,
          });

          if (response.success || response.conflictResolved) {
            await removeMutation(item.id);
          }
        } catch (error) {
          console.error(`[Replay Error] Сбой синхронизации мутации ${item.id}:`, error);
          break; // Прерываем до следующего цикла связи
        }
      }
    } finally {
      const remaining = await getPendingMutations();
      setPendingCount(remaining.length);
      setIsSyncing(false);
    }
  }, [isOffline]);

  useEffect(() => {
    if (!isOffline) {
      syncOutbox();
    }
  }, [isOffline, syncOutbox]);

  return (
    <>
      {/* Баннер статуса синхронизации */}
      {(isOffline || pendingCount > 0 || isSyncing) && (
        <aside
          role="status"
          aria-live="polite"
          className="fixed bottom-4 right-4 z-50 p-4 rounded-2xl border shadow-xl backdrop-blur-md transition-all flex items-center gap-3 bg-bg-surface/90 border-border text-xs font-mono"
        >
          {isOffline ? (
            <>
              <WifiOff className="w-4 h-4 text-warning animate-pulse" />
              <span className="text-warning font-semibold">Офлайн-режим (Черновики сохраняются локально)</span>
            </>
          ) : isSyncing ? (
            <>
              <RefreshCw className="w-4 h-4 text-accent-cyan animate-spin" />
              <span className="text-accent-cyan font-semibold">Синхронизация ({pendingCount} в очереди)...</span>
            </>
          ) : (
            <>
              <CheckCircle2 className="w-4 h-4 text-success" />
              <span className="text-success font-semibold">Все изменения синхронизированы</span>
            </>
          )}
        </aside>
      )}
      {children}
    </>
  );
}