In this article, we will learn about custom browser push notifications.
We will use the “Push Notification” plugin for Custom browser push notifications. So, below you can find out how to use the push notification plugin.
Step 1: First, you have to download the “Push Notification” plugin from the below link.
Also, add the latest jquery.min.js file from the below link,
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
After downloading the plugin, you will get the “Push Notification” zip file.
Step 2: Now extract the files from the zip file and you will get the number of files as shown below.
From the above files, you have to bind the required JS files on a page when you want to use push notification as shown in the below PushNotofication.cshtml file.
@{
ViewBag.Title = "PushNotofication";
}
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/push_notification.js"></script>
<div class="row">
<h2>PushNotofication</h2>
</div>
<div class="row">
<button id="btnNotification" class="bg-primary btn-primary">Click Me</button>
</div>
<script>
$("#btnNotification").click(function () {
$.notify("Notification arrive");
});
</script>
As you have shown in the above file, we have given the reference of “push_notification.js” to the “PushNotification.cshtml ” file. For trigger a notification, use “$.notify()” method.
You can use the “$.notify()” method in a different way as below,
1. Create a basic push notification.
$.notify("simple notify");
2. Create a push notification with a custom title.
$.notify("Custom Title", {
title: "This is title!"
});
3. Create clickable push notifications.
$.notify("click alert notify").click(function(){
// do something
});
4. Create a push notification with a custom notification icon.
$.notify("Custom Icons", {
icon: "1.png"
});
After following all the above steps, Your push notification will be started working.
I hope, You guys found something useful.
Output,
Also, check this related article, Database Change Notification Using SignalR With MVC.
Thank you.
