Badge notifications provide the user a way to quickly see a numeric notification directly on the application icon either on the mobile app home screen or on the taskbar. Previously, this feature was available only on iOS and macOS targets of Uno Platform. Android does not have a standardized approach to show badge notifications on app icons yet, and there was no such web API available either. This has however changed when W3C published first draft of web Badging API. In this article I will share how I implemented the
BadgeUpdateManager API in Uno Platform WebAssembly using this new API.
Web Badging API
The web Badging API provides a very simple set of methods to set and clear the badge:
There is also a similar set of methods
clearClientBadge – these are very similar, but can only be used when the app is running (whereas
clearAppBadge can also be utilized from service worker). It is also important to note, that the badge is only set when the app is running as PWA on the device – it will not be applied when the app is just running as a tab within the context of a browser (at least currently).
Badge notifications in UWP
To support badge notifications in Uno Platform, we need to map this functionality on the UWP API. At the core is the
BadgeUpdateManager class, which first provides us with a XML template which we can modify and then create a
BadgeNotification. After that, we can use
BadgeUpdater.Update to send the notification.
So it's time to implement this!
Let's start with the
BadgeNotification class. This one is fairly easy, as it is just a container for the customized XML template of the notification.
I am skipping here over a "small detail" which is the
XmlDocument implementation. UWP uses a custom set of XML classes here, which closely mimic the built in .NET
System.Xml namespace classes. Implementing these was a necessary prerequisite and I did that in another PR, which you can find here, in case you are interested.
BadgeUpdateManager. For our purposes we need just two methods:
CreateBadgeUpdaterForApplication just creates a new instance of
BadgeUpdater which we will look into next.
GetTemplateContent should return the
XmlDocument template that the developer then modifies to set the badge value. Interestingly, even though UWP supports two different badge template types, both actually return the exact same XML, so that's also reflected in our code.
Here comes the most interesting part of our implementation:
BadgeUpdater this is the class that is actually responsible for applying the badge on the app icon. Uno Platform has many platform targets, so usually implementations of various UWP/WinUI APIs have some shared logic which leads to a platform specific handling in the end. Let's focus on the shared part first:
The constructor just performs a platform-specific initialization (if there is need for one). In the
Update method, we essentially "unpack" the interesting part of the badge notification's XML (we are only interested in the
value attribute's value). When we have it, we send it to the partial method called
SetBadge, which is platform specific and will handle the rest. Finally, the
Clear method just calls
SetBadge again, just with a
null argument. So how does the WebAssembly platform-specific code look? Let's see!
As the Web Badging API can only handle numeric badges, we parse the
string to an
int, and if successful, we invoke a TypeScript function, which is conveniently exposed on a class with the same name and namespace. For clearing the badge, we have another function with the same name.
So the final piece of our puzzle is the TypeScript counterpart of the
As we did most of the heavy lifting in the managed code, we essentially just forward our "request" to the Web Badging API here. Note I needed to declare the methods in the
Navigator interface, as the type definitions were not yet available in the TypeScript version Uno Platform is currently using (mostly because the Web Badging API is still a draft). In addition, I needed to omit the fact that the Web Badging API is using Promises. Unfortunately UWP/WinUI does not offer awaitable version of the
BadgeUpdater methods, so we need to assume the user will not call these in quick succession and that the previous request will predictably be resolved before the next one.
And that's it folks! In not-so-many lines of code it was possible to bring the UWP/WinUI API to Uno Platform WebAssembly, so now you can just write your Windowsy code and it will then light up and work without any changes on the web as well. If you want to review the whole PR, you can check it here. To make it even more interesting, it also contains the Tizen platform implementation. Feel free to try this API out in your apps too and let me know what you think!