Fovway
d6dc1d76a0
- Изменена структура инструкций по тестированию PWA, добавлена диагностическая страница для отладки. - Обновлен manifest.json с добавлением поля "id". - Реализована задержка при отображении кнопки установки для улучшения пользовательского опыта. - Добавлены функции для проверки возможности установки PWA и отображения инструкций для мобильных устройств.
203 lines
9.2 KiB
Markdown
203 lines
9.2 KiB
Markdown
# 🚀 Тестирование PWA для NoteJS
|
||
|
||
## Что было сделано
|
||
|
||
✅ **Созданы файлы PWA:**
|
||
- `manifest.json` - манифест приложения
|
||
- `sw.js` - сервис-воркер для кэширования
|
||
- `pwa.js` - JavaScript класс для управления PWA
|
||
- `icon.svg` - SVG иконка приложения
|
||
- `logo.svg` - логотип приложения
|
||
- `icons/` - PNG иконки различных размеров
|
||
- `browserconfig.xml` - конфигурация для Windows
|
||
|
||
✅ **Обновлены HTML страницы:**
|
||
- Добавлены PWA мета-теги
|
||
- Подключены иконки и манифест
|
||
- Добавлен скрипт регистрации Service Worker
|
||
|
||
✅ **Настроен сервер:**
|
||
- Правильные заголовки для PWA файлов
|
||
- Поддержка кэширования
|
||
|
||
## Как протестировать
|
||
|
||
### 1. Откройте диагностическую страницу PWA
|
||
```
|
||
http://localhost:3000/pwa-debug.html
|
||
```
|
||
|
||
### 2. Откройте тестовую страницу для мобильных устройств
|
||
```
|
||
http://localhost:3000/mobile-pwa-test.html
|
||
```
|
||
|
||
### 3. Откройте обычную тестовую страницу
|
||
```
|
||
http://localhost:3000/test-pwa.html
|
||
```
|
||
|
||
### 4. Проверьте требования PWA
|
||
На мобильной тестовой странице автоматически проверяются все требования:
|
||
- ✅ HTTPS или localhost
|
||
- ✅ Service Worker
|
||
- ✅ Manifest
|
||
- ✅ Иконки
|
||
- ❌ Уже установлено (должно быть красным, если не установлено)
|
||
|
||
### 5. Установка приложения
|
||
- Если все проверки пройдены, появится кнопка "Установить приложение"
|
||
- Нажмите на неё для установки PWA
|
||
- Следуйте инструкциям браузера или используйте инструкции на странице
|
||
|
||
### 6. Проверка в разных браузерах
|
||
|
||
#### Chrome/Edge:
|
||
- Откройте DevTools (F12)
|
||
- Перейдите в Application → Manifest
|
||
- Проверьте, что манифест загружается без ошибок
|
||
- В Application → Service Workers проверьте статус SW
|
||
|
||
#### Firefox:
|
||
- Откройте DevTools (F12)
|
||
- Перейдите в Application → Manifest
|
||
- Проверьте манифест
|
||
|
||
#### Safari (iOS):
|
||
- Откройте сайт в Safari
|
||
- Нажмите кнопку "Поделиться"
|
||
- Выберите "На экран Домой"
|
||
- Приложение установится как PWA
|
||
|
||
#### ПК/Десктоп (Chrome, Edge, Firefox):
|
||
- Откройте сайт в браузере
|
||
- Нажмите на иконку установки в адресной строке (если доступна)
|
||
- Или используйте меню браузера → "Установить приложение"
|
||
- Или используйте меню браузера → "Создать ярлык"
|
||
|
||
## Новые улучшения для мобильных устройств
|
||
|
||
✅ **Улучшенный manifest.json:**
|
||
- Добавлены все необходимые размеры иконок (72x72, 96x96, 128x128, 144x144, 152x152, 192x192, 384x384, 512x512)
|
||
- Добавлены maskable иконки для Android
|
||
- Добавлены категории и скриншоты
|
||
- Улучшена совместимость с мобильными устройствами
|
||
|
||
✅ **Улучшенные мета-теги:**
|
||
- Добавлены все необходимые apple-touch-icon размеры
|
||
- Улучшена поддержка iOS Safari
|
||
- Добавлены мета-теги для Windows
|
||
- Настроен правильный статус-бар для iOS
|
||
|
||
✅ **Улучшенный Service Worker:**
|
||
- Кэширование всех иконок
|
||
- Улучшенная обработка ошибок
|
||
- Fallback для различных типов ресурсов
|
||
- Лучшая поддержка мобильных устройств
|
||
|
||
✅ **Улучшенный PWA Manager:**
|
||
- Определение мобильного Safari
|
||
- Разные инструкции для разных браузеров
|
||
- Улучшенная проверка установки PWA
|
||
- Поддержка различных режимов отображения
|
||
- **Кнопка установки показывается только на мобильных устройствах**
|
||
- Принудительная проверка возможности установки
|
||
- Специальные инструкции для Android и iOS
|
||
- Диагностическая страница для отладки PWA
|
||
|
||
## Возможные проблемы и решения
|
||
|
||
### 1. Кнопка установки не появляется
|
||
**Причины:**
|
||
- Приложение уже установлено
|
||
- Браузер не поддерживает PWA
|
||
- Не выполнены требования PWA
|
||
- **Вы используете ПК/десктоп (кнопка скрыта для ПК)**
|
||
|
||
**Решение:**
|
||
- Проверьте статус на мобильной тестовой странице
|
||
- Убедитесь, что используете HTTPS или localhost
|
||
- Проверьте консоль браузера на ошибки
|
||
- Для iOS Safari используйте инструкции "Добавить на главный экран"
|
||
- **На ПК используйте меню браузера для установки PWA**
|
||
|
||
### 2. Service Worker не регистрируется
|
||
**Причины:**
|
||
- Ошибки в коде SW
|
||
- Проблемы с кэшированием файлов
|
||
|
||
**Решение:**
|
||
- Откройте DevTools → Application → Service Workers
|
||
- Проверьте ошибки в консоли
|
||
- Попробуйте очистить кэш
|
||
|
||
### 3. Ошибка "Download error or resource isn't a valid image"
|
||
**Причины:**
|
||
- PNG иконки повреждены или имеют неправильный размер
|
||
- Иконки не являются валидными PNG файлами
|
||
|
||
**Решение:**
|
||
- ✅ **ИСПРАВЛЕНО**: Созданы правильные PNG иконки с помощью pngjs
|
||
- Проверьте, что иконки имеют правильные размеры (192x192, 512x512)
|
||
- Убедитесь, что файлы иконок валидные PNG
|
||
|
||
### 4. Предупреждение о deprecated meta tag
|
||
**Причины:**
|
||
- Использование устаревшего `apple-mobile-web-app-capable`
|
||
|
||
**Решение:**
|
||
- ✅ **ИСПРАВЛЕНО**: Добавлен современный `mobile-web-app-capable`
|
||
- Оба тега теперь присутствуют для совместимости
|
||
|
||
## Отладка
|
||
|
||
### Консоль браузера
|
||
Откройте DevTools (F12) и проверьте консоль на ошибки:
|
||
```javascript
|
||
// Проверить статус PWA
|
||
window.debugPWA();
|
||
|
||
// Проверить Service Worker
|
||
navigator.serviceWorker.getRegistrations().then(console.log);
|
||
|
||
// Проверить возможность установки
|
||
window.checkInstallability();
|
||
|
||
// Принудительная попытка установки
|
||
window.forceInstall();
|
||
```
|
||
|
||
### Диагностическая страница
|
||
Используйте `http://localhost:3000/pwa-debug.html` для:
|
||
- Детальной диагностики всех требований PWA
|
||
- Проверки загрузки манифеста и Service Worker
|
||
- Отображения информации о браузере и устройстве
|
||
- Просмотра ошибок консоли
|
||
- Тестирования установки PWA
|
||
|
||
### Lighthouse
|
||
Запустите аудит Lighthouse в Chrome DevTools:
|
||
1. Откройте DevTools (F12)
|
||
2. Перейдите в Lighthouse
|
||
3. Выберите "Progressive Web App"
|
||
4. Нажмите "Generate report"
|
||
|
||
## Файлы для проверки
|
||
|
||
- ✅ `http://localhost:3000/manifest.json` - должен возвращать JSON
|
||
- ✅ `http://localhost:3000/sw.js` - должен возвращать JavaScript
|
||
- ✅ `http://localhost:3000/icons/icon-192x192.png` - должен возвращать PNG
|
||
- ✅ `http://localhost:3000/icons/icon-512x512.png` - должен возвращать PNG
|
||
- ✅ `http://localhost:3000/pwa-debug.html` - диагностическая страница PWA
|
||
- ✅ `http://localhost:3000/mobile-pwa-test.html` - мобильная тестовая страница
|
||
- ✅ `http://localhost:3000/test-pwa.html` - обычная тестовая страница
|
||
|
||
## Следующие шаги
|
||
|
||
После успешного тестирования:
|
||
1. Удалите тестовую страницу `test-pwa.html`
|
||
2. Настройте HTTPS для продакшена
|
||
3. Добавьте реальные скриншоты в манифест
|
||
4. Создайте качественные иконки с помощью дизайнера
|
||
5. Настройте push-уведомления (опционально)
|