Push Notifications Request for edge

Question

For a client project, I recently implemented a feature that enables push notifiactions for users. For this I use push.js. During development I noticed that the Notifications Allow prompt appears automatically on Chrome, on Firefox a workaround was needed (a click listener was registered on the page which makes the notification prompt appear on the first click). Only for Edge I could not find a way, because Edge blocks all notifications by default. Now I came across the following page https://www.pushengage.com/. If you scroll down to "See a Live Push Notification Example" and click on one of the buttons, a accept notification prompt also appears in Edge. Can anyone help me how to achieve this in my application as well? Apparently it is possible somehow.

Here is a minifed version of my application (the push notifications part).

import Push from 'push.js';

init() {
     document.addEventListener('click', () => {  // cause of some browser specific behaviour add click listener to trigger the permissions request (e.g. for firefox)
        if (Push.Permission.get() === 'default' && this.isInitial) {
          Push.Permission.request();
        }
      });

const onGranted = (function onGranted() {
      Push.create("My Notification", {
      body: 'Some text',
      icon: someIcon,
      link: someUrl,
      vibrate: [200, 100],
       });
      }
    }).bind(this);
    Push.Permission.request(onGranted, onDenied);
}

Answer 1

I researched official docs and I found that the showing of permission prompt in Edge is determined by a score system. You can refer to How it works paragraph in this doc for more information:

To achieve balance presenting the full prompt and quiet requests, we introduced a score system.

As our score system represents the level of annoyance of the full prompt, “Block” yields a higher score indicating a strong negative signal, “Ignore” and “Dismiss” influence the scores as a weak negative signal, and “Allow” yields the lowest score indicating a strong positive signal. Based on the collective score of users, we provide quiet requests to the websites whose scores are higher than the threshold.

The permission prompt behavior in Edge is controlled by the score instead of code. https://www.pushengage.com/ shows permission prompt just because it gets the score to show the full prompt in Edge score system.

Answer 2

you can use a combination of the Push API and a service worker. This allows you to handle push notifications in a more consistent way across different browsers, including Edge.

• Register a service worker: Create a service worker file (e.g., sw.js) at the root of your application and register it in your main JavaScript file. The service worker will handle the push notification events and allow notifications to be displayed even when the application is not open.

In your main JavaScript file:

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
   .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
      .catch(function(error) {
     console.error('Service Worker registration failed:', error);
    });
  }

• Implement the service worker logic: In your sw.js file, you need to listen for the push event and display notifications when it's triggered.

  self.addEventListener('push', function(event) {
   const payload = event.data ? event.data.json() : 'My Notification';
  
   event.waitUntil(
     self.registration.showNotification(payload.title, {
     body: payload.body,
     icon: payload.icon,
     vibrate: payload.vibrate,
     data: payload.link
    })
   );
  });
  

• Modify your application to trigger push notifications: In your main application JavaScript, modify the init() function to send a push notification request to the service worker.

    init() {
       if (Push.Permission.get() === 'granted') {
       Push.create("My Notification", {
         body: 'Some text',
         icon: someIcon,
         vibrate: [200, 100],
         data: someUrl
       });
     } 
   else if (Push.Permission.get() === 'default') {
       // Request permission for push notifications
       Push.Permission.request();
     }
   }
  

Then Configure push notification subscription.Remember that push notifications have additional requirements when it comes to server-side setup and security considerations.