如何增加“chrome 推送通知”的可见时间？

Posted 2023-02-24

【中文标题】如何增加“chrome 推送通知”的可见时间？

【英文标题】：how to increase 'chrome push notification' visibility time?

【发布时间】：2016-02-29 08:40:34

【问题描述】：

我想向用户显示我的通知，直到我希望它默认显示长达 19 秒。有人可以告诉我有关这方面的任何技巧吗？

我也尝试一次又一次地更新以保持它显示但没有成功，实际上没有合适的语法来做到这一点。 目前我正在使用下面的代码来注册服务人员。 通过这段代码，我可以显示大约 19 秒的通知，但我想显示 1 分钟。

 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`
    )
  );
);

【参考方案1】：

目前还没有设置通知超时的参数。默认情况下，通知将显示 20 秒，然后桌面版 Chrome 将自动最小化通知。

另外，选项中有一个参数requireInteraction，默认为false。通过启用此true 将使通知保持可见，直到用户与之交互。

【参考方案2】：

我认为你不能直接设置通知应该显示多长时间。

一种可能的 hacky 方式是，一旦浏览器支持persistent 通知（我不知道 Chrome 或 Firefox 目前是否支持），显示持久通知，然后在超时后关闭它。

【参考方案3】：

按照 Marco 所说的 hacky 方式，它有效！

                "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",
            

并在 onMessage 上设置 requireInterationTrue ，在显示推送通知后从数据中获取持续时间并在 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();
            
        
    );