How to Implement Push Notifications Using JavaScript

1. Selecting the Button Element

const notifyBtn = document.querySelector("#notify"); 

• Selects the button with the id="notify" from the DOM.
• Stores it in the variable notifyBtn.

2. Notification and Interval Variables

let interval; let notification; 

• interval: Stores the ID of the interval function (used for clearing the interval later).
• notification: Stores the latest notification instance.

3. Click Event Listener on Button

notifyBtn.addEventListener("click", () => { Notification.requestPermission().then((permission) => { if (permission == "granted") { notification = new Notification("Example", { body: "This is more text for example" + Math.random(), icon: "icon.png", tag: "Example", }); notification.addEventListener("error", (e) => { console.error(); }); } }); }); 

Explanation:

• When the button is clicked:
  • Notification.requestPermission() asks for permission to display notifications.
  • If the user grants permission (granted), a new notification is created:
  • Title: "Example"
  • Body: "This is more text for example" + random number.
  • Icon: "icon.png"
  • Tag: "Example" (helps to prevent duplicate notifications)
• Listens for error events on the notification and logs them.

4. Handling Page Visibility Changes

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

Explanation:

• visibilitychange event fires when the user switches tabs or minimizes the browser.
• If the page is hidden:
  • Stores the time when the user left (leaveDate).
  • Starts an interval that creates a new notification every 100ms.
  • Notification says how long the user has been away in seconds.
• If the page becomes visible again:
  • Stops the interval using clearInterval(interval).
  • Closes any active notification.

Summary of APIs Used

Possible Improvements

• Prevent Spamming: The interval runs every 100ms, which is too frequent. Increase the delay to something like 5000 (5 seconds).
• Check for Notification Support:

 if (!("Notification" in window)) { alert("This browser does not support notifications."); } 

• Improve Error Logging:

 notification.addEventListener("error", (e) => { console.error("Notification error:", e); });