Set-up guide of firebase with custom-service- worker.js using 'InjectManifest' mode

[jitendra1607]

Set-up guide of firebase with custom-service- worker.js using 'InjectManifest' mode

[jitendra1607]

in quasar.conf.js file

pwa: {
      workboxPluginMode: 'InjectManifest',
      workboxOptions: {
        // skipWaiting: true,
        // clientsClaim: true
      },
}

your 'register-service-worker.js' file

/*
 * This file is picked up by the build system only
 * when building for PRODUCTION
 */

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

let swReg = null
register(process.env.SERVICE_WORKER_FILE, {
  ready(registration) {
    swReg = registration
    console.log('App is being served from cache by a service worker.')
  },
  registered(registration) { // registration -> a ServiceWorkerRegistration instance
    console.log('Service worker has been registered.')
  },
  cached(registration) { // registration -> a ServiceWorkerRegistration instance
    console.log('Content has been cached for offline use.')
  },
  updatefound(registration) { // registration -> a ServiceWorkerRegistration instance
    console.log('New content is downloading.')
  },
  updated(registration) { // registration -> a ServiceWorkerRegistration instance
    console.log('New content is available; please refresh.')
    // alert('update')
    Notify.create({
      message: 'New update available, refresh to update',
      icon: 'cloud_download',
      // closeBtn: 'Update',
      timeout: 20000,
      actions: [{
        label: 'Refresh',
        color: 'accent',
        icon: 'sync', // optional
        noDismiss: true, // optional, v0.15.11+
        handler: () => {
          location.reload(true)
        }
      }],
      onDismiss() {
        // location.reload(true)
      }
    })
  },
  offline() {
    console.log('No internet connection found. App is running in offline mode.')
  },
  error(err) {
    console.error('Error during service worker registration:', err)
  }
})
const getswReg = function getswReg() {
  return swReg
}
export default getswReg
// ServiceWorkerRegistration: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration

In any .vue file (for example Mylayout.vue)

import this

import getswReg from '../../src-pwa/register-service-worker'

then in 'created()' block add this code

  setTimeout(() => {
      // console.log('swRegg', getswReg())
      if (!firebase.apps.length) {
        firebase.initializeApp(this.config)
        this.messaging = firebase.messaging()

        this.getToken()
        this.messaging.onTokenRefresh(() => {
          this.messaging.getToken({
            // add your VPAID key here
            serviceWorkerRegistration: getswReg(),
            vapidKey: 'xxxxxxx'
          }).then((refreshedToken) => {
            console.log('Token refreshed.')
            if (this.isNewToken(refreshedToken)) {
              this.sendTokenToServer(refreshedToken)
            }
          }).catch((err) => {
            console.log('Unable to retrieve refreshed token ', err)
          })
        })
        this.messaging.onMessage((payload) => {
          console.log('Message received. ', payload, this.wh.baseIcon)
          var notificationTitle = payload.data.title
          var notificationOptions = {
            body: payload.data.body,
            icon: `${this.wh.baseIcon}`,
            badge: '/icons/badge.png',
            optionsData: payload.data.optionsData,
            vibrate: [100, 50, 100],
            data: {
              dateOfArrival: Date.now(),
              primaryKey: '2'
            }
          }
          localforage.removeItem('optionsData', (err, value) => {
            console.log(err, 'routeleave', value)
          })

          this.opData = notificationOptions.optionsData

          let notifs = this.$q.localStorage.getItem('notifs') || []
          notifs.push({ 't': payload.data.title, 'b': payload.data.body })
          this.$q.localStorage.set('notifs', notifs)

          this.$q.notify({
            message: notificationTitle + ' : ' + notificationOptions.body,
            color: 'primary',
            multiLine: true,
            avatar: `${this.wh.baseIcon}`
          })
        })
      }
    }, 2000)

Enjoy.

[jitendra1607]

@rstoenescu @metalsadman @smolinari Please highlight it in docs to help others.