[Question]: How to prevent web notifications from showing when tab is being viewed

[thatop007]

How can we help?

We currently able to receive web desktop notifications successfully and would like to know if it is possible and how to prevent web notifications from showing when the tab being viewed by the user is our site.

here is our current implementation in our react web app, in particular our attempt to not show the notification if the user is currently looking at our site.

  useEffect(() => {
    function foregroundWillDisplayListener (event) {
      console.log(event);
      //dont show notification if tab is currently being viewed
      if (document.visibilityState === 'visible') {
        return event.preventDefault();
        
      }
    }
        OneSignalDeferred.push(function () {
      OneSignal.Notifications.addEventListener("foregroundWillDisplay", foregroundWillDisplayListener);

    });

  }, []);

looking at foregroundWillDisplayListener event param I saw there are 2 params:

• notification
• preventDefault - when call the prevent default function we are getting this error:

Error: Browser does not support preventing display.
    at Object.preventDefault (ServiceWorkerManager.js:168:27)

your time and assistance is highly appreciated.

Also apologies, this is duplicate ticket of #1676 on your react-native project, just realised this might be the right place to ask, thanks again.

[jkasten2]

@thatop007 Thanks for reporting this issue!

At the time it wasn't clear if browsers could support this preventDefault() behavior when the site is in infocus / foregrounded. It seems it does, but we need to confirm and implement this in the SDK yet:

• userVisibleOnly should be standardized to match browser behaviour w3c/push-api#313 (comment)
• https://web.dev/articles/push-notifications-common-notification-patterns

[aditya-joshi-deltagen]

@jkasten2
This issue can be addressed by allowing developers to provide a simple callback to intercept notifications. For instance, if we want to suppress notifications while the user is actively on the page, we can use the callback to check the app state and call preventDefault() to block the notification dynamically.

If there’s a better approach to achieve this, or if it’s possible to directly save and edit the service worker file to include custom logic, I’d appreciate any guidance on that! , let me know if you accept PRs.

I am blocked by the same issue.