Notification actions support

[jtsoya539]

Hi @vertonghenb! Thanks for this great package! 💯

Any chance to add support for notification actions following NotificationAction APIs?

[MrGeneric]

Agreed, great package.

I've run into this limitation too. I tried to add support, but ran into an issue I'm not sure how to get around. After adding Actions to the Notification object I get this error:

Failed to construct 'Notification': Actions are only supported for persistent notifications shown using ServiceWorkerRegistration.showNotification().

I'm using Blazor server, so not using ServiceWorkers. I think it should be possible to get this to work if you're using WASM.

[vertonghenb]

@jtsoya539 Good idea, any idea how to implement it?

[sho9029]

@vertonghenb I found a way to use the NotificationAction API from C#. (using service worker)

Implement the Action class.

public class Action
{
    public string Action { get; set; }
    public string Title { get; set; }
    public string Icon { get; set; }
}

inject

[Inject]
private INotificationService _notificationService { get; set; }

then, I did this (using the anonymous type here, but originally using the NotificationOptions class)

var title = "Title";
var options = new
{
    // Put other options here.
    actions = new List<Action>
    {
        new Action { Action = "action1", Title = "Action1", Icon = "icon url" },
        new Action { Action = "action2", Title = "Action2", Icon = "icon url" },
        // You can add as much as Notification.maxActions
    }
};

await _notificationService.CreateAsync(title, options);

read more about Notification.maxActions

however, in my environment, in order to achieve this, I had to rewrite the JavaScript side code as well.

export async function create(title, options) {
    const reg = await navigator.serviceWorker.getRegistration();
    reg.showNotification(title, options);
}

Since it uses ServiceWorker, I can't pullRequest my implementation of NotificationAction to this repository.

[xDaniel17]

Hi, @vertonghenb, Thank you very much for your project.

I have a question, why https://agreeable-rock-071180b03.azurestaticapps.net/ does not work in android and the version https://web-push-book.gauntface.com/demos/notification-examples/ yes.. any difference in the code?

Error: blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Failed to construct 'Notification': Illegal constructor. Use ServiceWorkerRegistration.showNotification() instead. TypeError: Failed to construct 'Notification': Illegal constructor. Use ServiceWorkerRegistration.showNotification() instead.

Thanks.

[sho9029]

Hi, @xDaniel17.

I know answers to that question, so I will answer it for you.

https://agreeable-rock-071180b03.azurestaticapps.net/ uses this Notification constructor, which is not supported by Android (Chrome and WebView). However, https://web-push-book.gauntface.com/demos/notification-examples/ uses a service worker method as shown in this site. Why this error occurs when using the constructor in Android is described in this site. (to summarize, the browser on Android does not support constructors.)

[xDaniel17]

Thank you so much for your response @sho9029 !

[bennimoser]

@sho9029 Have you found a Solution for catching the Action Click? "notificationclick" doesnt seem to work

[sho9029]

@bennimoser If you use firebase, this comment may be resolve your problem.

[dikshatickoo1991]

Hi. I am facing issue. Click event is not getting generated