Add PWA Support to a Quasar SPA Without Touching Your Code

Why PWA Might Be the Right Move

Progressive Web Apps (PWAs) give a web‑only application the feel of a native install: offline caching, home‑screen icons, and a launch experience that feels like a mobile app. If your team already has a Quasar SPA, converting it to a PWA can be done without rewriting any component logic.

Quasar’s Mode System at a Glance

Quasar’s build system is driven by quasar.config.js. Inside that file you declare modes – spa, ssr, pwa, electron, capacitor, etc. The same Vue source tree is compiled differently for each mode. Switching modes is as simple as adding -m pwa to a command.

Key Files and Commands

• quasar.config.js – central config for all modes.
• quasar dev -m pwa – hot‑reload PWA build.
• quasar build -m pwa – production build with service worker.
• quasar build -m electron – desktop build.

Concrete Example: Turning an Existing SPA into a PWA

Assume you have a fresh Quasar project created with Vue 3 (Quasar v2) and you’re running quasar dev -m spa locally. The following steps add PWA support.

1. Add the PWA mode to the config

   // quasar.config.js
   module.exports = {
     // ...existing config
     pwa: {
       workboxPluginMode: 'GenerateSW', // or 'InjectManifest'
       workboxOptions: {
         // default options; tweak if needed
       },
       manifest: {
         name: 'My Quasar PWA',
         short_name: 'QuasarPWA',
         description: 'An example PWA',
         display: 'standalone',
         orientation: 'portrait',
         background_color: '#ffffff',
         theme_color: '#027be3',
         icons: [
           { src: 'icons/icon-192x192.png', sizes: '192x192', type: 'image/png' },
           { src: 'icons/icon-512x512.png', sizes: '512x512', type: 'image/png' }
         ]
       }
     }
   }
   

2. Generate the icon assets – Quasar ships a CLI helper:

   quasar new pwa-icons

   This creates the public/icons folder referenced in the manifest.
3. Run a local PWA dev server

   quasar dev -m pwa

   The dev server will register a temporary service worker. Open localhost:8080 in Chrome, open DevTools → Application → Service Workers, and confirm the SW is active.
4. Build for production

   quasar build -m pwa

   The dist/pwa folder now contains index.html, the service worker, and the manifest.
5. Verify offline behaviour
   1. Open the built app in Chrome.
   2. Open DevTools → Application → Service Workers and check the Installed status.
   3. Turn off network (Chrome’s Network tab → Offline) and reload the page. The app shell should still load.
   4. Run a Lighthouse audit for PWA score to confirm best‑practice flags.

Trade‑offs and Limitations

• Bundle size – Quasar ships a full component library. Even if you only use a handful of components, the default build includes the whole tree. Enable treeShaking: true and lazy‑load components to mitigate.
• Platform knowledge still required – While the build commands are simple, you still need to understand service workers, caching strategies, and manifest details. Misconfiguring workboxPluginMode can lead to stale caches.
• Native mobile build overhead – Adding capacitor or cordova modes introduces native toolchains (Android Studio, Xcode). Quasar only packages the web assets; signing and store submission are outside its scope.
• Version differences – Quasar v1 (Vue 2) uses quasar.conf.js and slightly different mode keys. Always check the package.json for @quasar/app version before following a tutorial.

When to Adopt Quasar for Multi‑Platform Needs

If your team already uses Vue 3 and you anticipate deploying to:

• Web SPA and offline‑first PWA
• Electron desktop app
• Mobile via Capacitor

Quasar’s single‑codebase, mode‑driven build pipeline reduces duplicated configuration and keeps platform decisions in one auditable file. For a pure web SPA, a lighter Vue UI library (e.g., Vuetify, Element‑Plus) may be easier to maintain.

Actionable Checklist

1. Verify you’re on Quasar v2 (Vue 3). npm list @quasar/app should show ^2.0.0.
2. Add the pwa block to quasar.config.js as shown.
3. Generate icons with quasar new pwa-icons.
4. Run quasar dev -m pwa and test service worker registration.
5. Build and audit offline behaviour with Lighthouse.
6. Commit quasar.config.js and icon assets to source control.

With these steps, you can deliver a PWA from the same codebase you already use for your SPA, without touching application logic.