Next.js Discord

Discord Forum

next-pwa and custom worker (FCM)

Unanswered
California pilchard posted this in #help-forum
Open in Discord
California pilchardOP
Okay Im using next-pwa for building my NextJS app and I try to add push notification with FCM. How Im supposed to add the js file ? Ive done this :
const withPWA = require('@ducanh2912/next-pwa').default({
  dest: 'public',
  customWorkerSrc: 'worker',
  register: true,
  skipWaiting: true,
  // disable: process.env.NODE_ENV === 'development',
});

And in my worker folder I have an index.js :
// 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.
// Replace 10.13.2 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/11.0.1/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/11.0.1/firebase-messaging-compat.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: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
    console.log(
      '[firebase-messaging-sw.js] Received background message ',
      payload
    );
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
      body: payload.notification.body,
      icon: './logo.png',
    };
    self.registration.showNotification(notificationTitle, notificationOptions);
});

But how can I see if the service worker is working ?

0 Replies