diff --git a/PWA-TESTING.md b/PWA-TESTING.md index 2d9bafa..db52886 100644 --- a/PWA-TESTING.md +++ b/PWA-TESTING.md @@ -3,6 +3,7 @@ ## Что было сделано ✅ **Созданы файлы PWA:** + - `manifest.json` - манифест приложения - `sw.js` - сервис-воркер для кэширования - `pwa.js` - JavaScript класс для управления PWA @@ -12,64 +13,88 @@ - `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. Откройте обычную тестовую страницу +### 3. Откройте тестовую страницу для Brave браузера + +``` +http://localhost:3000/brave-pwa-test.html +``` + +### 4. Откройте обычную тестовую страницу + ``` http://localhost:3000/test-pwa.html ``` -### 4. Проверьте требования PWA +### 5. Проверьте требования PWA + На мобильной тестовой странице автоматически проверяются все требования: + - ✅ HTTPS или localhost - ✅ Service Worker - ✅ Manifest - ✅ Иконки - ❌ Уже установлено (должно быть красным, если не установлено) -### 5. Установка приложения +### 6. Установка приложения + - Если все проверки пройдены, появится кнопка "Установить приложение" - Нажмите на неё для установки PWA - Следуйте инструкциям браузера или используйте инструкции на странице -### 6. Проверка в разных браузерах +### 7. Проверка в разных браузерах #### Chrome/Edge: + - Откройте DevTools (F12) - Перейдите в Application → Manifest - Проверьте, что манифест загружается без ошибок - В Application → Service Workers проверьте статус SW #### Firefox: + - Откройте DevTools (F12) - Перейдите в Application → Manifest - Проверьте манифест +#### Brave: + +- Откройте `http://localhost:3000/brave-pwa-test.html` для диагностики +- Проверьте настройки PWA в браузере +- Используйте меню браузера для установки + #### Safari (iOS): + - Откройте сайт в Safari - Нажмите кнопку "Поделиться" - Выберите "На экран Домой" - Приложение установится как PWA #### ПК/Десктоп (Chrome, Edge, Firefox): + - Откройте сайт в браузере - Нажмите на иконку установки в адресной строке (если доступна) - Или используйте меню браузера → "Установить приложение" @@ -78,24 +103,28 @@ http://localhost:3000/test-pwa.html ## Новые улучшения для мобильных устройств ✅ **Улучшенный 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 @@ -108,51 +137,83 @@ http://localhost:3000/test-pwa.html ## Возможные проблемы и решения ### 1. Кнопка установки не появляется + **Причины:** + - Приложение уже установлено - Браузер не поддерживает PWA - Не выполнены требования PWA - **Вы используете ПК/десктоп (кнопка скрыта для ПК)** +- **Проблемы с Brave браузером** **Решение:** + - Проверьте статус на мобильной тестовой странице - Убедитесь, что используете HTTPS или localhost - Проверьте консоль браузера на ошибки - Для iOS Safari используйте инструкции "Добавить на главный экран" - **На ПК используйте меню браузера для установки PWA** +- **Для Brave: проверьте настройки PWA в браузере** + +### 1.1. Проблемы с Brave браузером + +**Причины:** + +- Brave может блокировать PWA по умолчанию +- Неправильная конфигурация manifest.json +- Проблемы с Service Worker в Brave + +**Решение:** + +- Откройте `http://localhost:3000/brave-pwa-test.html` для диагностики +- В Brave перейдите в **Настройки → Дополнительно → Сайты и разрешения → PWA** +- Убедитесь, что PWA включены +- Попробуйте установить через меню браузера (три точки → "Установить приложение") +- Обновите manifest.json с новыми полями для Brave совместимости ### 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(); @@ -168,7 +229,9 @@ window.forceInstall(); ``` ### Диагностическая страница + Используйте `http://localhost:3000/pwa-debug.html` для: + - Детальной диагностики всех требований PWA - Проверки загрузки манифеста и Service Worker - Отображения информации о браузере и устройстве @@ -176,7 +239,9 @@ window.forceInstall(); - Тестирования установки PWA ### Lighthouse + Запустите аудит Lighthouse в Chrome DevTools: + 1. Откройте DevTools (F12) 2. Перейдите в Lighthouse 3. Выберите "Progressive Web App" @@ -190,11 +255,13 @@ window.forceInstall(); - ✅ `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/brave-pwa-test.html` - тестовая страница для Brave браузера - ✅ `http://localhost:3000/test-pwa.html` - обычная тестовая страница ## Следующие шаги После успешного тестирования: + 1. Удалите тестовую страницу `test-pwa.html` 2. Настройте HTTPS для продакшена 3. Добавьте реальные скриншоты в манифест diff --git a/public/brave-pwa-test.html b/public/brave-pwa-test.html new file mode 100644 index 0000000..cfb2986 --- /dev/null +++ b/public/brave-pwa-test.html @@ -0,0 +1,333 @@ + + +
+ + +