## User Story

**Как** посетитель сайта
**Я хочу** продолжать пользоваться приложением при нестабильном интернете или без сети
**Чтобы** просматривать кэшированный контент и понимать, когда данные недоступны

---

## Критерии приёмки

- [ ] Приложение определяет offline-режим и показывает индикатор
- [ ] Основная навигация и статический контент доступны из кэша при отсутствии сети
- [ ] Имеется offline fallback-страница при неудаче загрузки
- [ ] При восстановлении сети показывается уведомление и возможность обновить данные
- [ ] PWA настроена: manifest.json, service worker, иконки для «Установить на устройство»
- [ ] Критичный для LCP контент (оболочка, шрифты, стили) отдаётся из кэша

---

## Декомпозиция / подзадачи

1. Настроить PWA через `@ducanh2912/next-pwa` в `next.config.ts`
2. Добавить manifest.json (название, иконки, theme_color, display)
3. Реализовать fallback-страницу `/_offline` (или offline.html)
4. Добавить UI-индикатор статуса сети (компонент + хук `navigator.onLine` / события online/offline)
5. Настроить кэширование статики и навигационных запросов (Workbox)
6. Добавить уведомление при восстановлении сети и кнопку «Обновить»
7. Документировать ограничения (что работает offline, что нет)

---

## План реализации

### Обзор

`@ducanh2912/next-pwa` уже есть в зависимостях, но не подключён в `next.config.ts`. Подключить PWA, настроить runtime caching, добавить offline fallback и UI-индикатор сети.

### Шаги

1. **Конфигурация PWA** — обернуть `nextConfig` в `withPWA` из `@ducanh2912/next-pwa`, задать `dest: "public"`, `register: true`, `skipWaiting: true`, настроить `runtimeCaching` для API и статики (стратегия NetworkFirst с fallback на Cache)
2. **Manifest** — добавить или сгенерировать `manifest.json` с `name`, `short_name`, `icons`, `theme_color`, `display: "standalone"`, подключить в layout через `<link rel="manifest">`
3. **Fallback-страница** — создать `src/app/offline/page.tsx` или `public/_offline.html`, отображать сообщение «Нет соединения» и кнопку «Повторить»
4. **Компонент OfflineIndicator** — хук `useOnlineStatus()` на `navigator.onLine` + события `online`/`offline`; компонент-баннер/тост при offline; разместить в AppShell или layout
5. **Обновление при восстановлении сети** — в хуке/контексте при событии `online` показать уведомление (Mantine Notifications) «Сеть восстановлена» и кнопку «Обновить страницу» или `router.refresh()`
6. **Тестирование** — DevTools → Network → Offline, проверить fallback, индикатор, поведение при возврате сети

### Технические детали

- **Зависимости:** `@ducanh2912/next-pwa` (уже установлен)
- **Затронутые модули:** `next.config.ts`, `src/app/layout.tsx`, AppShell (или layout-оболочка)
- **Ограничения:** авторизация и мутации требуют сети; динамический контент (блог, игры) offline доступен только после предварительной загрузки; Server Components без кэша при первом заходе offline не отдадутся