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)


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 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 (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"}] }