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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
openWindow

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.