NoteJS/PWA-TESTING.md

🚀 Тестирование 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. Откройте тестовую страницу

http://localhost:3000/test-pwa.html

2. Проверьте требования PWA

Нажмите кнопку "Проверить статус PWA" - все пункты должны быть зелеными:

• ✅ HTTPS или localhost
• ✅ Service Worker
• ✅ Manifest
• ✅ Иконки
• ❌ Уже установлено (должно быть красным, если не установлено)

3. Установка приложения

• Если все проверки пройдены, появится кнопка "Установить приложение"
• Нажмите на неё для установки PWA
• Следуйте инструкциям браузера

4. Проверка в разных браузерах

Chrome/Edge:

• Откройте DevTools (F12)
• Перейдите в Application → Manifest
• Проверьте, что манифест загружается без ошибок
• В Application → Service Workers проверьте статус SW

Firefox:

• Откройте DevTools (F12)
• Перейдите в Application → Manifest
• Проверьте манифест

Safari (iOS):

• Откройте сайт в Safari
• Нажмите кнопку "Поделиться"
• Выберите "На экран Домой"
• Приложение установится как PWA

Возможные проблемы и решения

1. Кнопка установки не появляется

Причины:

• Приложение уже установлено
• Браузер не поддерживает PWA
• Не выполнены требования PWA

Решение:

• Проверьте статус на тестовой странице
• Убедитесь, что используете HTTPS или localhost
• Проверьте консоль браузера на ошибки

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) и проверьте консоль на ошибки:

// Проверить статус PWA
window.debugPWA();

// Проверить Service Worker
navigator.serviceWorker.getRegistrations().then(console.log);

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

Следующие шаги

После успешного тестирования:

1. Удалите тестовую страницу test-pwa.html
2. Настройте HTTPS для продакшена
3. Добавьте реальные скриншоты в манифест
4. Создайте качественные иконки с помощью дизайнера
5. Настройте push-уведомления (опционально)