Getting Notified With Edge Web Notifications
Notifications ! Notifications ! Notifications !… http://blog.dileepatech.net/wp-includes/images/smilies/rolleyes.png Well, you might be very familiar with the modern web notification that we usually get from the web browser. When you enable the notification feature in whatever the web site then it is easier to engage users with the site even you have minimized the web browser, while you are working on something. As an example in facebook you can now enable web notifications then it will show you whats the latest on you’re facebook notifications even you’re not surfing the facebook.
So this is really wonderful feature that you can leverage if you are running your own website or a blog. Where the web site get updated then the users who have enabled the web notifications for the web site can be able to get a notification saying that “Hey there is new article update on this site ! Please take a look at it .. Boom ! ” http://blog.dileepatech.net/wp-includes/images/smilies/mrgreen.png and so on. I would say that this will replace the traditional email subscription systems that is been used by specially news and media sites in order to engage readers with their web sites.
Here I’m going to show you that how to create such web notifications for your own web application or web site.So without further explanations lets get started !
First create a simple HTML web page and place the given JavaScript within the body of your web page and make sure it is in your localhost otherwise you will not get any notifications. That means you should run this in a web server. In my case this in in the root of the localhost and this is the index.html file.
<!DOCTYPE html>
<html>
<head>
<title>Edge Web Notifications</title>
</head>
<body>
<!--HTML Body-->
<h3>Let's send some notifications !</h3>
<button id="button">Send a notification</button>
<!--Java Script to enable and send the notification.-->
<script>
document.getElementById('button').addEventListener('click',function(){
if( "Notification" in window ) {
let ask = Notification.requestPermission();
ask.then ( permission => {
if(permission === "granted") {
let msg = new Notification("Im Title of notification", {
body: "Just say Hello World !",
icon: "imageIcon.png"
});
msg.addEventListener("click",event => {
alert("Click received");
});
}
});
}
});
</script>
<!--End of the Java Script-->
</body>
</html>
Now let’s see our code in action ! So once you open the web page in your web browser you can see the following screen.
http://blog.dileepatech.net/wp-content/uploads/2016/09/Edge-Web-Notifications-e1473742665998.png
Now just click the button, so you’ll see the that the notification is blowing up from the bottom right corner of your screen as follows https://s.w.org/images/core/emoji/72x72/1f600.png
http://blog.dileepatech.net/wp-content/uploads/2016/09/Edge-Web-Notifications2.png
Now if you go and check the Windows 10 Action Center you’ll be able to see the notifications which were not opened by the user.
http://blog.dileepatech.net/wp-content/uploads/2016/09/Edge-Web-Notifications3.png
So I would like to say that this notification system is also working for the Google Chrome web browser as well, you don’t even need to change the code. But it wont show in the Windows 10 Action Center after notifications popped up. This is how it is looks like in Google Chrome.
http://blog.dileepatech.net/wp-content/uploads/2016/09/Edge-Web-Notifications4.png
Now try clicking this notification so you’ll see message alert from the following part of the code in above JavaScript.
msg.addEventListener("click",event => {
alert("Click received");
}
What if you want’s to disable some notification on edge browser ? for that navigate to Settings> Advance Settings > Notification. Underneath the notification section there is a button call “Manage Notifications” click this and you’ll get a list of web sites that are enabled for web notifications from here you may disable whatever the notification that you don’t want.
You can use following notification properties and methods with your own application.
Notification properties
Notifications can be set with the following options:
| Property | Description |
|---|---|
| body | The body text of the notification. |
| dir | The direction of the notification’s text. |
| icon | The notification’s URL that is used for its icon. |
| lang | The language of the notification. |
| permission | The current notification display permission the user has granted for the current origin. |
| tag | The tag of the notification. |
| title | The title of the notification. |
Notification events
The following events are used with the Notification object:
| Event | Description |
|---|---|
| onclick | Fires when a notification is clicked by the user. |
| onclose | Fires when a notification is closed by the user or an auto timeout. |
| onerror | Fires when an error occurs while handling a notification. |
| onshow | Fires when a notification is displayed. |
Notification methods
The following methods are used with the Notification object:
| Method | Description |
|---|---|
| close | Closes a displayed notification. |
| requestPermission | Requests permission from the user to allow notifications to be displayed by the current origin. |
That’s it ! See how easy it is.Now it’s your time to give it a try.You can download the source code from the bellow link. Please don’t forget to leave your valuable comments and if you have suggestions you may edit from the git. https://s.w.org/images/core/emoji/72x72/1f600.png