From ec415de7240b4584fe028fb738a987e8e0577034 Mon Sep 17 00:00:00 2001 From: Fovway Date: Thu, 9 Oct 2025 15:34:53 +0700 Subject: [PATCH] modified: README.md --- README.md | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) diff --git a/README.md b/README.md index fa8ab92..57c58bf 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,9 @@ - **Выбор городов**: предустановленный список российских городов - **Система тем**: светлая, темная и автоматическая (по системным настройкам) - **Анимации**: плавные переходы и hover-эффекты +- **PWA (Progressive Web App)**: установка как нативное приложение, оффлайн режим с кэшированием данных +- **Оффлайн поддержка**: отображение погодных данных при отсутствии интернета +- **Мобильная версия**: возможность сборки в APK для Android через Capacitor или PWABuilder ## Технологии @@ -23,6 +26,7 @@ - **Node.js** v8+ (устаревшая версия, рекомендуется обновить до LTS) - **Express.js** v4.17.1 - веб-сервер +- **Service Worker** - кэширование и оффлайн поддержка ### Frontend @@ -31,6 +35,8 @@ - **Tailwind CSS** v3.4.16 - утилитарный CSS фреймворк - **PostCSS** v8.5.6 - обработка CSS - **Autoprefixer** v10.4.21 - вендорные префиксы +- **Capacitor** v7.4.3 - фреймворк для мобильной разработки +- **Sharp** v0.34.4 - обработка изображений и иконок ### Библиотеки и CDN @@ -82,12 +88,71 @@ 5. **Откройте браузер:** Перейдите по адресу http://localhost:3000 +6. **Установка как PWA (опционально):** + В браузере нажмите "Установить приложение" или добавьте на домашний экран для полноэкранного режима. + ### Доступные скрипты - `npm start` - запуск сервера разработки - `npm run build-css` - сборка Tailwind CSS из `input.css` в `output.css` - `npm run watch-css` - автоматическая пересборка CSS при изменениях +## PWA и мобильная версия + +### Progressive Web App (PWA) + +Приложение поддерживает установку как PWA на устройствах с современными браузерами: + +- **Кэширование**: приложение кэширует статические ресурсы и данные API для оффлайн доступа +- **Service Worker**: обеспечивает работу приложения в оффлайн режиме +- **Манифест**: позволяет установить приложение на домашний экран мобильных устройств + +### Сборка мобильного приложения + +Приложение можно собрать в нативное мобильное приложение для Android: + +#### Используя Capacitor + +1. **Установите Capacitor CLI** (если не установлен): + + ```bash + npm install -g @capacitor/cli + ``` + +2. **Добавьте платформы:** + + ```bash + npx cap add android + ``` + +3. **Соберите веб-ресурсы:** + + ```bash + npm run build-css + ``` + +4. **Синхронизируйте с Capacitor:** + + ```bash + npx cap sync android + ``` + +5. **Откройте в Android Studio:** + + ```bash + npx cap open android + ``` + +6. **Соберите APK** в Android Studio или через командную строку. + +Подробные инструкции см. в файле `APK_instructions_Capacitor.md`. + +#### Используя PWABuilder + +Онлайн-сервис PWABuilder позволяет конвертировать PWA в мобильное приложение без установки дополнительного ПО. + +Подробные инструкции см. в файле `APK_instructions_PWABuilder.md`. + ## API и внешние сервисы - **WeatherAPI.com** - источник данных о погоде