how to increase 'chrome push notification' visibility time?

Question

I want to show my notification to the user till i desired by default it is shown up to 19 sec approx. can somebody tell me about any trick regarding this?

i also tried to update again and again to keep it showing but not succeed, actually not got appropriate syntax for doing that. currently i am using below code to register service worker. by this code i am able show notification for 19 sec approx, but i want to show it for 1 min.

 var url = "https://example.com/json-data.php?param="+Math.random();
 self.addEventListener('push', function(event) {    
  event.waitUntil(  
    fetch(url).then(function(response) {  
      if (response.status !== 200) {  
        // Either show a message to the user explaining the error  
        // or enter a generic message and handle the
        // onnotificationclick event to direct the user to a web page  
        console.log('Looks like there was a problem. Status Code: ' + response.status);  
        throw new Error();  
      }

      // Examine the text in the response  
      return response.json().then(function(data) {  
        if (data.error || !data.notification) {  
          console.log('The API returned an error.', data.error);  
          throw new Error();  
        }  
        var title = data.notification.title;  
        var message = data.notification.message;  
        var icon = data.notification.icon;  

        return self.registration.showNotification(title, {  
          body: message,  
          icon: icon,  
          data: {
            url: data.notification.url
          }  
        });  
      });  
    }).catch(function(err) {  
      console.log('Unable to retrieve data', err);

      var title = 'An error occurred';
      var message = 'We were unable to get the information for this push message';  
      var icon = 'img/design19.jpg';  
      var notificationTag = 'notification-error';  
      return self.registration.showNotification(title, {  
          body: message,  
          icon: icon,  
          tag: notificationTag  
        });  
    })  
  );  
});

// The user has clicked on the notification ...
self.addEventListener('notificationclick', function(event) {  
  console.log(event.notification.data.url);
  // Android doesn't close the notification when you click on it  
  // See: http://crbug.com/463146  
  event.notification.close();

  // This looks to see if the current is already open and  
  // focuses if it is  
  event.waitUntil(
    clients.matchAll({  
      type: "window"  
    })
    .then(function(clientList) {  
      for (var i = 0; i < clientList.length; i++) {  
        var client = clientList[i];  
        if (client.url == '/' && 'focus' in client)  
          return client.focus();  
      }  
      if (clients.openWindow) {
        return clients.openWind`enter code here`ow(event.notification.data.url);  
      }`enter code here`
    })
  );
});

Answer 1

There is no parameter as of now on setting the timeout for the notification. It is by default that the notification will show for 20 seconds then the desktop version of Chrome will auto-minimize the notification.

Alternatively, there is a parameter in the options requireInteraction which is false by default. By enabling this to true will make the notification stay visible until the user has interacted with it.

Answer 2

I think you can't directly set how long a notification should be shown.

A possible hacky way to do it would be, once browsers will support persistent notifications (I don't know if Chrome or Firefox do at the moment), to show a persistent notification and then close it after a timeout.

Answer 3

According to hacky way Marco said, It Works!

                "notification" => [
                    "title"                 => isset($arrData['title']) ? $arrData['title'] : '',
                    "body"                  => isset($arrData['description']) ? $arrData['description'] : '',
                    "icon"                  => s3_url("images/push-logo.jpg"),
                    "click_action"          => isset($arrData['target_url']) ? $arrData['target_url'] : '',
                    "image"                 => isset($arrData['image']) ? $arrData['image'] : '',
                ],
                "data" => [
                    "requireInteraction"    => true,
                    "duration"              => (20 * 1000), // 20 sec
                ],
                "to"    => "/topics/$topic",
            

And set the requireInterationTrue on onMessage, after push notification is shown take duration from data and close notification inside a setTimeout

messaging.onMessage(function(payload) {
        console.log('Message received. ', payload.data);
        const noteTitle = payload.notification.title;
        const noteRequireInteraction = (payload.data.requireInteraction === 'true');
        const noteDuration = payload.data.duration;
        const noteOptions = {
            body: payload.notification.body,
            icon: payload.notification.icon,
            image: payload.notification.image,
            requireInteraction: noteRequireInteraction,
        };
        if (!document.hidden) {
            var notification = new Notification(noteTitle, noteOptions);

            setTimeout(function () {
                notification.close(); 
            }, noteDuration);

            notification.onclick = function(event) {
                event.preventDefault();
                if(typeof payload.notification.click_action != 'undefined' && payload.notification.click_action != '')
                    window.open(payload.notification.click_action,'_blank');
                notification.close();
            }
        }
    });