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 /. 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);
}

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./. 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);
}

• javascript
• push-notification
• microsoft-edge

• You can refer to the official doc for web push notification in Edge. It uses Push API. You can try the GitHub demo in it. – Yu Zhou Commented Jul 13, 2023 at 9:25
• Hi, so the Push API ist the only possible solution to achieve this "Accept Notifications" Promt on Edge? It needs a service-worker and a server if i have understood it correctly. I guess it will be hard to implement it into my existing application (due its architecture) – Alex Commented Jul 13, 2023 at 15:19
• Edit: testet alot of existing projects which uses a server and a service-worker. None of these opened the permission prompt for edge. – Alex Commented Jul 14, 2023 at 11:17

3 Answers 3

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./ shows permission prompt just because it gets the score to show the full prompt in Edge score system.

you can use a bination 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 es to server-side setup and security considerations.

Try this :

// Remove the import statement for push.js since you won't be using it directly anymore

init() {
  // No need to add a click listener anymore; we'll let PushEngage handle this internally

  // Replace this section with the PushEngage initialization code
  const pushEngage = PushEngage();
  pushEngage.initialize({
    key: 'YOUR_PUSHENGAGE_API_KEY',
    // Add other options and configurations as needed
  });

  // Your other code remains unchanged
  const onGranted = (function onGranted() {
    pushEngage.create({
      title: "My Notification",
      message: "Some text",
      icon: someIcon,
      url: someUrl,
      vibration: [200, 100],
    });
  }).bind(this);
  pushEngage.requestPermission(onGranted, onDenied);
}