firebase / firebase/firebase-js-sdk

iOS Web Push Device Unregisters Spontaneously

Open
#8,010 81 comments 8 reactions 0 assignees View on GitHub
api: messaging bug question
Dominant language
TypeScript
Stars
5.1k
Forks
1k
Avg merge
2d 21h
Merged PRs (30d)
37

Description

### 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.