Конфигурация платформ iOS и Android

Мобильная разработка в Quasar основана на интеграции с Apache Cordova и Capacitor. Обе технологии позволяют запускать веб-приложение внутри нативного контейнера, обеспечивая доступ к API устройства.

  • Cordova — классический инструмент, хорошо интегрированный в экосистему Quasar
  • Capacitor — современная альтернатива с более гибкой архитектурой и лучшей поддержкой нативного кода

Выбор платформы влияет на конфигурацию проекта, структуру каталогов и способы работы с нативными возможностями.

Подключение мобильного режима

Для активации мобильной платформы используется CLI:

quasar mode add capacitor

или

quasar mode add cordova

После этого в проекте появляются дополнительные директории:

  • src-capacitor/
  • src-cordova/

Каждая из них содержит конфигурацию конкретной платформы.

Общая структура мобильной конфигурации

Capacitor

src-capacitor/
  ├── capacitor.config.json
  ├── android/
  └── ios/

Cordova

src-cordova/
  ├── config.xml
  ├── platforms/
  └── plugins/

Конфигурация Capacitor

Основной файл: capacitor.config.json

Содержит базовые настройки приложения:

{
  "appId": "com.example.app",
  "appName": "My App",
  "webDir": "www",
  "bundledWebRuntime": false
}

Ключевые параметры:

  • appId — уникальный идентификатор (используется в iOS и Android)
  • appName — имя приложения
  • webDir — директория сборки (обычно dist/spa)
  • bundledWebRuntime — включение встроенного runtime

Добавление платформ

npx cap add android
npx cap add ios

После выполнения создаются нативные проекты:

  • src-capacitor/android — Android Studio проект
  • src-capacitor/ios — Xcode проект

Конфигурация Android

Основные файлы

  • AndroidManifest.xml
  • build.gradle
  • MainActivity.java или MainActivity.kt

Настройка разрешений

В AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />

Настройка SDK

В build.gradle:

compileSdkVersion 34

defaultConfig {
    minSdkVersion 22
    targetSdkVersion 34
}

Подпись приложения

Для production-сборки необходимо настроить keystore:

signingConfigs {
    release {
        storeFile file("my-release-key.jks")
        storePassword "password"
        keyAlias "alias"
        keyPassword "password"
    }
}

Конфигурация iOS

Основные файлы

  • Info.plist
  • AppDelegate.swift
  • capacitor.config.json

Разрешения

В Info.plist:

<key>NSCameraUsageDescription</key>
<string>Требуется доступ к камере</string>

Настройки сборки

Открытие проекта:

npx cap open ios

В Xcode задаются:

  • Bundle Identifier
  • Team (для подписи)
  • Deployment Target

Синхронизация изменений

После сборки фронтенда:

quasar build -m capacitor
npx cap sync

Команда sync:

  • копирует web-ресурсы
  • обновляет плагины
  • синхронизирует конфигурацию

Конфигурация Cordova

Основной файл: config.xml

<widget id="com.example.app" version="1.0.0">
  <name>My App</name>
  <platform name="android">
    <preference name="AndroidXEnabled" value="true" />
  </platform>
</widget>

Добавление платформ (Cordova)

quasar mode add cordova
cd src-cordova
cordova platform add android
cordova platform add ios

Управление плагинами

Capacitor

npm install @capacitor/camera
npx cap sync

Cordova

cordova plugin add cordova-plugin-camera

Различия Capacitor и Cordova

Характеристика Capacitor Cordova
Архитектура Современная Устаревающая
Работа с нативным кодом Прямая Через плагины
Обновления Активные Медленные
Интеграция с IDE Лучшая Ограниченная

Настройка Quasar для мобильной сборки

В quasar.config.js:

capacitor: {
  hideSplashscreen: true
}

или для Cordova:

cordova: {
  id: 'com.example.app'
}

Работа с окружениями

Quasar позволяет использовать переменные окружения:

quasar build -m capacitor -T android

Флаги:

  • -m — режим (capacitor/cordova)
  • -T — целевая платформа (android/ios)

Отладка

Android

npx cap open android

Запуск через Android Studio:

  • эмулятор
  • физическое устройство

iOS

npx cap open ios

Запуск через Xcode:

  • симулятор
  • устройство

Работа с ресурсами

Иконки и splash screen

Используется утилита:

quasar ext add @quasar/app-extension-icon-genie

Генерация:

icongenie generate -m capacitor -i logo.png

Capacitor

В capacitor.config.json:

{
  "server": {
    "allowNavigation": ["example.com"]
  }
}

Android

AndroidManifest.xml:

<intent-filter>
  <data android:scheme="myapp" />
</intent-filter>

Безопасность

HTTPS

Для production обязательно:

  • использовать HTTPS
  • избегать http://

Content Security Policy

В index.html:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

Работа с нативными API

Пример доступа к камере (Capacitor):

import { Camera } from '@capacitor/camera'

const image = await Camera.getPhoto({
  quality: 90,
  resultType: 'uri'
})

Оптимизация сборки

  • Минификация включена по умолчанию
  • Lazy loading маршрутов
  • Tree shaking

Частые проблемы

Приложение не запускается

  • не выполнен cap sync
  • отсутствуют зависимости

Ошибки сборки Android

  • несовместимость SDK
  • ошибки Gradle

Проблемы iOS

  • неверный Bundle ID
  • отсутствует подпись

Рекомендации

  • использовать Capacitor для новых проектов
  • регулярно синхронизировать проект
  • проверять разрешения на уровне платформы
  • тестировать на реальных устройствах
Оглавление