132 lines
5.8 KiB
Markdown
132 lines
5.8 KiB
Markdown
# Исправление проблемы с оффлайн режимом
|
||
|
||
## Проблема
|
||
При обновлении страницы в оффлайн режиме попеременно показывается сообщение "нет подключения к интернету" и нормальное отображение приложения.
|
||
|
||
## Причина
|
||
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 без запроса пользователя
|
||
|