From 02be77d790d66294ab081a637e86410b3dd0e2d9 Mon Sep 17 00:00:00 2001 From: Fovway Date: Mon, 20 Oct 2025 12:35:29 +0700 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20=D1=84=D0=B0=D0=B9=D0=BB=D1=8B=20PWA?= =?UTF-8?q?=20=D0=B8=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B0=20?= =?UTF-8?q?=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D0=BE=D0=BD=D0=B0=D0=BB?= =?UTF-8?q?=D1=8C=D0=BD=D0=BE=D1=81=D1=82=D1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Добавлены новые мета-теги и улучшены существующие для поддержки PWA. - Обновлен manifest.json с новыми полями для совместимости с Brave. - Улучшен Service Worker для кэширования манифеста и обработки ошибок. - Обновлены инструкции по тестированию PWA, включая новую тестовую страницу для Brave. - Оптимизирован код для обработки установки PWA на мобильных устройствах и в Brave. --- PWA-TESTING.md | 75 ++++++++- public/brave-pwa-test.html | 333 +++++++++++++++++++++++++++++++++++++ public/index.html | 22 ++- public/manifest.json | 2 + public/sw.js | 11 +- 5 files changed, 426 insertions(+), 17 deletions(-) create mode 100644 public/brave-pwa-test.html 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 @@ + + + + + + Тест PWA для Brave - NoteJS + + + +

🔍 Диагностика PWA для Brave браузера

+ +
+

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

+
+
+ +
+

📋 Проверка требований PWA

+
+
+ +
+

🔧 Тестирование установки

+ + +
+
+ +
+

📱 Инструкции для Brave

+
+
+ +
+

🐛 Отладочная информация

+ + +
+ + + + diff --git a/public/index.html b/public/index.html index c5a74f3..e4de523 100644 --- a/public/index.html +++ b/public/index.html @@ -160,7 +160,11 @@ // Обработка установки PWA let deferredPrompt; window.addEventListener("beforeinstallprompt", (e) => { - // На мобильных устройствах позволяем браузеру показать нативный баннер + console.log("beforeinstallprompt event fired"); + + // Определяем браузер + const isBrave = navigator.userAgent.includes('Brave') || + (navigator.brave && await navigator.brave.isBrave()); const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent @@ -168,28 +172,30 @@ (navigator.maxTouchPoints && navigator.maxTouchPoints > 2) || window.matchMedia("(max-width: 768px)").matches; - if (!isMobile) { + // Для Brave на мобильных устройствах не предотвращаем стандартное поведение + if (!isMobile && !isBrave) { e.preventDefault(); } deferredPrompt = e; - // Показываем кнопку установки только на мобильных устройствах - if (isMobile) { + // Показываем кнопку установки на мобильных устройствах или в Brave + if (isMobile || isBrave) { const installButton = document.createElement("button"); installButton.textContent = "Установить приложение"; installButton.className = "btnSave"; installButton.style.marginTop = "10px"; installButton.style.width = "100%"; - installButton.addEventListener("click", () => { - deferredPrompt.prompt(); - deferredPrompt.userChoice.then((choiceResult) => { + installButton.addEventListener("click", async () => { + if (deferredPrompt) { + deferredPrompt.prompt(); + const choiceResult = await deferredPrompt.userChoice; if (choiceResult.outcome === "accepted") { console.log("Пользователь установил приложение"); } deferredPrompt = null; installButton.remove(); - }); + } }); document.querySelector(".auth-link").appendChild(installButton); diff --git a/public/manifest.json b/public/manifest.json index 9b23dac..a346426 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -11,6 +11,8 @@ "lang": "ru", "id": "/", "categories": ["productivity", "utilities"], + "prefer_related_applications": false, + "display_override": ["window-controls-overlay", "standalone"], "screenshots": [ { "src": "/icons/icon-512x512.png", diff --git a/public/sw.js b/public/sw.js index 8847ac1..1456d89 100644 --- a/public/sw.js +++ b/public/sw.js @@ -1,11 +1,11 @@ // Service Worker для NoteJS -const APP_VERSION = "1.0.5"; +const APP_VERSION = "1.0.6"; const CACHE_NAME = `notejs-v${APP_VERSION}`; const STATIC_CACHE_NAME = `notejs-static-v${APP_VERSION}`; -// Файлы для кэширования при установке (только изображения, иконки, логотипы) -// Манифест убран - не нужен для офлайн работы +// Файлы для кэширования при установке (включая манифест для Brave) const STATIC_FILES = [ + "/manifest.json", "/icons/icon-72x72.png", "/icons/icon-96x96.png", "/icons/icon-128x128.png", @@ -141,7 +141,7 @@ async function handleRequest(request) { function shouldCache(request) { const url = new URL(request.url); - // Кэшируем только изображения, иконки и логотипы (без манифеста для офлайн работы) + // Кэшируем изображения, иконки, логотипы и манифест (для Brave совместимости) return ( url.pathname.includes("/icons/") || url.pathname.endsWith(".png") || @@ -149,7 +149,8 @@ function shouldCache(request) { url.pathname.endsWith(".jpeg") || url.pathname.endsWith(".gif") || url.pathname.endsWith(".webp") || - url.pathname.endsWith(".svg") + url.pathname.endsWith(".svg") || + url.pathname.endsWith("manifest.json") ); }