Как открыть новую вкладку в браузере, когда сайт уже открыт, с помощью клика по push-уведомлению?

Question

NebulaDrifter

javascript , firebase , push-технологии

Как открыть новую вкладку в браузере, когда сайт уже открыт, с помощью клика по push-уведомлению?

Как обеспечить открытие новой вкладки браузера при клике на push-уведомление, даже если сайт уже открыт в браузере? В настоящее время, при клике на push-уведомление, браузер просто делает уже открытую вкладку активной.

Привет! Я хотел бы получить вашу помощь в решении следующей задачи: Как можно сделать так, чтобы при клике на push-уведомление, даже если сайт уже открыт в браузере, открывалась новая вкладка с указанным в уведомлении доменом? В настоящее время, если пользователь кликает на push-уведомление, браузер просто переносит его на уже открытую вкладку с другим доменом. Каким образом можно изменить это поведение, чтобы, при клике на push-уведомление, всегда открывалась новая вкладка?

Заранее спасибо за вашу помощь!

Примечание: В предоставленном коде используется firebase-messaging-sw.js в обработчике push-уведомлений. Уведомление закрывается после клика и ссылка на открытие указывается в `event.notification.data.url`.

13 февраля 2024 г. 12:38

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для того чтобы открыть новую вкладку в браузере при клике на push-уведомление, можно воспользоваться следующим кодом:

```javascript
self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  
  var url = event.notification.data.url;
  
  event.waitUntil(
    clients.matchAll({
      type: 'window',
      includeUncontrolled: true
    })
    .then(function(windowClients) {
      // Проверяем, открыта ли вкладка с указанным доменом
      for (var i = 0; i < windowClients.length; i++) {
        var client = windowClients[i];
        if (client.url === url && 'focus' in client) {
          return client.focus();
        }
      }
      
      // Если вкладка с указанным доменом не открыта, то открываем новую вкладку
      if (clients.openWindow) {
        return clients.openWindow(url);
      }
    })
  );
});
```

В этом коде мы добавляем обработчик события 'notificationclick', который выполняется при клике на push-уведомление. Внутри обработчика мы закрываем уведомление, получаем URL для открытия из атрибута `event.notification.data.url` и проверяем, открыта ли уже вкладка с таким же URL. Если вкладка уже открыта, мы активируем её, иначе мы открываем новую вкладку с указанным URL.

Надеюсь, это поможет вам решить вашу задачу!

Answer 2

Проблема заключается в том, что clients.openWindow(url); не открывает новую вкладку, если вкладка с таким URL уже открыта. Вместо этого он просто переходит на существующую вкладку с этим URL. 
 
 Для открытия новой вкладки даже в случае, если сайт уже открыт в браузере, вам нужно использовать window.open(url, '_blank');. Вот как это можно сделать в вашем коде: 
 self.addEventListener('notificationclick', function(event) {
    event.notification.close()
    const url = event.notification.data.url
    if (url) {
        window.open(url, '_blank');
    }
}, false);