How and what to use to push notification in front-end without reloading

Question

i have a program in python that inserts data into database(xampp), i want to listen to any changes in the database and receive a request to frontend without using any click event. Something like ajax but only listen and notifies, and will automatically push notifies in front-end.

Answer 1

Use Javascript serviceworkers Check this out

e.g

  self.addEventListener('push', function(event) {
  console.log('[Service Worker] Push Received.');
  console.log(`[Service Worker] Push had this data: 
  "${event.data.text()}"`);

  const title = 'Push Codelab';
  const options = {
    body: 'Yay it works.',
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

but you have to register the service worker first e.g

if ('serviceWorker' in navigator && 'PushManager' in window) {
  console.log('Service Worker and Push is supported');

  navigator.serviceWorker.register('sw.js')
  .then(function(swReg) {
     console.log('Service Worker is registered', swReg);

     swRegistration = swReg;
  })
  .catch(function(error) {
     console.error('Service Worker Error', error);
  });
} else {
  console.warn('Push messaging is not supported');
}