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)
  }
})

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 may 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.config.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.config.js file, Quasar will instruct Vite to 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.config.js > devServer > https should look like this:

More info on Vite and HTTPS here.

Important Hosting Configuration

It’s important that you do not allow browsers to cache the Service Worker file (by default: sw.js). Because otherwise updates to this file or to your app might slip through the cracks for browsers that load the service-worker from cache.

This is why you must always make sure to add "Cache-Control": "no-cache" to the headers of sw.js file via your hosting service.

As an example how this is done for Google Firebase, you would add the following to the firebase.json configuration:

{
  "hosting": {
    "headers": [
      { "source":"/sw.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
    ]
  }
}