next-pwa and custom worker (FCM)
Unanswered
California pilchard posted this in #help-forum
California pilchardOP
Okay Im using
And in my
But how can I see if the service worker is working ?
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 ?