On iOS, how does a PWA know how many web push notifications are outstanding, in order to show a count badge on the app icon?
I have a web site which supports being installed as a standalone PWA (progressive web app) on mobile. On Android this means the Chrome menu has an “Install App” option; on iOS it is done through the Safari share button and “Add to Home Screen”. Once installed, you have an app icon separate to the browser. I support web push notifications, so the standalone app icon should show a badge with a count when notifications have arrived and need attention.
The problem is that Android and iOS handle this quite differently.
On Android the system handles the badge count automatically. If a web push arrives for the app, the badge number increases by one. If the notification gets removed from the system list for any reason — either by the user tapping it, or clearing it without action — the badge count is decremented. So the displayed badge count matches the number of notifications in the system notification center’s list, as expected.
iOS does not do this. There is no automatic badging, and instead there is an iOS-only API to set or clear the badge count: Notification.setAppBadge(count) and Notification.clearAppBadge(). It’s up to the developer to set the count explicitly. This will typically be in the service worker code, so the web app might not be open at this point.
Using setAppBadge(n) would be OK, except that I can’t figure out the correct number to show. How many unread notifications for my PWA are there in the iOS system notification center? And if the user just clears a notification without acting on it, how does the service worker know to change the number? There is a service worker notificationclose event but it is not supported on iOS.
I have read Badging for Home Screen Web Apps. The sample service worker code glosses over this and just has:
// Function to determine the badge count based on the event data
function determineBadgeCount(data) {
// Process the data to compute the badge count
}
self.addEventListener('push', (event) => {
…
const badgeCount = determineBadgeCount(event.data);
const promise = self.navigator.setAppBadge(badgeCount);
}
The push event data does not contain a personalised event count for every different user. My service worker can’t make a server call to discover the event count because the API call needs to be authenticated and there is no UI available for gathering or refreshing credentials. Even if there was a way, it would be a bad user experience if the arrival of a web push caused an app Sign In UI to appear.
So far all I can think of is using a fixed badge count, for example 1, for any number of notifications, and clearing it when the app is brought to the foreground. It’s not really very satisfactory. Has anyone else addressed this?
Aside: setAppBadge MDN docs say that you can use it with no parameter:
self.navigator.setAppBadge();
to get an unnumbered dot, which would be ideal, but this does not work on iOS as another question notes.