Understanding the Notification API

In this article, we’ll look at what web notifications are and how to use them with JavaScript.

I’m sure if you’re using the Internet, you’ve seen something like this before:

Here’s Facebook asking you to confirm notifications. If you allow it, you will get a notification on your device about new messages or something else. This is very useful not only for social networks, but also for email clients, forums, news sources, online stores and so on.

Let’s start by learning some basics and then move on to more advanced features.

Request Notification

The first thing to do is to ask for permission, without access from the user, we do not have the right to show any notifications. But even before the request, step zero is to check whether the browser supports API notifications or not.

Even taking into account the fact that this is not a new API, browser support is not very good. But it is good enough for the main desktop browsers.

Now it’s time to make a request, which is quite simple:

That’s it! But let’s look at a slightly more advanced code:

So here we use the requestPermission method with a callback function that takes only one parameter — the permission variable. This variable can represent three values — granted, denied, and default. We are looking for the first — granted because only in this case we can send notifications.

You can try inserting the code from above in the console, make sure it works!

Depending on whether you allow or deny the request, you’ll get a Promise object in the console. What does that mean? This means that we can chain our request using the then method as many times as we want. By default, the catch method is not displayed, even if user denied request.

So here’s how we can use requestPermission as a Promise:

You can also ask for permission as many times as you want, note that it won’t ask for permission every time if it’s already granted or denied, but will return the already selected permission value.

Before we proceed further, it should be noted that there is no possibility of stylizing the pop-up notification. And in different browsers / platforms it can look very different.

Send Notifications

At this moment, we know how to request permission. Now it’s time for something more interesting!

Let’s create our first notification:

This code immediately generates a notification, but only if the user has granted access before.

Here’s only one way to create a notification — with a new operator. The notification constructor can take up to two parameters. The first — title and the second — options object. The whole list of possible options you can find in the MSDN, we will look only at commonly used.

So, here it is, you already know the title — is just a name. A body is a description under the heading where you can give more details about notification itself. Icon — shows an icon, it can be convenient with social networks when you can show the avatar of the user who is sending you a message. Vibrate — useful for mobile devices that usually support this feature. More information about the vibration API as always you can get in MSDN.

Close Notifications

There are only two methods that Notification has. We have already seen the first — requestPermission. Now let’s look at the second one — close.

This method is quite simple without any parameters. Please note that the notification will be closed after some time by default. So you don’t need to close notifications in JS every time.

And a little more advanced example:

Properties

The API itself is quite simple, but there are a bunch of properties that we’ll look at now.

The first and most important — permission. This gives us the current permission to display notifications.

This is the only static property. In addition, there a bunch of instance properties that match the options, so we usually don’t use them at all.

Events

There are only two events that are onerror and onclick.

First, consider the onclick event. Onclick calls each time a user clicks on a notification.

We can only set onclick on the Notification instance, so each new notification is each new onclick. There is no way to set it on all notifications.

The onerror event will only occur if errors occur.

There are also onclose and onshow events, but both are not recommended since in future browsers they can be removed so we won’t look at them.

Sum up

Now we know how to use Notifications! So, with all our knowledge, let’s create a handy function that will wrap some checks and return new notifications.

And here is a live example:

So that’s all! Hope you now better understand the Notification API.

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.