Integration of Webpushr for Real-Time Notifications

[neozhu]

Overview

This Pull Request introduces the integration of Webpushr to implement real-time web push notifications in the application. Web push notifications are a modern and efficient way to engage users by delivering timely updates directly to their browsers, even when the application is not active.

Webpushr is a comprehensive platform that simplifies web push notification management with features such as customizable notifications, targeted delivery, and detailed analytics. By integrating Webpushr, we aim to enhance user engagement and communication.

Key Changes

1. Added Webpushr Configuration in appsettings.json:

   "Webpushr": {
       "Token": "your-webpushr-token",
       "APIKey": "your-webpushr-api-keys",
       "PublicKey": "your-webpushr-public-key"
   }

   These configuration values are required for authentication and can be obtained by registering on the Webpushr platform.

2. Created WebpushrSetup.razor Component:
   This component handles the initialization of Webpushr and manages its configuration dynamically. Below is the core implementation:

   @code {
       protected override async Task OnAfterRenderAsync(bool firstRender)
       {
           if (firstRender)
           {
               var result = await ApiClientService.ExecuteAsync(() => ApiClient.Webpushr.Config.GetAsync());
               result.Switch(
                   async ok =>
                   {
                       var webpushr = new Webpushr(JS);
                       await webpushr.SetupWebpushrAsync(ok.PublicKey!);
                   },
                   invild =>
                   {
                       Snackbar.Add(L["Invalid configuration received. Please check the Webpushr settings."], Severity.Error);
                   },
                   error =>
                   {
                       Snackbar.Add(L["An error occurred while fetching the Webpushr configuration. Please try again later."], Severity.Error);
                   });
           }
       }
   }

3. Sample Notification Sending Functionality:
   Added an example implementation for sending a web push notification using Webpushr:

   private async Task SendNotificationAsync()
   {
       var client = HttpClientFactory.CreateClient("Webpushr");
       try
       {
           string payload = @"{
               \"title\": \"Sample Notification\",
               \"message\": \"This is a test notification!\",
               \"target_url\": \"https://example.com\",
               \"icon\": \"icon-192.png\"
           }";
           HttpContent httpContent = new StringContent(payload, Encoding.UTF8);
           httpContent.Headers.ContentType = new MediaTypeHeaderValue("application/json");
           var response = await client.PostAsync("/v1/notification/send/all", httpContent);
           string respContent = await response.Content.ReadAsStringAsync();
           Snackbar.Add($"Notification Sent: {respContent}", Severity.Success);
       }
       catch (Exception ex)
       {
           Snackbar.Add(ex.Message, Severity.Error);
       }
   }

Configuration Details

To set up Webpushr:

1. Register on the Webpushr website to get your Token, API Key, and Public Key.
2. Add these keys to your appsettings.json file under the Webpushr section.
3. Ensure that your client-side code correctly initializes Webpushr using the PublicKey.

Testing

1. Verify that the Webpushr configuration is loaded correctly from the API.
2. Ensure that notifications are successfully sent and received.
3. Validate error handling for invalid or missing configurations.

Benefits

• Improved User Engagement: Notifications keep users informed and engaged.
• Real-Time Updates: Deliver updates instantly to users' browsers.
• Scalable Solution: Webpushr provides robust tools for managing large-scale notifications.

Next Steps

• Review and merge this PR to enable Webpushr integration.
• Configure Webpushr on the production environment with the required keys.
• Monitor and optimize the notification delivery process based on user feedback.