DEV Community

Richard Wynn
Richard Wynn

Posted on

Create Chrome Desktop Notfications with JavaScript in 100 seconds

In this article, I will show you steps to create a simple Chrome Desktop Notification looked like the image below by using JavaScript just in 100 seconds ⏰ Let's count down!
Alt Text

πŸ“‚ Repository

πŸ”§ Necessary Stuffs

πŸ’» It's Coding Time!

index.html

Create an index.html file with the following content.

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>

    <title>Simple Chrome Desktop Notification</title>
  </head>

  <body>
    <button id="btn-show-notification">Notify Me!</button>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

script.js

Next, create a script.js file inside the same folder with the index.html file above:

$(document).ready(function () {
  $(document).on('DOMContentLoaded', function () {
    // Request desktop notifications permission on page load

    if (!Notification) {
      console.log('Desktop notifications are not available in your browser.');
      return;
    }

    if (Notification.permission !== 'granted') {
      Notification.requestPermission();
    }
  });

  function showNotification() {
    if (Notification.permission !== 'granted') {
      Notification.requestPermission();
    } else {
      const options = {
        body: 'Simple Chrome Desktop Notification',
        dir: 'ltr',
        image: 'image.jpg'
      };
      const notification = new Notification('Notification', options);

      notification.onclick = function () {
        window.open('https://www.google.com');
      };
    }
  }

  $('#btn-show-notification').on('click', showNotification);
});
Enter fullscreen mode Exit fullscreen mode

It's Running Time!

In Visual Studio Code, go to View -> Command Palette... and type Live Server: Open with Live Server then press Enter, a new page will be shown:
Alt Text

Click on Notify Me! and hurray, a notification appears:
Alt Text

Just simple as it is πŸ˜‰ Hope this will help in case you need to use desktop notifications for your website(s).

πŸ“± Keep in Touch

If you like this article, don't forget to follow and stay in touch with my latest ones in the future by following me via:

Top comments (3)

Collapse
 
aledc7 profile image
Alejandro De Castro

Thanks a lot!

Collapse
 
jairneto1 profile image
Jair Neto

Thank you Richard, as a beginner I think it’ll be very helpful for me. 😊

Collapse
 
richardwynn profile image
Richard Wynn

You're welcome, Jair Neto πŸ˜ƒ