Манифест приложения

Манифест приложения (manifest) — это ключевой файл конфигурации, который определяет поведение веб-приложения на устройствах с поддержкой Progressive Web App (PWA), а также его основные метаданные для браузеров и мобильных платформ. В Quasar структура манифеста строится на стандарте W3C Web App Manifest и управляется через конфигурационный файл quasar.conf.js в разделе pwa.manifest.

Структура манифеста

Основные свойства манифеста:

  • name – полное название приложения, отображаемое на экране установки или в списках приложений.

    name: 'Моё Quasar приложение'

  • short_name – краткое название, используемое в местах с ограниченным пространством, например, на домашнем экране смартфона.

    short_name: 'QuasarApp'

  • description – текстовое описание приложения, отображаемое в магазинах приложений и при установке.

    description: 'Приложение на базе Quasar Framework для демонстрации PWA'

  • display – режим отображения приложения:

    • standalone – приложение выглядит как нативное, без элементов браузера.
    • fullscreen – занимает весь экран.
    • minimal-ui – отображает минимальный набор элементов управления.
    • browser – стандартный режим браузера.
    display: 'standalone'

  • background_color – цвет фона при загрузке приложения, отображаемый до рендеринга контента.

    background_color: '#ffffff'

  • theme_color – цвет интерфейса и элементов браузера, например, верхней панели на мобильных устройствах.

    theme_color: '#027be3'

  • orientation – предопределённая ориентация экрана:

    • portrait – вертикальная.
    • landscape – горизонтальная.
    orientation: 'portrait'

  • icons – массив объектов с указанием иконок для разных платформ и размеров. Каждый объект содержит src, sizes и type.

    icons: [
  {
    src: 'icons/icon-128x128.png',
    sizes: '128x128',
    type: 'image/png'
  },
  {
    src: 'icons/icon-512x512.png',
    sizes: '512x512',
    type: 'image/png'
  }
]

Настройка манифеста в Quasar

В файле quasar.conf.js секция PWA имеет вид:

pwa: {
  workboxPluginMode: 'GenerateSW',
  workboxOptions: {},
  manifest: {
    name: 'Моё Quasar приложение',
    short_name: 'QuasarApp',
    description: 'Приложение на базе Quasar Framework для демонстрации PWA',
    display: 'standalone',
    orientation: 'portrait',
    background_color: '#ffffff',
    theme_color: '#027be3',
    icons: [
      { src: 'icons/icon-128x128.png', sizes: '128x128', type: 'image/png' },
      { src: 'icons/icon-192x192.png', sizes: '192x192', type: 'image/png' },
      { src: 'icons/icon-256x256.png', sizes: '256x256', type: 'image/png' },
      { src: 'icons/icon-384x384.png', sizes: '384x384', type: 'image/png' },
      { src: 'icons/icon-512x512.png', sizes: '512x512', type: 'image/png' }
    ]
  }
}

Особенности интеграции с PWA

  • Автоматическая генерация service worker — Quasar поддерживает режимы GenerateSW и InjectManifest. Первый позволяет автоматически создавать service worker, второй — использовать кастомный файл sw.js.
  • Кэширование ресурсов — манифест в сочетании с Workbox управляет стратегиями кэширования статических файлов, что обеспечивает offline-доступ.
  • Поддержка платформ — свойства манифеста учитываются браузерами, Android и iOS. На iOS часть настроек, таких как theme_color и display, обрабатывается Safari через мета-теги, которые Quasar генерирует автоматически.

Расширенные свойства

Помимо стандартных, Quasar позволяет задавать дополнительные параметры:

  • scope – определяет область действия приложения, например /app/.
  • start_url – URL, с которого начинается работа приложения при установке.
  • categories – массив категорий приложения для классификации в PWA-экосистеме.
  • screenshots – массив объектов с изображениями, демонстрирующими интерфейс приложения.
screenshots: [
  {
    src: 'screenshots/screen1.png',
    sizes: '640x480',
    type: 'image/png'
  },
  {
    src: 'screenshots/screen2.png',
    sizes: '640x480',
    type: 'image/png'
  }
]

Автоматизация и генерация

Quasar CLI позволяет создавать манифест с помощью команды:

quasar new pwa

Это создаёт готовый шаблон с заполненными иконками и базовой конфигурацией, которую можно адаптировать под конкретный проект. Все изменения применяются при сборке командой:

quasar build -m pwa

Важные рекомендации

  • Поддерживать одинаковые размеры иконок для разных платформ (от 128×128 до 512×512).
  • Использовать контрастные цвета background_color и theme_color для улучшения визуального восприятия.
  • Обновлять short_name и name в соответствии с целевой платформой, чтобы текст не обрезался на домашнем экране.
  • Проверять работу манифеста через Chrome DevTools → Application → Manifest, чтобы убедиться в правильности всех свойств.

Манифест в Quasar обеспечивает согласованное отображение PWA-приложения на всех устройствах, интегрируя стандартные веб-технологии с возможностями нативного опыта.

Оглавление