noteJS-react/OFFLINE_FIX.md

Исправление проблемы с оффлайн режимом

Проблема

При обновлении страницы в оффлайн режиме попеременно показывается сообщение "нет подключения к интернету" и нормальное отображение приложения.

Причина

Service Worker использовал стратегию, которая пыталась обратиться к сети перед использованием кэша, что приводило к показу страницы ошибки браузера при отсутствии подключения.

Решение

Внесены изменения в vite.config.ts для обеспечения стабильной работы в оффлайн режиме:

1. Стратегия CacheFirst для навигационных запросов

Теперь при обновлении страницы Service Worker сразу загружает кэшированную версию без попыток обращения к сети:

{
  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 файлов:

{
  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 без запроса пользователя:

registerType: "autoUpdate"

4. Отключение Navigation Preload

Добавлена настройка navigationPreload: false для предотвращения попыток загрузки из сети при навигации.

Как применить изменения

1. Пересборка проекта

npm run build

2. Копирование файлов на сервер

После успешной сборки скопируйте содержимое папки dist/ в backend/public/:

# 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. Запуск сервера

Запустите сервер (или попросите это сделать):

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 без запроса пользователя