Configuring PWA     

We’ll be using Quasar CLI to develop and build a PWA. The difference between building a SPA, Mobile App, Electron App, PWA or SSR 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:

1. “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.
2. “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.
3. 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: {
  // workboxPluginMode: 'InjectManifest',
  // workboxOptions: {},
  manifest: {
    // ...
  }
}

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.