Clients.openWindow()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

Метод openWindow() интерфейса Clients создаёт новый контекст просмотра верхнего уровня и загружает заданный URL. Если вызывающий скрипт не имеет разрешения на отображение всплывающих окон, openWindow() выдаст InvalidAccessError.

В Firefox этому методу разрешено отображать всплывающие окна только при вызове события клике по уведомлению.

В Chrome для Android этот метод может открыть URL-адрес в существующем контексте просмотра, предоставляемым автономным веб-приложением (standalone web app), ранее добавленным на главный экран пользователя. С недавнего времени это также работает в Chrome для Windows.

Синтаксис

self.clients.openWindow(url).then(function(windowClient) {
  // Do something with your WindowClient
});

Параметры

url

USVString - URL-адрес клиента, который вы хотите открыть. Обычно это значение должно быть URL из того же источника, что и вызывающий скрипт.

Возвращаемое значение

Promise, который преобразуется в объект WindowClient, если URL-адрес исходит из того же источника, что и сервис-воркер, иначе null value .

Примеры

js
// Отправить уведомление в OS, если возможно
if (self.Notification.permission === "granted") {
  const notificationObject = {
    body: "Click here to view your messages.",
    data: { url: self.location.origin + "/some/path" },
    // data: { url: 'http://example.com' },
  };
  self.registration.showNotification(
    "You've got messages!",
    notificationObject,
  );
}

// Обработчик события клика по уведомлению
self.addEventListener("notificationclick", (e) => {
  // Закрываем всплывающее окно с уведомлением
  e.notification.close();
  // Получите все клиенты Windows
  e.waitUntil(
    clients.matchAll({ type: "window" }).then((clientsArr) => {
      // Если вкладка, соответствующая целевому URL-адресу, уже существует, сфокусируйтесь на ней;
      const hadWindowToFocus = clientsArr.some((windowClient) =>
        windowClient.url === e.notification.data.url
          ? (windowClient.focus(), true)
          : false,
      );
      // В противном случае откройте новую вкладку для соответствующего URL-адреса и сфокусируйте её.
      if (!hadWindowToFocus)
        clients
          .openWindow(e.notification.data.url)
          .then((windowClient) => (windowClient ? windowClient.focus() : null));
    }),
  );
});

Спецификации

Specification
Service Workers
# clients-openwindow

Совместимость с браузерами