How to get instance created of Serviceworker with "custom-service-worker.js"

  • Hello everyone!

    I am trying to push notification with serviceworker of PWA in quasar.

    In quasar.conf.js, I set workboxPluginMode: ‘InjectManifest’ :

    So, As I understand it. When i build with command: “quasar build -m pwa” then service worker will be created by code in my “custom-service-worker.js” file.
    You can read here :

    My problem is : When I try subscribe to server with function:

    function subscribeUser() {
          userVisibleOnly: true,
          applicationServerKey: applicationServerKey
        .then(function (subscription) {
          console.log('User is subscribed.');
          isSubscribed = true;
        .catch(function (err) {
          console.log('Failed to subscribe the user: ', err);
    // I write this code in "register-service-worker.js"

    I have error , because my instance service worker have status active is null so it cannot subscribe.

    How to catch event instance created of service worker ( with status is : activated ) in this way.

    Note: In another way, when I do not config workboxPluginMode: ‘InjectManifest’ :. So I can catch event instance created of service worker in ready() function of “register-service-worker.js” file

    Thanks you.

  • [Option 1]
    Here is my workerServices.js

    let worker = null
    export const initWorkerInstance = () => {
      console.log('worker is not initialized')
      return new Promise(resolve => {
        if ('navigator' in window && 'serviceWorker' in window.navigator) {
          const { serviceWorker } = window.navigator
          return serviceWorker.ready.then((workerInstance) => {
            worker = workerInstance
        return resolve(null)
    export const getWorkerInstance = () => {
      return new Promise(resolve => {
        if (worker === null) return initWorkerInstance().then(resolve)
        return resolve(worker)

    then in components you use

    import { getWorkerInstance } from 'workerServices.js'
    getWorkerInstance().then(workerInstance => {
       this.worker =

    [Option 2]: I highly recommend you use this library

Log in to reply