How to prevent the browser notifications from automatically closing? Is there any way to increase the amount of time the notifications are displayed in foreground to the user?
Web push notifications are usually dismissed from the screen and moved to the notification center after a few seconds (e.g. 5 - 20 seconds), but there is an option to change that.
The option is called requireInteraction:
serviceWorkerRegistration.showNotification(title, { requireInteraction: true });
If you enable this option (true) when you show a notification, the notification should remain active until the user clicks or dismisses it. Otherwise if the option is not set (false) the browser will auto-minimize the notification after some seconds.
You can also read the official definition of this option:
A notification has an associated require interaction preference boolean, which is initially false. When true, indicates that on devices with a sufficiently large screen, the notification should remain readily available until the user activates or dismisses the notification.
If you use Pushpad for sending the notifications, you can set this option globally for all the notifications in project settings or you can set this option when you send a notification (manually or using the API).
Usually we recommend to enable this option to give more visibility to your notifications.
Note that requireInteraction, at the moment, is supported only by some browsers: in particular it is supported by Chrome on desktop and by most Chromium-based browsers on desktop.