Fovway
9ecc787719
- Добавлена библиотека pngjs для работы с PNG изображениями - Добавлены мета-теги для улучшения поддержки PWA на страницах: index.html, notes.html, profile.html, register.html - Обновлен сервисный работник для улучшенного кэширования и обработки запросов - Добавлены функции для отладки PWA в консоли
137 lines
5.5 KiB
Markdown
137 lines
5.5 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. Откройте тестовую страницу
|
||
```
|
||
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) и проверьте консоль на ошибки:
|
||
```javascript
|
||
// Проверить статус 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-уведомления (опционально)
|