Handling Service Worker

Here you’ll learn how to interact with the Service Worker from within your website/app space. Remember, service workers MUST be served over HTTPS.

It’s important to note that the Service Worker (which gets automatically generated by Workbox – or you’ve configured Quasar CLI to use your custom one) runs in a separate thread. You can however interact with it from app-space from within /src-pwa/register-service-worker.js file.

Interacting with Service Worker

Notice the register-service-worker npm package, which comes out of the box along with Quasar CLI (so don’t install it yourself).

// src-pwa/register-service-worker.js file

import { register } from 'register-service-worker'

register(process.env.SERVICE_WORKER_FILE, {
  ready (registration) {
    console.log('Service worker is active.')
  },

  registered (registration) {
    console.log('Service worker has been registered.')
  },

  cached (registration) {
    console.log('Content has been cached for offline use.')
  },

  updatefound (registration) {
    console.log('New content is downloading.')
  },

  updated (registration) {
    console.log('New content is available; please refresh.')
  },

  offline () {
    console.log('No internet connection found. App is running in offline mode.')
  },

  error (error) {
    console.error('Error during service worker registration:', error)
  }
})

TIP

This file is automatically bundled into your website/app by Quasar CLI because it is considered as part of app-space /src. What this means is that you can use ES6, import other files etc.

SSL certificate

You may notice in some dev environments, that Workbox will not load your service workers during quasar dev if you are not using HTTPS to serve - even on localhost. You will see that there are two scripts that can’t load. The Chrome browser console is relatively tight-lipped about this, but Firefox tells you what is going on. The three options you have are:

  • set quasar.conf.js > devServer > https: true
  • setup a loopback from localhost to 127.0.0.1 (but this is not without security implications)
  • serve your localhost over ngrok and use the https address that ngrok provides

When you set devServer > https: true in your quasar.conf.js file, Quasar will auto-generate a SSL certificate for you. However, if you want to create one yourself for your localhost, then check out this blog post by Filippo. Then your quasar.conf.js > devServer > https should look like this:

// quasar.conf.js

const fs = require('fs')
// ...

devServer: {
  https: {
    key: fs.readFileSync('/path/to/server.key'),
    cert: fs.readFileSync('/path/to/server.crt'),
    ca: fs.readFileSync('/path/to/ca.pem'),
  }
}