Notification
How to use the Notification class of the bit Butil?
Usage
To use the browser notification features you need to inject the Bit.Butil.Notification class and use it like this:
@inject Bit.Butil.Notification notification
@code {
await notification.IsSupported();
await notification.Show("title", new() { Body = "this is body." });
}Methods
IsSupported:
Checks if the runtime (browser or web-view) is supporting the Web Notification API.
@inject Bit.Butil.Notification notification
<BitText>Notification supported? [@isNotificationSupported]</BitText>
<BitButton OnClick="CheckIsSupported">IsSupported</BitButton>
@code {
private bool? isNotificationSupported;
private async Task CheckIsSupported()
{
isNotificationSupported = await notification.IsSupported();
}
}GetPermission:
Gets the current permission of the Notification API. (MDN).
@inject Bit.Butil.Notification notification
<BitText>Current permission state: [@permissionResult]</BitText>
<BitButton OnClick="GetCurrentPermissionState">GetPermission</BitButton>
@code {
private NotificationPermission? permissionResult = null;
private async Task GetCurrentPermissionState()
{
permissionResult = await notification.GetPermission();
}
}RequestPermission:
Requests permission from the user for the current origin to display notifications. (MDN).
@inject Bit.Butil.Notification notification
<BitText>Request permission result: [@requestPermissionResult]</BitText>
<BitButton OnClick="RequestPermission">RequestPermission</BitButton>
@code {
private NotificationPermission? requestPermissionResult = null;
private async Task RequestPermission()
{
requestPermissionResult = await notification.RequestPermission();
}
}Show:
Requests a native notification to show to the user. (MDN).
Note: The Notification api has some limitation on Android and for it to work properly a Service Worker needs to be registered first.
@inject Bit.Butil.Notification notification
<BitButton OnClick="ShowNotification">Show</BitButton>
@code {
private async Task ShowNotification()
{
await notification.Show("title", new() { Body = "this is body." });
}
}