DEV Community

loading...

Create Chrome Desktop Notfications with JavaScript in 100 seconds

Richard Wynn
πŸ‘‹ Hi, I'm Richard Wynn, a Senior Full-stack Software Engineer with a joy of Coding, Writing and Sharing knowledge
・2 min read

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:

Discussion (2)

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 Author

You're welcome, Jair Neto πŸ˜ƒ