このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Clients: openWindow() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2018年4月以降、すべてのブラウザーで利用可能です。
メモ: この機能はサービスワーカー内でのみ利用可能です。
openWindow() は Clients インターフェイスのメソッドで、新しい最上位の閲覧コンテキストを作成し、指定された URL をロードします。 呼び出し元のスクリプトにポップアップを表示する権限がない場合、openWindow() は InvalidAccessError 例外を発生させます。
Firefox では、このメソッドは、通知クリックイベントの結果として呼び出された場合にのみ、ポップアップを表示できます。
Android 版 Chrome では、メソッドは代わりに、以前にユーザーのホーム画面に追加されたスタンドアロンのウェブアプリによって提供される既存の閲覧コンテキストで URL を開く場合があります。 最近では、これは Windows 版 Chrome でも機能します。
構文
openWindow(url)
引数
url-
ウィンドウで開くクライアントの URL を表す文字列。 通常、この値は呼び出し元のスクリプトと同じオリジンの URL でなければなりません。
返値
URL がサービスワーカーと同じオリジンからのものである場合は WindowClient オブジェクトに解決され、それ以外の場合は null 値に解決される Promise。
例外
InvalidAccessErrorDOMException-
アプリの元のウィンドウに一時的な活性化のウィンドウが存在しない場合、この例外でプロミスは拒否されます。
セキュリティ要件
- アプリの元のウィンドウのうち、少なくとも 1 つは一時的な活性化が行われている必要があります。
例
// 適切な場合は 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) => {
const windowToFocus = clientsArr.find(
(windowClient) => windowClient.url === e.notification.data.url,
);
if (windowToFocus) {
// 対象 URL に一致するウィンドウタブが既に存在する場合は、それにフォーカスします。
windowToFocus.focus();
} else {
// それ以外の場合は、適切な URL への新しいタブを開いてフォーカスします。
clients
.openWindow(e.notification.data.url)
.then((windowClient) => (windowClient ? windowClient.focus() : null));
}
}),
);
});
仕様書
| 仕様書 |
|---|
| Service Workers Nightly # clients-openwindow |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。