Hello, I'm setting up a PWA with Next.js 13 and Firebase, and I need help with push notifications on iOS. Is there anyone experienced with this?
I have notifications configured using the next-pwa service worker, and they work well on Android, but not on iOS.
This is my worker/index.ts
import { initializeApp } from 'firebase/app';
import { getMessaging, onMessage } from 'firebase/messaging';
import { onBackgroundMessage } from 'firebase/messaging/sw';
export const vapidKey = process.env.VAPID_API_KEY;
export const FCM_TOKEN_COLLECTION = 'fcmTokens';
export const FCM_TOKEN_KEY = 'fcmToken'
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATA_BASE_URL,
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,
vapidKey: process.env.VAPID_API_KEY,
};
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);
onBackgroundMessage(messaging, (payload) => {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
if (payload.notification?.title) {
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification?.body,
icon: '/images/logo-app-4.0.svg',
};
self.registration.showNotification(notificationTitle, notificationOptions);
}
});
onMessage(messaging, (payload) => {
console.log('Message received. ', payload);
});
and the next.config.js
const runtimeCaching = require('next-pwa/cache');
const withPWA = require('next-pwa')({
dest: 'public',
register: true,
skipWaiting: true,
dynamicStartUrl: true,
dynamicStartUrlRedirect: '/login',
runtimeCaching,
disable: prod ? false : true,
});
module.exports = withPWA({
reactStrictMode: true,
swcMinify: false,
experimental: {
appDir: true,
},
});
and the public/firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/10.6.0/firebase-messaging.js');
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('../firebase-messaging-sw.js')
.then(function (registration) {
alert('Registration successful, scope is: registration.scope');
}).catch(function (err) {
alert('Service worker registration failed, error:');
});
}
firebase.initializeApp({
messagingSenderId: '*************'
})
const initMessaging = firebase.messaging()
initMessaging.onBackgroundMessage(messaging, (payload) => {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
if (payload.notification?.title) {
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification?.body,
icon: '/images/logo-app-4.0.svg',
};
self.registration.showNotification(notificationTitle, notificationOptions);
}
});