How to add push notification without plugin

Dynamic Push Notification Demo

How to use push notification function without any plugin-

This is a javascript function - Just copy and past it in your js file

You need to replace this - notifications - Array -
Where you can addd your post's
"title" - in title and some contect in "body" and you can add a thumbnail
In "image" and You can also set redirection on click in - "URL".
Here set Your post url -
For live demo click on 'Start Notifications'

  
<h1>Dynamic Push Notification Demo</h1>
<button onclick="startNotifications()">Start Notifications</button>

<script>
  
  function startNotifications() {
  var notifications = [
    { title: "New Message", body: "You have a new message from John Doe.", image: "https://cdn.pixabay.com/photo/2022/09/20/22/58/sand-7468945_1280.jpg", url: "https://example.com/message" },
    { title: "New Post", body: "Check out the latest post on our website!", image: "https://cdn.pixabay.com/photo/2022/10/13/15/58/flower-6669322_1280.jpg", url: "https://example.com/post" },
    { title: "Reminder", body: "Don't forget about your appointment tomorrow.", image: "https://cdn.pixabay.com/photo/2021/03/24/13/23/studio-6112495_1280.jpg", url: "https://example.com/appointment" }
  ];

  var index = 0;
  var intervalId = setInterval(function() {
    if (index < notifications.length) {
      showNotification(notifications[index]);
      index++;
    } else {
      clearInterval(intervalId);
    }
  }, 10000); // Show notifications every 10 seconds
}

function showNotification(notificationData) {
  if ('Notification' in window && Notification.permission === 'granted') {
    var notificationOptions = {
      body: notificationData.body,
      icon: "https://cdn.pixabay.com/photo/2024/04/02/09/45/ai-generated-8670471_1280.png", // Default icon URL
      image: notificationData.image,
      badge: "https://via.placeholder.com/30",
      vibrate: [200, 100, 200],
      tag: "notification-tag",
      renotify: true
    };

    var notification = new Notification(notificationData.title, notificationOptions);
    notification.onclick = function() {
      console.log("Notification clicked");
      window.open(notificationData.url);
    };
  }
}

Notification.requestPermission().then(function(permission) {
  if (permission !== 'granted') {
    console.log('Notification permission denied');
  }
});
</script>