客户端:openWindow() 方法

注意:此功能仅在 Service Workers 中可用。

openWindow() 方法是 Clients 接口的方法,它创建一个新的顶级浏览上下文并加载给定的 URL。如果调用脚本没有权限显示弹出窗口,openWindow() 将抛出 InvalidAccessError

在 Firefox 中,该方法仅在作为通知点击事件的结果被调用时才允许显示弹出窗口。

在 Chrome for Android 中,该方法可能会在由 独立 Web 应用程序 提供的现有浏览上下文中打开 URL,该应用程序以前已添加到用户的主屏幕中。最近,这也在 Chrome for Windows 上运行。

语法

js
openWindow(url)

参数

url

一个表示您要打开窗口的客户端 URL 的字符串。通常,此值必须与调用脚本相同的来源的 URL。

返回值

一个 Promise,如果 URL 与服务工作者相同的来源,则解析为 WindowClient 对象,否则解析为 null 值

异常

InvalidAccessError DOMException

如果应用程序来源中的任何窗口都没有 短暂激活,则此异常将拒绝 promise。

安全要求

  • 应用程序来源中的至少一个窗口必须具有 短暂激活

示例

js
// Send notification to OS if applicable
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,
  );
}

// Notification click event listener
self.addEventListener("notificationclick", (e) => {
  // Close the notification popout
  e.notification.close();
  // Get all the Window clients
  e.waitUntil(
    clients.matchAll({ type: "window" }).then((clientsArr) => {
      // If a Window tab matching the targeted URL already exists, focus that;
      const hadWindowToFocus = clientsArr.some((windowClient) =>
        windowClient.url === e.notification.data.url
          ? (windowClient.focus(), true)
          : false,
      );
      // Otherwise, open a new tab to the applicable URL and focus it.
      if (!hadWindowToFocus)
        clients
          .openWindow(e.notification.data.url)
          .then((windowClient) => (windowClient ? windowClient.focus() : null));
    }),
  );
});

规范

规范
Service Workers
# clients-openwindow

浏览器兼容性

BCD 表仅在浏览器中加载