On iOS, how does a PWA know what number of net push notifications are excellent, with a view to present a rely badge on the app icon?
I’ve a site which helps being put in as a standalone PWA (progressive net app) on cellular. On Android this implies the Chrome menu has an “Set up App” possibility; on iOS it’s performed by means of the Safari share button and “Add to Dwelling Display screen”. As soon as put in, you’ve an app icon separate to the browser. I assist net push notifications, so the standalone app icon ought to present a badge with a rely when notifications have arrived and wish consideration.
The issue is that Android and iOS deal with this fairly otherwise.
On Android the system handles the badge rely robotically. If an online push arrives for the app, the badge quantity will increase by one. If the notification will get faraway from the system record for any motive — both by the person tapping it, or clearing it with out motion — the badge rely is decremented. So the displayed badge rely matches the variety of notifications within the system notification heart’s record, as anticipated.
iOS doesn’t do that. There is no such thing as a computerized badging, and as a substitute there may be an iOS-only API to set or clear the badge rely: Notification.setAppBadge(rely) and Notification.clearAppBadge(). It’s as much as the developer to set the rely explicitly. This can sometimes be within the service employee code, so the net app may not be open at this level.
Utilizing setAppBadge(n) can be OK, besides that I can’t determine the right quantity to point out. What number of unread notifications for my PWA are there within the iOS system notification heart? And if the person simply clears a notification with out appearing on it, how does the service employee know to alter the quantity? There’s a service employee notificationclose occasion however it isn’t supported on iOS.
I’ve learn Badging for Dwelling Display screen Net Apps. The pattern service employee code glosses over this and simply has:
// Perform to find out the badge rely primarily based on the occasion information
perform determineBadgeCount(information) {
// Course of the info to compute the badge rely
}
self.addEventListener('push', (occasion) => {
…
const badgeCount = determineBadgeCount(occasion.information);
const promise = self.navigator.setAppBadge(badgeCount);
}
The push occasion information doesn’t comprise a personalised occasion rely for each completely different person. My service employee can’t make a server name to find the occasion rely as a result of the API name must be authenticated and there’s no UI accessible for gathering or refreshing credentials. Even when there was a manner, it will be a foul person expertise if the arrival of an online push prompted an app Signal In UI to seem.
To date all I can consider is utilizing a hard and fast badge rely, for instance 1, for any variety of notifications, and clearing it when the app is delivered to the foreground. It’s not likely very passable. Has anybody else addressed this?
Apart: setAppBadge MDN docs say that you need to use it with no parameter:
self.navigator.setAppBadge();
to get an unnumbered dot, which might be ultimate, however this doesn’t work on iOS as one other query notes.