Post
Ask Question

Web Push Notifications In ASP.NET Core

Introduction

Push notifications have become one of the essential micro marketing tools. It’s one of the effective ways to keep users engaged with your app or website.

This article will explain how to implement web push notifications in ASP.NET Core application using OneSignal.

Steps to Take in OneSignal

Step 1

Create a free OneSignal account from signup page https://app.onesignal.com/signup

Step 2

After completing the registration, login into the system and create a new app/website. See the screenshots below on how to create new app/website.

Web Push Notifications in ASP.NET Core

Web Push Notifications in ASP.NET Core

Web Push Notifications in ASP.NET Core

Web Push Notifications in ASP.NET Core

Web Push Notifications in ASP.NET Core

Integration in ASP.NET Core Application

After saving the configuration, it will redirect to the page where you can download SDK file and code snippet. SDK file can be download from here. Unzip the SDK files and upload the SDK files (OneSignalSDKWorker.js) to the root directory of your site. Those SDK files should be accessible publicly. Add the code to the <head> section on main layout file (~/Views/Shared/_Layout.cshtml). You can create new ASP.NET Core project in Visual Studio or it can be use in existing project. Below is the code snippet.    

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
    window.OneSignal = window.OneSignal || [];
    OneSignal.push(function() {
        OneSignal.init({
            appId: "<App Id>",
        });
    });
</script>

Now run the project and you will see the alert to subscribe. Until you are not subscribed, you will not get push notification.

Web Push Notifications in ASP.NET Core

You will also get welcome message when you subscribe

Sending Push Notification from ASP.NET Core Application

To send push notification from application, I added a button in index.cshtml of Home view folder.

<form asp-action="SendPushNotification">
    <button type="submit">Send Push Notification</button>
</form>

When this form is submitted, it post form to SendPushNotification action result of HomeController.cs. All the action sending push notification is handled there.       

[HttpPost]
public IActionResult SendPushNotification()
{
    try
    {
        var webRequest = WebRequest.Create($"{ApiUrl}") as HttpWebRequest;
        webRequest.KeepAlive = true;
        webRequest.Method = "POST";
        webRequest.ContentType = "application/json; charset=utf-8";
        webRequest.Headers.Add("authorization", $"Basic {ApiKey}");

        var obj = new
        {
            app_id = AppId,
            headings = new { en = "Web Push Notification Title" }, //this value can be change as per need, can be a value from db
            contents = new { en = "Here it goes push notification content" }, //this value can be change as per need, can be a value from db
            included_segments = new string[] { "All" },
            url = ""
        };
        var param = JsonConvert.SerializeObject(obj);
        var byteArray = Encoding.UTF8.GetBytes(param);

        using (var writer = webRequest.GetRequestStream())
        {
            writer.Write(byteArray, 0, byteArray.Length);
        }

        using (var response = webRequest.GetResponse() as HttpWebResponse)
        {
            if (response != null)
            {
                using var reader = new StreamReader(response.GetResponseStream());
                var responseContent = reader.ReadToEnd();
            }
        }
    }
    catch (Exception ex)
    {
        
    }
    return View("~/views/home/index.cshtml");
}

When you submit the form, you will get notification like in below screenshot

Web Push Notifications in ASP.NET Core

You can also check the stats from OneSignal portal

Web Push Notifications in ASP.NET Core

You can also download the attached project source code.

Thank you for reading!


Similar Articles