Автообновление приложений

Quasar предоставляет встроенные механизмы для реализации автообновления приложений, которые позволяют пользователю получать новые версии без необходимости ручной установки. Этот процесс особенно важен для PWA (Progressive Web Apps), мобильных приложений на базе Cordova или Capacitor, а также для SPA, развёрнутых на сервере.

Автообновление в Quasar основывается на проверке версий приложения и применении service worker для загрузки обновлений в фоне. Для PWA это происходит через Workbox, который автоматически кэширует ресурсы и управляет их актуальностью.

Настройка PWA для автообновления

В quasar.conf.js необходимо убедиться, что PWA включён и корректно настроен:

pwa: {
  workboxPluginMode: 'InjectManifest',
  workboxOptions: {},
  manifest: {
    name: 'MyApp',
    short_name: 'App',
    description: 'Приложение с автообновлением',
    display: 'standalone',
    background_color: '#ffffff',
    theme_color: '#027be3'
  }
}

Ключевые моменты:

  • workboxPluginMode: 'InjectManifest' позволяет полностью контролировать стратегию кэширования и обновления.
  • manifest задаёт информацию о приложении, которую используют браузеры при установке PWA.

Стратегии обновления

Quasar и Workbox поддерживают несколько стратегий кэширования, которые определяют, когда и как обновление будет применено:

  1. NetworkFirst – сначала пытается загрузить свежий ресурс с сервера, при отсутствии сети берёт закэшированный.
  2. CacheFirst – сначала отдаёт закэшированную версию, обновляет её в фоне.
  3. StaleWhileRevalidate – отдаёт закэшированную версию сразу, а затем обновляет её в фоне для следующей загрузки.

Для автообновления лучше использовать StaleWhileRevalidate, чтобы пользователь всегда видел приложение без задержек, а новая версия подхватывалась автоматически.

Пример конфигурации в service-worker.js:

workbox.routing.registerRoute(
  ({request}) => request.destination === 'script' || request.destination === 'style',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'static-resources',
  })
);

Обнаружение и применение обновлений

Quasar предоставляет удобный API через $q и registerServiceWorker для контроля обновлений:

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

register('/service-worker.js', {
  updated (registration) {
    // Событие, когда новая версия доступна
    const waitingServiceWorker = registration.waiting;
    if (waitingServiceWorker) {
      waitingServiceWorker.postMessage({ type: 'SKIP_WAITING' });
      window.location.reload();
    }
  }
});

Особенности реализации:

  • updated срабатывает, когда новая версия кэширована, но ещё не активирована.
  • postMessage({ type: 'SKIP_WAITING' }) инициирует немедленную активацию обновлённого service worker.
  • window.location.reload() перезагружает приложение с новой версией.

Интеграция с Quasar Notify

Для улучшенного UX полезно уведомлять пользователя о новой версии:

import { Notify } from 'quasar';

updated (registration) {
  Notify.create({
    message: 'Доступна новая версия приложения',
    actions: [
      {
        label: 'Обновить',
        color: 'positive',
        handler: () => {
          registration.waiting.postMessage({ type: 'SKIP_WAITING' });
          window.location.reload();
        }
      }
    ]
  });
}

Таким образом пользователь сам инициирует обновление, что предотвращает неожиданные перезагрузки во время работы.

Автообновление мобильных приложений

Для приложений на базе Cordova или Capacitor автообновление можно реализовать с помощью Quasar CLI и сервисов обновлений:

  • Cordova Hot Code Push (CHCP) – позволяет загружать обновления JavaScript и ресурсов без пересборки приложения.
  • Capacitor App Update – интеграция с внешним сервером для проверки версии и загрузки новых ресурсов.

Пример использования CHCP в quasar.conf.js:

cordova: {
  plugins: {
    cordovaHotCodePushPlugin: {}
  }
}

На клиентской стороне можно подписаться на события плагина и автоматически применять обновление:

document.addEventListener('chcp_updateIsReadyToInstall', () => {
  chcp.installUpdate(() => console.log('Обновление установлено'), (err) => console.error(err));
});

Рекомендации по управлению версиями

  1. Инкрементировать version в package.json при каждом релизе.
  2. В PWA использовать manifest.json с уникальным version или short_name.
  3. Всегда тестировать стратегию кэширования в разных сценариях — offline, медленное соединение, переход между вкладками.
  4. При больших приложениях кэшировать только критичные ресурсы, а остальные загружать динамически.

Автоматизация обновления через CI/CD

Для полноценного автообновления желательно интегрировать Quasar с CI/CD:

  • Генерация service-worker.js при каждой сборке.
  • Автоматическое деплоирование PWA на сервер.
  • Обновление манифеста и ресурсов с версионированием.

Пример скрипта сборки в package.json:

"scripts": {
  "build:pwa": "quasar build -m pwa",
  "deploy": "rsync -av dist/pwa/ user@server:/var/www/app"
}

Такой подход позволяет пользователю всегда получать актуальную версию без ручного вмешательства.

Вывод

Quasar объединяет возможности PWA, Cordova и Capacitor, предоставляя гибкую систему автообновлений. Правильное сочетание стратегии кэширования, событий service worker и уведомлений позволяет поддерживать приложение всегда актуальным, минимизируя неудобства для пользователя и снижая риски устаревших версий.

Оглавление