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

Чтобы открыть новую вкладку браузера через клик по push-уведомлению, если сайт уже открыт, вам необходимо использовать JavaScript и API уведомлений браузера.

Следующий код позволит открыть новую вкладку в браузере при клике на push-уведомление:

self.addEventListener('notificationclick', function(event) {
  event.notification.close();  // закрыть уведомление
  
  var url = 'https://example.com';  // URL вашего сайта

  event.waitUntil(
    clients.matchAll({  // проверить, открыт ли сайт уже во вкладке
      type: 'window'
    })
    .then(function(windowClients) {
      if (windowClients.length > 0) {  // если сайт уже открыт
        for (var i = 0; i < windowClients.length; i++) {
          var client = windowClients[i];
          if (client.url === url && 'focus' in client) {  // проверить URL и наличие фокуса
            return client.focus();  // если уже открыт, то активировать его
          }
        }
      }

      // если сайт не открыт, или нет активной вкладки с нужным URL
      // открыть новую вкладку
      if (clients.openWindow) {
        return clients.openWindow(url);
      }
    })
  );
});

Вы можете добавить этот код в ваш файл сервис-воркера для обработки события клика по push-уведомлению. Это событие возникает при клике пользователя на уведомление в браузере.

В ответ на это событие скрипт закрывает уведомление event.notification.close(), затем производится проверка, открыт ли уже сайт в одной из вкладок браузера с помощью метода clients.matchAll(). Если сайт уже открыт в одной из вкладок, активируется эта вкладка с помощью метода client.focus(). Если сайт не открыт или нет активной вкладки с нужным URL, скрипт открывает новую вкладку с помощью метода clients.openWindow().

Обратите внимание, что это пример кода для использования в сервис-воркере и будет работать только в тех браузерах, которые поддерживают Service Worker API. Например, Google Chrome, Mozilla Firefox и Microsoft Edge поддерживают Service Worker API.

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

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
  .then(function(registration) {
    console.log('Service Worker зарегистрирован:', registration);
  })
  .catch(function(error) {
    console.log('Ошибка при регистрации Service Worker:', error);
  });
}

Замените путь /service-worker.js на путь к вашему файлу сервис-воркера, и поместите этот код в конце вашей веб-страницы перед закрывающим тегом </body>.