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: