diff --git a/PWA-TESTING.md b/PWA-TESTING.md index a73a35c..2d9bafa 100644 --- a/PWA-TESTING.md +++ b/PWA-TESTING.md @@ -22,17 +22,22 @@ ## Как протестировать -### 1. Откройте тестовую страницу для мобильных устройств +### 1. Откройте диагностическую страницу PWA +``` +http://localhost:3000/pwa-debug.html +``` + +### 2. Откройте тестовую страницу для мобильных устройств ``` http://localhost:3000/mobile-pwa-test.html ``` -### 2. Откройте обычную тестовую страницу +### 3. Откройте обычную тестовую страницу ``` http://localhost:3000/test-pwa.html ``` -### 3. Проверьте требования PWA +### 4. Проверьте требования PWA На мобильной тестовой странице автоматически проверяются все требования: - ✅ HTTPS или localhost - ✅ Service Worker @@ -40,12 +45,12 @@ http://localhost:3000/test-pwa.html - ✅ Иконки - ❌ Уже установлено (должно быть красным, если не установлено) -### 4. Установка приложения +### 5. Установка приложения - Если все проверки пройдены, появится кнопка "Установить приложение" - Нажмите на неё для установки PWA - Следуйте инструкциям браузера или используйте инструкции на странице -### 5. Проверка в разных браузерах +### 6. Проверка в разных браузерах #### Chrome/Edge: - Откройте DevTools (F12) @@ -96,6 +101,9 @@ http://localhost:3000/test-pwa.html - Улучшенная проверка установки PWA - Поддержка различных режимов отображения - **Кнопка установки показывается только на мобильных устройствах** +- Принудительная проверка возможности установки +- Специальные инструкции для Android и iOS +- Диагностическая страница для отладки PWA ## Возможные проблемы и решения @@ -151,8 +159,22 @@ 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) @@ -166,6 +188,7 @@ navigator.serviceWorker.getRegistrations().then(console.log); - ✅ `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` - обычная тестовая страница diff --git a/public/manifest.json b/public/manifest.json index eb8a391..9b23dac 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -9,6 +9,7 @@ "orientation": "portrait-primary", "scope": "/", "lang": "ru", + "id": "/", "categories": ["productivity", "utilities"], "screenshots": [ { diff --git a/public/pwa-debug.html b/public/pwa-debug.html new file mode 100644 index 0000000..072d160 --- /dev/null +++ b/public/pwa-debug.html @@ -0,0 +1,411 @@ + + + + + + Диагностика PWA - NoteJS + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

🔍 Диагностика PWA

+ +
+

Основные требования PWA

+
+
+ HTTPS или localhost + Проверка... +
+
+ Service Worker + Проверка... +
+
+ Manifest + Проверка... +
+
+ Иконки + Проверка... +
+
+
+ +
+

Детальная диагностика

+
+
+ Manifest загружается + Проверка... +
+
+ Service Worker регистрируется + Проверка... +
+
+ Иконки доступны + Проверка... +
+
+ beforeinstallprompt событие + Проверка... +
+
+
+ +
+

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

+ +
+
+ +
+

Информация о манифесте

+
Загрузка...
+
+ +
+

Информация о Service Worker

+
Загрузка...
+
+ +
+

Информация о браузере

+
Загрузка...
+
+ +
+

Ошибки консоли

+
Нет ошибок
+
+
+ + + + diff --git a/public/pwa.js b/public/pwa.js index 989efa9..a19a5d3 100644 --- a/public/pwa.js +++ b/public/pwa.js @@ -66,7 +66,11 @@ class PWAManager { console.log('beforeinstallprompt событие получено'); e.preventDefault(); this.deferredPrompt = e; - this.showInstallButton(); + + // Показываем кнопку установки с задержкой для лучшего UX + setTimeout(() => { + this.showInstallButton(); + }, 1000); }); } @@ -101,7 +105,8 @@ class PWAManager { const ua = navigator.userAgent; return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua) || (navigator.maxTouchPoints && navigator.maxTouchPoints > 2) || - window.matchMedia('(max-width: 768px)').matches; + window.matchMedia('(max-width: 768px)').matches || + /Mobile|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua); } // Проверка на мобильный Safari @@ -178,6 +183,10 @@ class PWAManager { console.log('Результат установки:', choiceResult.outcome); if (choiceResult.outcome === 'accepted') { console.log('Пользователь установил приложение'); + this.showNotification('Приложение успешно установлено!', 'success'); + } else { + console.log('Пользователь отклонил установку'); + this.showNotification('Установка отменена', 'warning'); } this.deferredPrompt = null; this.removeInstallButton(); @@ -188,6 +197,41 @@ class PWAManager { } } + // Принудительная проверка возможности установки + async checkInstallability() { + if (!this.isMobileDevice()) { + return false; + } + + // Проверяем все требования PWA + const requirements = { + hasManifest: document.querySelector('link[rel="manifest"]') !== null, + hasServiceWorker: 'serviceWorker' in navigator, + isSecure: location.protocol === 'https:' || location.hostname === 'localhost', + hasIcons: document.querySelector('link[rel="icon"]') !== null + }; + + const allRequirementsMet = Object.values(requirements).every(req => req); + + if (!allRequirementsMet) { + console.log('Не все требования PWA выполнены:', requirements); + return false; + } + + // Проверяем, есть ли deferredPrompt + if (this.deferredPrompt) { + return true; + } + + // Для мобильных устройств без deferredPrompt показываем инструкции + if (this.isMobileDevice()) { + this.showMobileInstallInstructions(); + return true; + } + + return false; + } + // Показать инструкции для Safari showSafariInstructions() { const instructions = ` @@ -210,6 +254,41 @@ class PWAManager { alert(instructions); } + // Показать инструкции для мобильных устройств + showMobileInstallInstructions() { + const isAndroid = /Android/i.test(navigator.userAgent); + const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent); + + let instructions = ''; + + if (isAndroid) { + instructions = ` + Для установки приложения на Android: + 1. Нажмите на меню браузера (⋮) + 2. Выберите "Установить приложение" или "Добавить на главный экран" + 3. Подтвердите установку + + Или нажмите на иконку установки в адресной строке, если она появилась. + `; + } else if (isIOS) { + instructions = ` + Для установки приложения на iOS: + 1. Нажмите кнопку "Поделиться" (□↗) внизу экрана + 2. Выберите "На экран Домой" + 3. Нажмите "Добавить" + `; + } else { + instructions = ` + Для установки приложения: + 1. Откройте меню браузера + 2. Найдите "Установить приложение" или "Добавить на главный экран" + 3. Следуйте инструкциям браузера + `; + } + + alert(instructions); + } + // Удаление кнопки установки removeInstallButton() { const installButton = document.getElementById('pwa-install-button'); @@ -462,4 +541,18 @@ window.forceUpdate = async () => { setTimeout(() => { window.location.reload(); }, 1000); +}; + +// Проверка возможности установки PWA +window.checkInstallability = () => { + return pwaManager.checkInstallability(); +}; + +// Принудительная попытка установки +window.forceInstall = () => { + if (pwaManager.isMobileDevice()) { + pwaManager.showMobileInstallInstructions(); + } else { + pwaManager.showManualInstallInstructions(); + } }; \ No newline at end of file