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.

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

quasar mode add 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.

A new folder will appear in your project folder (which is explained in detail on the Configuring PWA page):

All the files above are going to be detailed in the next pages, but the high overview is:

• The register-sw.js file is part of the UI code and communicates with the service worker.
• The manifest.json is the PWA manifest file.
• When using InjectManifest, you can write your own custom service worker (sw/custom-sw.js). It lives in /src-pwa/sw/, code runs in WebWorker context (no DOM), and compiled separately from the rest of the app.

Should you want to use different filenames, you can do so by editing the /quasar.config file:

sourceFiles: {
  pwaRegisterServiceWorker: 'src-pwa/register-sw',
  pwaServiceWorker: 'src-pwa/sw/custom-sw',
  pwaManifestFile: 'src-pwa/manifest.json',
}