Trouble with Push Notifications on iOS in Next.js 13 and Firebase PWA Setup

Question

Created Jan ’24

Replies 0

Boosts 0

Participants 1

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);
    }
});

Boost