const button = document.getElementsByClassName("btn");
button.addEventListener("click", () => {
  Notification.requestPermission().then((res) => {
    if (res == "granted") {
      alert(res);
    }
  });
});

function notify() {
  Notification.requestPermission().then((res) => {
    if (res === "granted") {
      const notification = new Notification("example notification", {
        body: "this is description",
        data: { hello: "Sss" },
        icon: "your logo path", // it display icon in notification
        tag: "something..", // if you have more notification, it will display only one recent notification.
      });
      notification.addEventListener("click", (e) => {
        console.log(e);
      });
      notification.addEventListener("error", (e) => {
        console.log(e);
      });
    }
  });
}

Send a notification when the user is inactive(another application):

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    new Notification("came back please", {
      body: "please",
      tag: "come back",
    });
  }
});

Hide the notification when the user returns back to the application:

let notification;

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    notification = new Notification("came back please", {
      body: "please",
      tag: "come back",
    });
  } else {
	    notification.close();
  }
});

Add Timer:

let notification;
let interval;

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    const leaveDate = new Date();
    interval = setInterval(() => {
      notification = new Notification("came back please", {
        body: `you have been gone for ${Math.round(
          (new Date() - leaveDate) / 1000
        )} seconds`,
        tag: "come back",
      });
    }, 100);
  } else {
	    if (!interval) clearInterval(interval);
	    if (!notification) notification.close();
  }
});