Quasar
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.
Installation
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/
├── register-service-worker.js # App-code *managing* service worker
└── custom-service-worker.js # Optional custom service worker file
You can freely edit these files. Notice a few things:
- Both files are embedded ONLY for production builds, while the development build skips them.
- “register-service-worker.js” is automatically imported into your app (like any other /src file). It registers the service worker (created by Workbox or your custom one, depending on workbox plugin mode – quasar.conf.js > pwa > workboxPluginMode) and you can listen for Service Worker’s events. You can use ES6 code.
- “custom-service-worker.js” will be your service worker file ONLY if workbox plugin mode is set to “InjectManifest” (quasar.conf.js > pwa > workboxPluginMode: ‘InjectManifest’). Otherwise, Workbox will create a service-worker file for you.
- During development, a no-op service worker will be created which plays nicely with HMR (Hot Module Reload). Its sole purpose is to override any possible previous registered service worker.
- It makes sense to run Lighthouse tests on production builds only.
Quasar.conf.js
This is the place where you can configure Workbox’s behavior and also tweak your manifest.json.
pwa: { |
More information: Workbox Webpack Plugin, Workbox.
Configuring Manifest File
The Manifest file is generated by Quasar CLI with 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: {
// workboxPluginMode: 'InjectManifest',
// workboxOptions: {},
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.
IMPORTANT
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
https://developers.google.com/web/progressive-web-apps/checklist
IMPORTANT
Do not run Lighthouse on your development build. It is not optimized and does not contain a true Service Worker.