Firebase Cloud Messaging – Cannot receive messages through PWA (Vue + Firebase 8.10.0)

I’ve run into a snag/gap in firebase’s setup with web applications(PWA) which is not so clear in the documentation. I have an existing PWA built on Vue@^2.6.10 and am trying to plug Firebase’s cloud messaging into it using [email protected]. It’s easy enough to configure my application to receive messages from firebase when the app is active within a browser tab by using the following code in my App.vue in a created hook.

// Includes for the component
import firebase from 'firebase/app'
import 'firebase/app'
import 'firebase/messaging'

// Within the created hook
firebase.initializeApp({
  apiKey: "XXXXXXXXXX_XXXXXXXXXXXXXXXXXXXXX",
  authDomain: "xxxx.firebaseapp.com",
  projectId: "xxxx",
  storageBucket: "xxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxxx",
  appId: "x:xxxxxxxxx:web:xxxxxxxxxxx",
  measurementId: "G-xxxxxxxxxxx"
})
const firebaseMessaging = firebase.messaging()
firebaseMessaging.getToken()
.then((token) => { console.log("Messaging Token: ", token) })
.catch((err) => { console.log("Messaging error: ", err) })
firebaseMessaging.onMessage((payload) => {
  console.log("Message in app: ", payload)
})

While the PWA is active within a browser window/tab, I am able to successfully send a curl message to my application.

curl -X POST --header "Authorization: key=XXXXXXXXXXXX" --Header "Content-Type: application/json" https://fcm.googleapis.com/fcm/send -d '{"to":"XXXXXXXXXXXXX","notification":{"title":"Hello","body":"World","icon":"image/mstile-150x150.png"}}'

However, if I try to then configure the PWA to receive notifications via the firebase service worker, this is when the documentation seems to be missing context. Below is the recommended service worker configuration from the firebase docs which I am using.

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: "xxxxx_xxxxxxxxxxxxxxx",
  authDomain: "xxxx.firebaseapp.com",
  projectId: "xxxx",
  storageBucket: "xxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxx",
  appId: "x:xxxx:web:xxxxxxxxxx",
  measurementId: "G-xxxxxxxxxxx"
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

For a standard website without an existing service worker, it seems like this configuration should be enough, however, since I am tying into an existing PWA with an existing service worker, it seems I need to register firebase’s configuration with the existing PWA configuration on my application. From what I’ve found thus far, the proper configuration of that tie-in is the following.

if ("serviceWorker" in navigator) {
  wb = new Workbox(`${process.env.BASE_URL}service-worker.js`)
  wb.addEventListener("controlling", () => { window.location.reload() })
  wb.register()
  wb.register("./firebase-messaging-sw.js")
  .then(function(registration) {
    console.log("Registration successful, scope is:", registration.scope);
    })
    .catch(function(err) {
      console.log("Service worker registration failed, error:"  , err );
    })
} else {
  wb = null
}

From the look of it, this does successfully register Firebase’s configuration with my existing service worker.

However, while the registration looks successful from the onset it’s not actually tying into the service worker. When clicking away from the PWA’s active browser tab under this configuration, the service worker does not receive a notification when performing the same curl above. From everything I can tell thus far in the docs, the PWA should be receiving the notification and firing a default browser notification for the event, however, that’s not the case. No notification is received even though the notification did send through Firebase’s API successfully given the response from their API:

{"multicast_id":3069325822032476405,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"88f73357-6a0e-416d-8417-67608437f84d"}]}%

So, I am kind of at the end of the road in terms of what documentation and threads I can find on this topic thus far. It would seem like there’s not a great example of how to do this configuration correctly when tying into an existing service worker. I very much appreciate anyone with experience on this topic providing their insight on configurations you’ve made work using firebase and service worker on PWAs.

Many thanks!