iOS Web Push Device Unregisters Spontaneously

[fred-boink]

Operating System

iOS 18.4+

Browser Version

Safari

Firebase SDK Version

10.7.2

Firebase SDK Product:

Messaging

Describe your project's tooling

NextJS 13 PWA

Describe the problem

Push notifications eventually stop being received until device is re-registered. Can take a few hours and lots of messages to occur but eventually stops receiving push.

People mention this can be a cause, Silent Push can cause your device to become unregistered:
https://dev.to/progressier/how-to-fix-ios-push-subscriptions-being-terminated-after-3-notifications-39a7

Safari doesn’t support invisible push notifications. Present push notifications to the user immediately after your service worker receives them. If you don’t, Safari revokes the push notification permission for your site.

https://developer.apple.com/documentation/usernotifications/sending_web_push_notifications_in_web_apps_and_browsers

Possible that Firebase does not waitUntil and WebKit thinks its a invisible push?

Steps and code to reproduce issue

public/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({
    apiKey: '',
    authDomain: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
    measurementId: ''
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
    const {data} = payload;
    // Customize notification here
    const notificationTitle = data?.title;
    const notificationOptions = {
        data: {
            link: data?.link
        },
        body: data?.body,
        badge: './icons/icon-mono.png',
        icon:
            data?.senderProfileImage
    };

    return self.registration.showNotification(
        notificationTitle,
        notificationOptions
    );
});

self.addEventListener('notificationclick', function (event) {
    event.notification.close();

    event.waitUntil(
        clients
            .matchAll({
                type: 'window'
            })
            .then(function (clientList) {
                for (var i = 0; i < clientList.length; i++) {
                    var client = clientList[i];
                    if (client.url === '/' && 'focus' in client) {
                        return event?.notification?.data?.link
                            ? client.navigate(
                                `${self.origin}/${event?.notification?.data?.link}`
                            )
                            : client.focus();
                    }
                }
                if (clients.openWindow) {
                    return clients.openWindow(
                        event?.notification?.data?.link
                            ? `${self.origin}/${event?.notification?.data?.link}`
                            : '/'
                    );
                }
            })
    );
});

• install app to homescreen
• Receive notifications
• Notice notifications no longer are received
• Re-register device
• Receive notifications

[JVijverberg97]

Looks like the same issue as #8013!

[fred-boink]

This keeps happening to users. This is the extent of our code. Why would the device stop sending pushes?

messaging.onBackgroundMessage((payload) => {
    const {data} = payload;
    const notificationTitle = data?.title;
    const notificationOptions = {
        data: {
            link: data?.link
        },
        body: data?.body,
        badge: './icons/icon-mono.png',
        icon:
            data?.senderProfileImage
    };

    return self.registration.showNotification(
        notificationTitle,
        notificationOptions
    );
});

[gbaggaley]

We are also having the same issue, looks like it works about 3 times on iOS and then just stops until the app is then opened and the token refreshed again.

messaging.onBackgroundMessage((payload) => {
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        body: payload.notification.body,
        icon: payload.notification.image ?? "/icon-256x256.png",
        click_action: payload.data.link,
    };

    return self.registration.showNotification(
        notificationTitle,
        notificationOptions
    );
});

[graphem]

Could this be related to this? https://dev.to/progressier/how-to-fix-ios-push-subscriptions-being-terminated-after-3-notifications-39a7

Not sure if the onBackgroundMessage message takes care of the waitUntil

[fred-boink]

Could this be related to this? https://dev.to/progressier/how-to-fix-ios-push-subscriptions-being-terminated-after-3-notifications-39a7

Not sure if the onBackgroundMessage message takes care of the waitUntil

I suspect the issue is iOS thinks this is a invisible push notifications because firebase is doing it async, but until someone actually looks into, I don't know. We are debating moving off of FCM for this reason, it just stops working after some time.

[graphem]

Alright that is indeed the issue, I just ran a bunch of test and I replace the onBackgroundMessage with this in my service worker:

self.addEventListener('push', function(event) {
    console.log('[Service Worker] Push Received.');
    const payload = event.data.json();  // Assuming the payload is sent as JSON
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        body: payload.notification.body,
        icon: payload.notification.icon,
        image: payload.notification.image,
        badge: payload.notification.badge,
    };
    event.waitUntil(
        self.registration.showNotification(notificationTitle, notificationOptions)
    );
});

This is working perfectly, so I just remove all trace of firebase in the service worker. All the notifications are coming in now in iOS.

I think this need to be address in the firebase codebase.

[fred-boink]

Alright that is indeed the issue, I just ran a bunch of test and I replace the onBackgroundMessage with this in my service worker:

``self.addEventListener('push', function(event) { console.log('[Service Worker] Push Received.'); const payload = event.data.json(); // Assuming the payload is sent as JSON const notificationTitle = payload.notification.title; const notificationOptions = { body: payload.notification.body, icon: payload.notification.icon, image: payload.notification.image, badge: payload.notification.badge, }; event.waitUntil( self.registration.showNotification(notificationTitle, notificationOptions) ); });`

This is working perfectly, so I just remove all trace of firebase in the service worker. All the notifications are coming in now in iOS.

I think this need to be address in the firebase codebase.

How do we get their attention!

[graphem]

Alright that is indeed the issue, I just ran a bunch of test and I replace the onBackgroundMessage with this in my service worker:
``self.addEventListener('push', function(event) { console.log('[Service Worker] Push Received.'); const payload = event.data.json(); // Assuming the payload is sent as JSON const notificationTitle = payload.notification.title; const notificationOptions = { body: payload.notification.body, icon: payload.notification.icon, image: payload.notification.image, badge: payload.notification.badge, }; event.waitUntil( self.registration.showNotification(notificationTitle, notificationOptions) ); });`
This is working perfectly, so I just remove all trace of firebase in the service worker. All the notifications are coming in now in iOS.
I think this need to be address in the firebase codebase.

How do we get their attention!

Yeah, seems like a big deal, since it is not working on iOS

[jonathanyin12]

Wow this solved my exact problem. Thank you!!