Настройка PWA режима

Quasar Framework предоставляет встроенную поддержку Progressive Web App (PWA), что позволяет создавать веб-приложения с возможностью установки на устройства, оффлайн-доступом и push-уведомлениями. Для активации PWA режима необходимо использовать CLI Quasar и корректно настроить конфигурацию проекта.

Создание проекта с поддержкой PWA

При создании нового проекта через Quasar CLI важно указать поддержку PWA:

quasar create my-app

Во время конфигурации будет предложено выбрать тип сборки. Для PWA нужно включить опцию Progressive Web App. После генерации проекта структура каталогов будет включать папку src-pwa, содержащую все файлы, необходимые для работы PWA.

Структура папки src-pwa

  • manifest.json — основной манифест приложения, который определяет название, иконки, цвета и поведение при установке на устройство.
  • service-worker.js — скрипт Service Worker для кеширования ресурсов и работы оффлайн.
  • register-service-worker.js — регистрация Service Worker в приложении.
  • icons/ — папка с иконками для разных размеров устройств.

Настройка manifest.json

Файл манифеста управляет внешним видом и поведением приложения при установке:

{
  "name": "My Quasar PWA",
  "short_name": "QuasarPWA",
  "description": "Пример PWA на Quasar",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#ffffff",
  "theme_color": "#027be3",
  "icons": [
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

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

  • display: определяет способ отображения приложения (standalone, fullscreen, minimal-ui, browser).
  • orientation: фиксирует ориентацию экрана (portrait или landscape).
  • theme_color: цвет заголовка и панели состояния.
  • background_color: цвет фона при запуске приложения.

Настройка Service Worker

Service Worker отвечает за оффлайн-доступ, кеширование и push-уведомления. В Quasar используется Workbox, который интегрирован через @quasar/pwa:

// src-pwa/sw.js
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

// Кеширование статических ресурсов
precacheAndRoute(self.__WB_MANIFEST);

// Пример динамического кеширования API
registerRoute(
  ({ url }) => url.origin === 'https://api.example.com',
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
  })
);

Основные стратегии кеширования:

  • Cache First — сначала проверяет кеш, если нет, загружает с сети.
  • Network First — сначала проверяет сеть, если нет, использует кеш.
  • Stale While Revalidate — возвращает кеш сразу, а затем обновляет данные с сети.

Регистрация Service Worker

Регистрация Service Worker выполняется в src-pwa/register-service-worker.js:

import { register } from 'register-service-worker';

if (process.env.PROD) {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log('Service worker активен.');
    },
    registered() {
      console.log('Service worker зарегистрирован.');
    },
    cached() {
      console.log('Контент закеширован для оффлайн работы.');
    },
    updatefound() {
      console.log('Найдено обновление.');
    },
    updated() {
      console.log('Приложение обновлено.');
    },
    offline() {
      console.log('Отсутствует интернет, работаем в оффлайн режиме.');
    },
    error(error) {
      console.error('Ошибка регистрации service worker:', error);
    },
  });
}

Регистрация выполняется только в продакшн-сборке, что предотвращает конфликты при разработке.

Настройка кеширования в quasar.conf.js

В разделе pwa можно задать стратегию кеширования и другие параметры:

pwa: {
  workboxPluginMode: 'InjectManifest',
  workboxOptions: {},
  manifest: {
    name: 'My Quasar PWA',
    short_name: 'QuasarPWA',
    description: 'Пример PWA на Quasar',
    display: 'standalone',
    orientation: 'portrait',
    background_color: '#ffffff',
    theme_color: '#027be3',
    icons: [
      { src: 'icons/icon-128x128.png', sizes: '128x128', type: 'image/png' },
      { src: 'icons/icon-256x256.png', sizes: '256x256', type: 'image/png' },
      { src: 'icons/icon-512x512.png', sizes: '512x512', type: 'image/png' }
    ]
  }
}
  • workboxPluginMode: 'GenerateSW' — автоматически генерирует service worker, 'InjectManifest' — использует кастомный sw.js.
  • workboxOptions: опции Workbox для настройки кеширования, маршрутов и стратегий.

Проверка работы PWA

  1. Собрать проект с PWA:
quasar build -m pwa
  1. Запустить сервер сборки:
quasar serve dist/pwa

  1. Открыть DevTools → Application → Manifest, Service Workers. Проверить:

    • наличие манифеста и иконок,
    • успешную регистрацию Service Worker,
    • кеширование ресурсов и работу оффлайн.

  2. Приложение должно предлагать установку на рабочий стол или мобильное устройство, отображать splash screen и корректно работать без сети.

Поддержка оффлайн данных и уведомлений

Для динамических данных можно использовать IndexedDB или LocalStorage совместно с Service Worker, чтобы кешировать API-ответы. Для push-уведомлений интегрируется Web Push через VAPID-ключи, а Quasar PWA предоставляет шаблон для их обработки в Service Worker.

Настройка иконок и splash screen

  • Все размеры иконок должны быть указаны в manifest.json и храниться в папке icons/.
  • Splash screen формируется автоматически на основе background_color и иконок.
  • Цвет панели состояния (theme_color) влияет на внешний вид приложения на Android.

Таким образом, Quasar позволяет создавать полнофункциональные PWA с минимальной ручной настройкой, обеспечивая оффлайн-доступ, установку на устройство, кеширование и поддержку push-уведомлений. Все элементы конфигурации находятся в src-pwa и quasar.conf.js, что делает процесс прозрачным и гибким.

Оглавление