OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Javascript Notification show as 'pop-up'

  • Thread starter Thread starter ward
  • Start date Start date
W

ward

Guest
Currently, I am working on a PWA.

I would like to implement a push notification system, luckily the browser exposes the Push API. I got this part working so far, I can receive the push event in the Service Worker.

But when displaying a notification, the notification is received 'silently' in the background.

What i wish that happened: Image of pop up notification

But this 'pop-up' style message is disabled by default when the PWA is installed (at least, I think so). The default behaviour causes the notification to only shop op in the notification tray, without ever showing above popup.

When I go the the settings of the PWA's notifications, there is an option to enable pop-up notifications: 'Show as pop-up' Notification settings When i enable this options, i get the desired result. However i wish this to be de thefault behaviour, and not have to tell every user of the web app to change the settings on their device.

My used code for the Notification from within my push event listener in the service worker.

Code:
 self.registration.showNotification('New message', {
    body: payload,
 });

Testing on Samsung Galaxy S22 with Chrome as the (default) browser.

Does anyone know why this is the default behaviour and if there is a fix for this?

Thanks in advance

<p>Currently, I am working on a PWA.</p>
<p>I would like to implement a push notification system, luckily the browser exposes the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API" rel="nofollow noreferrer">Push API</a>. I got this part working so far, I can receive the push event in the Service Worker.</p>
<p>But when displaying a notification, the notification is received 'silently' in the background.</p>
<p>What i wish that happened:
<a href="https://i.sstatic.net/6fCC1.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/6fCC1.jpg" alt="Image of pop up notification" /></a></p>
<p>But this 'pop-up' style message is disabled by default when the PWA is installed (at least, I think so). The default behaviour causes the notification to only shop op in the notification tray, without ever showing above popup.</p>
<p>When I go the the settings of the PWA's notifications, there is an option to enable pop-up notifications: 'Show as pop-up'
<a href="https://i.sstatic.net/MbWg0.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/MbWg0.jpg" alt="Notification settings" /></a>
When i enable this options, i get the desired result. However i wish this to be de thefault behaviour, and not have to tell every user of the web app to change the settings on their device.</p>
<p>My used code for the Notification from within my push event listener in the service worker.</p>
<pre><code> self.registration.showNotification('New message', {
body: payload,
});
</code></pre>
<p>Testing on Samsung Galaxy S22 with Chrome as the (default) browser.</p>
<p>Does anyone know why this is the default behaviour and if there is a fix for this?</p>
<p>Thanks in advance</p>
 

Latest posts

Top