Режимы сборки: SPA, SSR, PWA, Electron, Capacitor
↑ 5.3 Quasar · ← Предыдущая · → Следующая
Зачем это на собесе
Ключевое преимущество Quasar — единая кодовая база для разных платформ; нужно знать ограничения каждого режима.
Объяснение
| Режим | Результат | Особенности |
|---|---|---|
| SPA | статические файлы | простой деплой на CDN/nginx; SEO ограничено |
| SSR | Node-сервер, HTML на сервере | SEO, быстрый первый показ; нужно оберегать код от использования window на сервере, гидратация, preFetch |
| PWA | SPA + Service Worker + manifest | офлайн, установка, push; Workbox (GenerateSW/InjectManifest), стратегии кэша |
| Electron | десктоп (Windows/macOS/Linux) | доступ к Node/ОС, main/preload-процессы, безопасность (contextIsolation, IPC) |
| Capacitor (или Cordova) | мобильное приложение (iOS/Android) | нативные плагины (камера, файлы, push), сборка в Xcode/Android Studio |
| BEX | браузерное расширение | manifest v3 |
quasar mode add pwa && quasar build -m pwa
quasar mode add capacitor && quasar dev -m capacitor -T android
quasar build -m electronОбщие практики:
- Платформенно-зависимый код скрыт за адаптерами/фичефлагами (
$q.platform.is.capacitor), проверкаprocess.env.MODE,process.env.CLIENT. - Конфигурация окружения отдельно на режим (
build.env). - PWA: стратегии кэширования (Cache First для ассетов, Network First для API), обновление приложения (
skipWaiting+ уведомление), офлайн-страница, HTTPS. - SSR: без
window/documentна сервере; хранилища — на запрос (Pinia), данные —preFetch; кэширование страниц. - Electron/Capacitor: безопасность (не отключать
contextIsolation, минимальные IPC), подпись и обновление приложений.
Выбор: внутренние корпоративные системы — обычно SPA (и PWA при необходимости), публичные страницы с SEO — SSR или prerender, мобильные — Capacitor.
Нюансы и подводные камни
- Service Worker кэширует агрессивно: пользователи «застревают» на старой версии без стратегии обновления.
- SSR увеличивает сложность деплоя и мониторинга (Node-процесс).
- Мобильные режимы требуют нативных SDK и подписи; веб-API отличаются.
- Не все библиотеки поддерживают SSR/Electron.
Практика
- Добавьте режим PWA и проверьте офлайн-работу и установку.
- Соберите SPA и SSR и сравните первый показ.
- Опишите, какие платформенные различия вы изолируете адаптерами.
Вопросы с ответами
Зачем несколько режимов сборки в Quasar?
Один код для web, PWA, SSR, десктопа и мобильных платформ.
Основная проблема PWA?
Обновление: Service Worker кэширует ресурсы, и без правильной стратегии пользователи не получают новую версию.