Persilsoft.WebPush.Blazor 1.0.4

Persilsoft.WebPush.Blazor

Provides a service to facilitate user subscription to the push notification service.

Example
First, you need to register the following group of services in the dependency container.

using Persilsoft.WebPush.Blazor.Options;
using ServiceCollectionExtensions;

Action<WebPushNotificationOptions> WebPushNotificationOptionsConfigurator = options =>
builder.Configuration.GetSection(WebPushNotificationOptions.SectionKey).Bind(options);
builder.Services.AddNotificationService(WebPushNotificationOptionsConfigurator);

In the configuration file appsettings.json you must configure the following key:

"WebPushNotification": {
    "ServerPublicKey": "XXXXXXXXXXXXXXXXXXXXX"
}

Where: ServerPublicKey: The VAPID public key.

Now, you can use the service to obtain a subscription:

@page "/get-subscription"
@inject WebPushService PushNotificationService

<h3>Subscription Demo</h3>

<button class="btn btn-primary" @onclick=GetSubscriptionAsync>Get Subscription</button>

@if (pushSubscription != default)
{
    <div class="mt-3 card">
        <div class="card-body">
            <div>
                <div class="mt-3">Endpoint</div>
                <div class="p-3 bg-dark text-white">@pushSubscription.Endpoint</div>
            </div>

            <div>
                <div class="mt-3">P256dh</div>
                <div class="p-3 bg-dark text-white">@pushSubscription.P256dh</div>
            </div>

            <div>
                <div class="mt-3">Auth</div>
                <div class="p-3 bg-dark text-white">@pushSubscription.Auth</div>
            </div>

            <div>
                <div class="mt-3">Is New Subscription</div>
                <div class="p-3 bg-dark text-white">@pushSubscription.IsNewSubscription</div>
            </div>
        </div>
    </div>
}

@if (!string.IsNullOrEmpty(message))
{
    <div class="m-3 alert alert-info">@message</div>
}

@code {
    private PushSubscription pushSubscription;
    string message;

    private async Task GetSubscriptionAsync()
    {
        message = string.Empty;
        pushSubscription = await PushNotificationService.GetSubscription();
        if (pushSubscription == default)
        {
            message = "Subscription could not be retrieved.";
        }
    }
}

In order for the user to receive push notifications, they will need to send the subscription data, including the public key, to the backend server.