# Исправление проблемы с оффлайн режимом ## Проблема При обновлении страницы в оффлайн режиме попеременно показывается сообщение "нет подключения к интернету" и нормальное отображение приложения. ## Причина Service Worker использовал стратегию, которая пыталась обратиться к сети перед использованием кэша, что приводило к показу страницы ошибки браузера при отсутствии подключения. ## Решение Внесены изменения в `vite.config.ts` для обеспечения стабильной работы в оффлайн режиме: ### 1. Стратегия CacheFirst для навигационных запросов Теперь при обновлении страницы Service Worker **сразу** загружает кэшированную версию без попыток обращения к сети: ```typescript { urlPattern: ({ request }) => request.mode === 'navigate', handler: "CacheFirst", options: { cacheName: "pages-cache", expiration: { maxEntries: 10, maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days }, cacheableResponse: { statuses: [0, 200], }, }, } ``` ### 2. Дополнительное кэширование HTML файлов Добавлено специальное правило для всех HTML файлов: ```typescript { urlPattern: /\.html$/, handler: "CacheFirst", options: { cacheName: "html-cache", expiration: { maxEntries: 10, maxAgeSeconds: 7 * 24 * 60 * 60, }, cacheableResponse: { statuses: [0, 200], }, }, } ``` ### 3. Автоматическое обновление Service Worker Изменен тип регистрации с `"prompt"` на `"autoUpdate"` для обеспечения автоматического обновления SW без запроса пользователя: ```typescript registerType: "autoUpdate" ``` ### 4. Отключение Navigation Preload Добавлена настройка `navigationPreload: false` для предотвращения попыток загрузки из сети при навигации. ## Как применить изменения ### 1. Пересборка проекта ```bash npm run build ``` ### 2. Копирование файлов на сервер После успешной сборки скопируйте содержимое папки `dist/` в `backend/public/`: ```bash # Windows PowerShell Remove-Item -Recurse -Force backend/public/* Copy-Item -Recurse dist/* backend/public/ # Linux/Mac rm -rf backend/public/* cp -r dist/* backend/public/ ``` ### 3. Запуск сервера Запустите сервер (или попросите это сделать): ```bash cd backend npm start ``` ### 4. Проверка работы 1. Откройте приложение в браузере 2. Дождитесь полной загрузки приложения 3. Откройте DevTools → Application → Service Workers 4. Убедитесь, что новый Service Worker активирован 5. Переключите браузер в оффлайн режим (DevTools → Network → Offline) 6. Обновите страницу несколько раз - приложение должно загружаться из кэша каждый раз ### 5. Очистка старого кэша (если необходимо) Если проблема все еще возникает, попробуйте: 1. DevTools → Application → Clear storage → Clear site data 2. Закройте и откройте браузер заново 3. Перейдите на сайт снова - новый SW установится и закэширует все ресурсы 4. Проверьте работу в оффлайн режиме ## Технические детали ### Стратегии кэширования **CacheFirst (Cache First, Network Fallback)** - Сначала проверяется кэш - Если ресурс найден в кэше, он возвращается немедленно - Если ресурса нет в кэше, делается запрос к сети - Идеально для статических ресурсов и оффлайн работы **NetworkFirst** (используется для API) - Сначала пытается загрузить из сети - Если сеть недоступна или таймаут, возвращается кэшированная версия - Идеально для данных, которые должны быть актуальными ### Настройки Service Worker - `skipWaiting: true` - новый SW активируется немедленно - `clientsClaim: true` - новый SW берет контроль над всеми открытыми страницами - `cleanupOutdatedCaches: true` - автоматическая очистка устаревших кэшей ## Ожидаемый результат После применения изменений приложение будет: - ✅ Всегда загружаться из кэша в оффлайн режиме - ✅ Не показывать страницу "нет подключения к интернету" - ✅ Работать стабильно при любом количестве обновлений страницы - ✅ Автоматически обновлять Service Worker без запроса пользователя