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.

[dlarocque]

After further investigation, it looks like push event listeners and onBackground message share the same behaviour.

The behaviour I'm now seeing is:

1. Add PWA to home screen
2. Grant permissions for notifications
3. Restart device
4. Notifications no longer come in
5. Open PWA, exit PWA
6. Notifications don't come in
7. Kill PWA in background
8. Open PWA, exit PWA
9. Notifications successfully come in

My guess is that the service worker isn't registered when the device first boots up. I am not sure whether this is the expected behaviour of PWAs, or if this is a WebKit bug.

[atgillette]

Take a look at this related issue, #7309 (comment)

[dlarocque]

This has been added to a list of known issues with FCM in iOS PWAs caused by WebKit bugs in our Wiki: https://github.com/firebase/firebase-js-sdk/wiki/Known-Issues