Configuring PWA     

We’ll be using Quasar CLI to develop and build a PWA. The difference between building a SPA, Mobile App, Electron App or a PWA is simply determined by the “mode” parameter in “quasar dev” and “quasar build” commands.


In order to build a PWA, we first need to add the PWA mode to our Quasar project:

$ quasar mode -a pwa

If you want to jump right in and start developing, you can skip the “quasar mode” command and issue:

$ quasar dev -m pwa

This will add PWA mode automatically, if it is missing.

Service Worker

Adding PWA mode to a Quasar project means a new folder will be created: /src-pwa, which contains PWA specific files:

└── src-pwa/
   ├── service-worker-dev.js # Development Service Worker
└── service-worker-prod.js # Production Service Worker

You can freely edit these files. Notice that the development uses a separate Service Worker than the production build. This service worker (/src-pwa/service-worker-dev.js) file is effectively a ‘no-op’ that will reset any previous service worker registered for the same host:port combination. In the production build, this file is replaced with an actual service worker file that will pre-cache your site’s local assets: /src-pwa/service-worker-prod.js.

Configuring Manifest File

The Manifest file is generated by Quasar CLI by using sw-precache-webpack-plugin package and a default configuration for it. You can however tweak this configuration from /quasar.conf.js.

Example taken from Quasar Play’s quasar.conf.js:

pwa: {
cacheId: '...' // default taken from package.json > name field or 'quasar-pwa-app'
cacheExt: 'js,html,css,ttf,eot,otf,woff,woff2,json,svg,gif,jpg,jpeg,png,wav,ogg,webm,flac,aac,mp4,mp3',
manifest: {
name: 'Quasar Play',
short_name: 'Quasar-Play',
description: 'Quasar Framework Showcase',
icons: [
'src': 'statics/icons/icon-128x128.png',
'sizes': '128x128',
'type': 'image/png'
'src': 'statics/icons/icon-192x192.png',
'sizes': '192x192',
'type': 'image/png'
'src': 'statics/icons/icon-256x256.png',
'sizes': '256x256',
'type': 'image/png'
'src': 'statics/icons/icon-384x384.png',
'sizes': '384x384',
'type': 'image/png'
'src': 'statics/icons/icon-512x512.png',
'sizes': '512x512',
'type': 'image/png'
display: 'standalone',
orientation: 'portrait',
background_color: '#ffffff',
theme_color: '#027be3'

Please read about the manifest config before diving in.

Note that you don’t need to edit your index.html file (generated from /src/index.template.html) to link to the manifest file. Quasar CLI takes care of embedding the right things for you.

PWA Checklist

Do not run Lighthouse on your development build. It is not optimized and does not contain a true Service Worker.