Clients.openWindow()

Clients インターフェイスの openWindow() メソッドは、新しい最上位の閲覧コンテキストを作成し、所与の URL をロードします。 呼び出し元のスクリプトにポップアップを表示するパーミッションがない場合、openWindow()InvalidAccessError をスローします。

Firefox では、このメソッドは、通知クリックイベントの結果として呼び出された場合にのみ、ポップアップを表示できます。

Android 版 Chrome では、メソッドは代わりに、以前にユーザーのホーム画面に追加されたスタンドアロンのウェブアプリによって提供される既存の閲覧コンテキストで URL を開く場合があります。 最近では、これは Windows 版 Chrome でも機能します。

構文

self.clients.openWindow(url).then(function(windowClient) {
  // WindowClient で何かをします
});

パラメーター

url
ウィンドウで開くクライアントの URL を表す USVString。 通常、この値は呼び出し元のスクリプトと同じオリジンからの URL でなければなりません。

戻り値

URL がサービスワーカーと同じオリジンからのものである場合は WindowClient オブジェクトに解決され、それ以外の場合は null 値に解決される Promise

// 適切な場合は OS に通知を送ります
if (self.Notification.permission === 'granted') {
  const notificationObject = {
    body: 'ここをクリックしてメッセージを表示してください。',
    data: { url: self.location.origin + '/some/path' },
    // data: { url: 'http://example.com' },
  };
  self.registration.showNotification('メッセージがあります!', notificationObject);
}

// 通知クリックイベントリスナー
self.addEventListener('notificationclick', e => {
  // 通知ポップアウトを閉じます
  e.notification.close();
  // すべての Window クライアントを取得します
  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);
  }));
});

仕様

仕様 状態 コメント
Service Workers
Clients: openWindow の定義
草案 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
openWindow
実験的
Chrome 完全対応 40
完全対応 40
完全対応 42
補足
補足 Can only open URLs on the same origin.
完全対応 43
補足
補足 Can open any URL.
完全対応 51
補足
補足 URLs may open inside an existing browsing context provided by a standalone web app
Edge 完全対応 ≤79
完全対応 ≤79
完全対応 ≤79
補足
補足 Can only open URLs on the same origin.
完全対応 ≤79
補足
補足 Can open any URL.
完全対応 ≤79
補足
補足 URLs may open inside an existing browsing context provided by a standalone web app
Firefox 完全対応 45
補足
完全対応 45
補足
補足 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE 未対応 なしOpera 完全対応 38Safari 未対応 なしWebView Android 完全対応 40
完全対応 40
完全対応 42
補足
補足 Can only open URLs on the same origin.
完全対応 43
補足
補足 Can open any URL.
完全対応 51
補足
補足 URLs may open inside an existing browsing context provided by a standalone web app
Chrome Android 完全対応 40
完全対応 40
完全対応 42
補足
補足 Can only open URLs on the same origin.
完全対応 43
補足
補足 Can open any URL.
完全対応 51
補足
補足 URLs may open inside an existing browsing context provided by a standalone web app
Firefox Android 完全対応 45Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
完全対応 4.0
完全対応 5.0
補足
補足 URLs may open inside an existing browsing context provided by a standalone web app

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。