Introduction to the Notification API

The Notifications API enables a website to send notifications outside the user’s browser, like system notifications. This allows the website or webapp to send information to the user in the background.

We are going to brush through the basics on how to set up and get started using this API.

This article is meant to be beginner friendly and only the basics knowledge of programming should be sufficient.

Step one: Checking current permission status.

You can check the status of the permission on your browser console using Notification.permission. It has three possible values: “default”, “denied” and “granted”.

Notification.permission

Step two: Granting permission.

If the website or webapp has not been granted permission to start displaying notifications

Notification.requestPermission().then(function(res) {
  console.log(res);
});

Step three: Create new notification.

Once permission has been granted to the user, you can use the constructor function to initialize a new notification and pass a string in a Notification constructor as the parameter, i.e.

let notification = new Notification('Hello there');

Now that we have known how to request for permission from the user, we can clean it up a little, and create a function called notifyMe() that will contain the code for checking permission, and sending the notifications from the website or web application.

function notifyMe() {
    let img = 'https://img.icons8.com/color/48/000000/task.png';

    // check for browser support
    if (!('Notification' in window)) {
        alert('This browser does not support system notifications.');
    }
    // check whether notification permissions have already been granted
    else if (Notification.permission === 'granted') {
        // if ok, create notification
        let text = `Hey there, pick up groceries is now overdue`;

        let notification = new Notification('To Do list', {
            body: text,
            icon: img
        });
    }
    // otherwise, ask user for permission
    else if (
        Notification.permission === 'denied' ||
        Notification.permission === 'default'
    ) {
        Notification.requestPermission(permission => {
            // if user accepts, let's create notification
            if (permission === 'granted') {
                let notification = new Notification('To Do list', {
                    body: text,
                    icon: img
                });
            }
        });
    }
}

// call the function
notifyMe();

As you might have noticed, the Notification constructor is able to take in a second argument, options, which is an object containing details such as the icon and text to be used in the body of the notification to enhance the content.

The image used is a clipboard to signify a given task. You can view it here

Here's the link to the Github repo with the code used in this article:

ruheni / sandbox

This repository contains files used for learning various programming concepts

Sandbox

This repository contains files used for learning various programming concepts in the various programming languages I'm learning

Projects

1. Notification

In this folder, I've explored the Notification Browser API used to request the user for permission and sending notifications to the user from a web application or website. They send notifications to the user in the background. No external APIs are used to send notifications to a user.

2. Web-Components

I explore how to make custom HTML elements in JavaScript and using the Shadow DOM and using classes to declare the elements and export them for rendering on the HTML page. news-article.js is the file that contains the custom HTML element created and used in index.js file to finally parse JSON and render them on index.html.

3. Testing

Mocha is used for writing and running unit tests in JavaScript. I use it to learn how to write tests…

View on GitHub

This is my first technical article, if you have any suggestions on how to help improve my writing or what kind of content you would like me to write, feel free to send me a direct message 🙂 🙃