How to Display Desktop Notifications using JavaScript

How to Display Desktop Notifications using JavaScript

JavaScript Notifications API enables web pages to display messages to users on their devices across different platforms. These notifications appear regardless the user has switched between tabs or moved to another application.

These messages (also called system or desktop notifications) can be used to notify the user about important events such as an email, new social media message, live chat notification, calendar reminders, etc. You can even use system notifications to send marketing campaigns.

In this tutorial, I'll explain a simple usage of Notifications API to display messages to the user while the site is opened in a browser tab.

Browser Support

The Notifications API is fairly new and may not work in older browsers. Therefore, you should explicitly verify if the API is supported by the browser before showing a message. You can do this by checking if the window object has a property called Notification:

if (!window.Notification) {
  console.log('Browser does not support notifications.')
} else {
  // display message here
}

On supported platforms, displaying a desktop notification involves two things: requesting permission and creating a new notification object.

Note: The Notification API requires your website to use an SSL certificate. It does not work on insecure origins (HTTP).

Requesting Permission

The user must grant the current origin permission to show a desktop notification. You can always check if the user has already granted permission to display system notifications using the Notification.permission property.

This property has the following possible values:

• default - The user has not yet decided to accept notifications from your site
• granted - The user has allowed your site to display notifications
• denied - The user has chosen to block notifications from your site

If it is the first case, you can request permission from the user using the requestPermission() method of the Notifications API. It will open a dialog to ask the user to allow or block notifications from this site. Once the user has made a choice, the setting will be saved for the current session.

If the user has already denied the request for showing notifications, we can not do anything. The browser will ignore any request to display a notification or request permission again.

if (!window.Notification) {
  console.log('Browser does not support notifications.')
} else {
  // check if permission is already granted
  if (Notification.permission === 'granted') {
    // show notification here
  } else {
    // request permission from the user
    Notification.requestPermission()
      .then(function (p) {
        if (p === 'granted') {
          // show notification here
        } else {
          console.log('User blocked notifications.')
        }
      })
      .catch(function (err) {
        console.error(err)
      })
  }
}

The requestPermission() method returns a promise. The callback function will be called once the promise is resolved or rejected (upon user choice of notifications).

Showing Notification

If the user has chosen to accept notifications from our site, you can create a new desktop notification using the Notification() constructor to display to the user. Just pass a title to the constructor to create a new notification.

const notify = new Notification('Hi there!')

Optionally, you can also pass an options object to specify text direction, body text, an icon to display, notification sound to play, and more.

const notify = new Notification('Hi there!', {
  body: 'How are you doing?',
  icon: 'https://bit.ly/2DYqRrh'
})

Putting everything all together, we can create a function that will show a desktop notification once called, requesting permission if not already granted:

const notifyMe = () => {
  if (!window.Notification) {
    console.log('Browser does not support notifications.')
  } else {
    // check if permission is already granted
    if (Notification.permission === 'granted') {
      // show notification here
      const notify = new Notification('Hi there!', {
        body: 'How are you doing?',
        icon: 'https://bit.ly/2DYqRrh'
      })
    } else {
      // request permission from the user
      Notification.requestPermission()
        .then(function (p) {
          if (p === 'granted') {
            // show notification here
            const notify = new Notification('Hi there!', {
              body: 'How are you doing?',
              icon: 'https://bit.ly/2DYqRrh'
            })
          } else {
            console.log('User has blocked notifications.')
          }
        })
        .catch(function (err) {
          console.error(err)
        })
    }
  }
}

Now we can call the above function when the user clicks a button:

<button onclick='notifyMe()'>Notify Me</button>

Alternatively, you can attach the above function to the body's onload event, which will be called once the web page is completely loaded:

<!DOCTYPE html>
<html>
<body onload='notifyMe()'>
<!- body content->
</body>
</html>

if (!window.Notification) {
  console.log('Browser does not support notifications.')
} else {
  // display message here
}

if (!window.Notification) {
  console.log('Browser does not support notifications.')
} else {
  // check if permission is already granted
  if (Notification.permission === 'granted') {
    // show notification here
  } else {
    // request permission from the user
    Notification.requestPermission()
      .then(function (p) {
        if (p === 'granted') {
          // show notification here
        } else {
          console.log('User blocked notifications.')
        }
      })
      .catch(function (err) {
        console.error(err)
      })
  }
}

const notify = new Notification('Hi there!')

const notify = new Notification('Hi there!', {
  body: 'How are you doing?',
  icon: 'https://bit.ly/2DYqRrh'
})

const notifyMe = () => {
  if (!window.Notification) {
    console.log('Browser does not support notifications.')
  } else {
    // check if permission is already granted
    if (Notification.permission === 'granted') {
      // show notification here
      const notify = new Notification('Hi there!', {
        body: 'How are you doing?',
        icon: 'https://bit.ly/2DYqRrh'
      })
    } else {
      // request permission from the user
      Notification.requestPermission()
        .then(function (p) {
          if (p === 'granted') {
            // show notification here
            const notify = new Notification('Hi there!', {
              body: 'How are you doing?',
              icon: 'https://bit.ly/2DYqRrh'
            })
          } else {
            console.log('User has blocked notifications.')
          }
        })
        .catch(function (err) {
          console.error(err)
        })
    }
  }
}

<button onclick='notifyMe()'>Notify Me</button>

<!DOCTYPE html>
<html>
<body onload='notifyMe()'>
<!- body content->
</body>
</html>

See recent articles by JS Nooby

FEATURED

How to Insert an element before another DOM element with JavaScript

Insert an element before another DOM element with JavaScript

FEATURED

How to trigger built-in and custom events using JavaScript

Triggering built-in and custom events using JavaScript

FEATURED

How to remove an event handler in JavaScript

How to remove an event handler in JavaScript

FEATURED

Introduction to Service Workers in JavaScript

Introduction to Service Workers in JavaScript

FEATURED

How to use object & array destructuring in JavaScript

How to use object & array destructuring in JavaScript

FEATURED

How to check if an object is an array in JavaScript

How to check if an object is an array in JavaScript