DEV Community


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!


Create an index.html file with the following content.

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

    <script src=""></script>
    <script src="script.js"></script>

    <title>Simple Chrome Desktop Notification</title>

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


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.');

    if (Notification.permission !== 'granted') {

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

      notification.onclick = function () {'');

  $('#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)

jairneto1 profile image
Jair Neto

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

richardwynn profile image
Richard Wynn Author

You're welcome, Jair Neto πŸ˜ƒ