Create Chrome Desktop Notfications with JavaScript in 100 seconds

#tutorial #notification #javascript #webdev

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!

📂 Repository

You can download the source code of this article on my Github: https://github.com/richard-wynn/simple-chrome-desktop-notifications

🔧 Necessary Stuffs

Visual Studio Code with Live Server extension installed
Google Chrome, of course 😁

💻 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>

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);
});

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:

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

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:

Twitter: https://twitter.com/RichardWynn01
Medium: https://richard-wynn.medium.com
Github: https://github.com/richard-wynn

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →