iOS PWA Device Restart Suppresses Notifications

[dlarocque]

Operating System

iOS 17.5.1

Environment (if applicable)

Safari PWA

Firebase SDK Version

10.7.2

Firebase SDK Product(s)

Messaging

Project Tooling

React App deployed to Firebase Hosting.

Detailed Problem Description

After adding the application to the home screen on iOS, notifications come in successfully. After restarting the device, notifications stop being received. Once the PWA is opened, all of the notifications that were previously suppressed are sent all at once.

If I replace

messaging.onBackgroundMessage((event) => {
  return self.registration.showNotification('hello', {});
})

with

self.addEventListener('push', (event) => {
  return self.registration.showNotification('hello', {});
})

then the notifications come in just fine, so this is in fact a Firebase Messaging issue, where the event handler doesn't get triggered.

Steps and code to reproduce issue

Deploy an application with the following

1. Register the app to receive notifications

import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';

const firebaseConfig = {
  /**/
};

const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

const requestPermission = () => {
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log("Notification permission granted.");
      getToken(messaging, { vapidKey: 'KEY' })
        .then((currentToken) => {
          if (currentToken) {
            console.log(`Token: ${currentToken}`);
          } else {
            console.log("No registration token avaiable");
          }
        })
        .catch((err) => { 
          console.error(err); 
        })
    } else {
      console.warn("Notification permission denied");
    }
  })
}

2. Register the firebase-messaging-sw.js:

importScripts('https://www.gstatic.com/firebasejs/10.7.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.7.2/firebase-messaging-compat.js');

firebase.initializeApp({ /* */ });

const messaging = firebase.messaging();

messaging.onBackgroundMessage((event) => {
  return self.registration.showNotification('hello', {});
})

Once the application is deployed, make sure WebKit Notifications are enabled on the device by going to Settings > Safari > Advanced > Feature Flags > Notifications. Then, visit the app in Safari, add it to the home screen, grant access to receive notifications, and send a notification on the device. Once you've confirmed you see notifications, restart the device. If you send notifications again, you'll notice they don't come in anymore, until you open the app again.