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/
    ├── 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.

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.