Firebase Messaging Service Worker

[bruceharrison1984]

I'm trying to use the custom worker feature to setup Firebase Messaging, but it explicitly expects the service worker to be named firebase-messaging-sw.js. Failure to name it properly results in the frontend failing to enable messaging due to the service worked being perceived as missing.

Is there any way to specify a name?

[bruceharrison1984]

Found an old thread that answers this question:
#156

Custom service worker:

import { firebaseConfig } from '../src/firebase/FirebaseConfig';
import { getMessaging, onBackgroundMessage } from 'firebase/messaging/sw';
import { initializeApp } from 'firebase/app';

// get type file from: https://github.com/shadowwalker/next-pwa/blob/master/examples/custom-ts-worker/types/service-worker.d.ts
let self: ServiceWorkerGlobalScope;

const firebase = initializeApp(firebaseConfig);

const messaging = getMessaging(firebase);

onBackgroundMessage(messaging, async ({ notification }) => {
  console.log(
    '[firebase-messaging-sw.js] Received background message ',
    notification,
  );

  await self.registration.showNotification(notification?.title!, {
    body: notification?.body,
  });
});

Client-side code:

// after adding the service worker, the following will register the client via the next-pwa service worker

export const requestMessagingToken = async () => {
  if (typeof window === 'undefined' || !('serviceWorker' in navigator))
    throw new Error('Cannot call FCM on server side');

  const serviceWorkers = await navigator.serviceWorker.getRegistrations();

  try {
    return await getToken(getMessaging(), {
      serviceWorkerRegistration: serviceWorkers[0],
    });
  } catch (err) {
    console.error('An error occurred while retrieving token. ', err);
  }
};