ウィンドウ管理

ブラウザの外部にある PWA が、独自のウィンドウを管理します。この章では、 スペース内のウィンドウを管理するための API と機能、 OS です。

PWA ウィンドウ

PWA によって管理される独自のウィンドウで実行する場合、そのオペレーティング システムのすべてのウィンドウについて、次のような利点と責任があります。

  • Windows や ChromeOS などのマルチウィンドウ オペレーティング システムで、ウィンドウのサイズ変更や移動を行える。
  • iPadOS 分割モードや Android 分割画面モードなど、他のアプリ ウィンドウと画面を共有する。
  • デスクトップのドック、タスクバー、Alt Tab メニュー、モバイル デバイスのマルチタスク ウィンドウのリストに表示されます。
  • ウィンドウを最小化したり、画面やデスクトップ間でウィンドウを移動したり、いつでも閉じたりできます。

ウィンドウの移動とサイズ変更

PWA ウィンドウは任意のサイズにでき、デスクトップ オペレーティング システムの画面の任意の場所に配置できます。デフォルトでは、ユーザーがインストール後に初めて PWA を開くと、現在の画面の比率のウィンドウ サイズ（最大解像度 1920x1080）が画面の左上に表示されます。

ユーザーはウィンドウの移動やサイズ変更が可能です。また、ブラウザは前回の設定を記憶します。そのため、次にアプリを開いたときに、ウィンドウは前回使用したときのサイズと位置が維持されます。

マニフェスト内で PWA の推奨サイズと位置を定義する方法はありません。ウィンドウの位置とサイズ変更には、JavaScript API を使用する必要があります。コードから、window オブジェクトの moveTo(x, y) 関数と resizeTo(x, y) 関数を使用して、独自の PWA ウィンドウの移動やサイズ変更を行うことができます。

たとえば、以下を使用して PWA の読み込み時に PWA ウィンドウのサイズを変更したり、移動したりできます。

document.addEventListener("DOMContentLoaded", event => {
   // we can move only if we are not in a browser's tab
   isBrowser = matchMedia("(display-mode: browser)").matches;
   if (!isBrowser) {
      window.moveTo(16, 16);
      window.resizeTo(800, 600);
   }
});

現在の画面サイズと位置は、window.screen オブジェクトを使用して照会できます。window オブジェクトの resize イベントを使用して、ウィンドウのサイズが変更されたことを検出できます。ウィンドウの移動をキャプチャするイベントがないため、位置を頻繁にクエリすることをおすすめします。

で確認できます。

他のサイトのブラウジング

PWA の範囲外の外部サイトにユーザーを誘導するには、標準の <a href> HTML 要素を使用するか、location.href を使用するか、互換性のあるプラットフォームで新しいウィンドウを開きます。

現在、すべてのブラウザで、PWA がインストールされている場合、マニフェストの範囲外の URL にアクセスすると、PWA のブラウザ エンジンによってウィンドウのコンテキスト内でアプリ内ブラウザがレンダリングされます。

アプリ内ブラウザの機能は次のとおりです。

  • コンテンツの上部に表示されます。
  • 現在のオリジン、ウィンドウのタイトル、メニューを示す静的な URL バーがあります。通常、マニフェストの theme_color でテーマを設定します。
  • コンテキスト メニューから、その URL をブラウザで開くことができます。
  • ユーザーはブラウザを閉じるか、前の画面に戻ることができます。

サポート範囲外の URL をブラウジングする際のデスクトップ PWA のアプリ内ブラウザ。

で確認できます。

スタンドアロン PWA 内で範囲外の URL をブラウジングする際の iPhone のアプリ内ブラウザ。

スタンドアロン PWA 内で範囲外の URL を閲覧する際の Android のアプリ内ブラウザ。

認可フロー

OAuth 2.0 を使用するなど、ウェブ認証と認可のフローの多くは、PWA の配信元に返すトークンを取得するために、生成元の別の URL にユーザーをリダイレクトします。

この場合、アプリ内ブラウザは次のプロセスに沿って動作します。

  1. ユーザーが PWA を開き、ログインをクリックします。
  2. PWA が PWA の範囲外の URL にユーザーをリダイレクトするため、レンダリング エンジンは PWA 内でアプリ内ブラウザを開きます。
  3. ユーザーはいつでもアプリ内ブラウザをキャンセルして PWA に戻ることができます。
  4. ユーザーがアプリ内ブラウザにログインします。認証サーバーがユーザーを PWA オリジンにリダイレクトし、トークンを引数として送信します。
  5. アプリ内ブラウザは、PWA の対象範囲に含まれる URL を検出すると自動的に終了します。
  6. エンジンは、PWA のメイン ウィンドウのナビゲーションを、アプリ内ブラウザでの認証サーバーの URL にリダイレクトします。
  7. PWA はトークンを取得して保存し、PWA をレンダリングします。

ブラウザのナビゲーションの強制

アプリ内ブラウザではなく、URL を使用してブラウザを強制的に開く場合は、<a href> 要素の _blank ターゲットを使用します。これはデスクトップ PWA でのみ機能します。モバイル デバイスでは、URL でブラウザを開くオプションはありません。

function openBrowser(url) {
    window.open("url", "_blank", "");
}

新しいウィンドウを開く

パソコンでは、ユーザーは同じ PWA の複数のウィンドウを開くことができます。各ウィンドウは、同じ URL の 2 つのブラウザタブを開くかのように、同じ start_url への異なるナビゲーションになります。 PWA のメニューから、[ファイル] > [新しいウィンドウ] の順に選択すると、PWA コードで open() 関数を使用して新しいウィンドウを開くことができます。詳しくは、こちらのドキュメントをご覧ください。

function openNewWindow() {
    window.open("/", "new-window", "width=600,height=600");
}

同じインストール済みの PWA をデスクトップ オペレーティング システムで複数のウィンドウに開いた状態。

iOS または iPadOS の PWA ウィンドウで open() を呼び出すと、null が返され、ウィンドウが開かない。Android で新しいウィンドウを開くと、その URL に対して新しいアプリ内ブラウザが作成されます。URL が PWA の範囲内にある場合でも、通常は外部ブラウジング エクスペリエンスがトリガーされません。

ウィンドウのタイトル

<title> 要素は、ブラウザタブ内のスペースが限られているため、主に SEO の目的で使用されていました。PWA でブラウザからウィンドウに移動すると、タイトルバーのスペースをすべて使用できます。

タイトルバーの内容を定義できます。

  • HTML の <title> 要素で静的に。
  • document.title 文字列プロパティを随時動的に変更。

デスクトップ PWA ではタイトルが必須で、ウィンドウのタイトルバーに使用されます。また、タスク マネージャーやマルチタスクの選択で使用されることもあります。シングルページ アプリケーションの場合は、ルートごとにタイトルを更新するとよいかもしれません。

タブモード

タブモードと呼ばれる試験運用版の機能を利用すると、PWA をウェブブラウザに似たタブベースの設計にすることができます。この場合、次の動画のように、同じ PWA から複数のタブを開いて、すべて同じオペレーティング システム ウィンドウ内で結合できます。

この試験運用版機能の詳細については、PWA のタブ付きアプリケーション モードをご覧ください。

ウィンドウ コントロールのオーバーレイ

<title> 要素または document.title プロパティの値を定義することで、ウィンドウのタイトルを変更できることを説明しました。ただし、これは常に文字列値です。HTML、CSS、画像を使って、好きなようにタイトルバーをデザインできるとしたらどうでしょうか。 そこで役立つのがウィンドウ コントロール オーバーレイです。Microsoft Edge と Google Chrome デスクトップ PWA の新しい試験運用版機能です。

この機能の詳細については、PWA のタイトルバーのウィンドウ コントロール オーバーレイをカスタマイズするをご覧ください。

ウィンドウ コントロール オーバーレイを使用すると、タイトルバーにコンテンツをレンダリングできます。

ウィンドウ管理

画面が複数あると、ユーザーは利用可能なスペースをすべて使いたくなるでしょう。例:

  • Gimp のマルチウィンドウ グラフィック エディタを使用すると、正確に配置されたウィンドウにさまざまな編集ツールを配置できます。
  • 仮想取引デスクは市場動向を複数のウィンドウで表示でき、いずれのウィンドウも全画面モードで表示できます。
  • スライドショー アプリでは、スピーカー ノートを内部のメイン画面に、プレゼンテーションを外部プロジェクターに表示できます。

Window Management API を使用すると、PWA でこのようなことができます。

画面の詳細を取得しています

Window Management API に新しいメソッド window.getScreenDetails() が追加されています。このメソッドは、添付された画面の不変配列として画面を含むオブジェクトを返します。また、現在の window.screen に対応する ScreenDetails.currentScreen からアクセスできるライブ オブジェクトもあります。

また、screens 配列が変更されると、返されたオブジェクトで screenschange イベントが発生します。（個々の画面の属性が変更された場合は適用されません）。個々の画面（window.screen または screens 配列内の画面）でも、属性が変更されたときに change イベントが発生します。

// Request an object with a screen objects
const screenDetails = await window.getScreenDetails();
screenDetails.screens[0].isPrimary;  // e.g. true
screenDetails.screens[0].isInternal;  // e.g. true
screenDetails.screens[0].pointerTypes;  // e.g. ["touch"]
screenDetails.screens[0].label;  // e.g. 'Samsung Electric Company 28"'

// Access the live object corresponding to the current `window.screen`.
// The object is updated on cross-screen window placements or device changes.
screenDetails.currentScreen;
screenDetails.addEventListener('screenschange', function() {
 // NOTE: Does not fire on changes to attributes of individual screens.
  const screenCount = screenDetails.screens.length;
  const currentScreen screenDetails.currentScreen.id;
});

ユーザーまたはオペレーティング システムが PWA のウィンドウをある画面から別の画面に移動すると、画面の詳細オブジェクトから currentscreenchange イベントも呼び出されます。

画面の wake lock

たとえば、キッチンでタブレットでレシピを見ていると想像してみてください。食材の準備が終わりました。手が汚れているので、デバイスを戻して次のステップを読みます。みなさんに画面が黒くなった！Screen Wake Lock API を使用すると、PWA により画面が暗くなったり、スリープ状態になった、ロックされたりするのを防ぐことができます。ユーザーは安心して中断、開始、退出、再開できます。

// Request a screen wake lock
const wakeLock = await navigator.wakeLock.request();

// Listen for wake lock release
wakeLock.addEventListener('release', () => {
 console.log(`Screen Wake Lock released: ${wakeLock.released}`);
});
// Manually release the wake lock
wakeLock.release();

仮想キーボード

スマートフォンやタブレットなどのタップベースのデバイスには仮想画面キーボードがあり、PWA のフォーム要素にフォーカスがあるときにユーザーが入力できます。

VirtualKeyboard API により、PWA で次のような navigator.virtualKeyboard インターフェースを使用して、互換性のあるプラットフォーム上のキーボードをより詳細に制御できるようになりました。

  • navigator.virtualKeyboard.show() 関数と navigator.virtualKeyboard.hide() 関数を使用して、仮想キーボードの表示と非表示を切り替える。
  • navigator.virtualKeyboard.overlaysContent を true に設定して、仮想キーボードを自分で閉じることをブラウザに伝えます。
  • navigator.virtualKeyboard のイベント geometrychange でキーボードの表示 / 非表示が判別される。
  • virtualkeyboardpolicy HTML 属性を使用して（contenteditable を使用して）ホスト要素を編集する際の仮想キーボード ポリシーを設定する。ポリシーでは、仮想キーボードをブラウザで auto 値を使用して自動的に処理するか、manual 値を使用してスクリプトで処理するかを選択できます。
  • CSS 環境変数を使用して、仮想キーボードの外観に関する情報（keyboard-inset-height や keyboard-inset-top など）を取得する。

この API の詳細については、VirtualKeyboard API を使用したフル コントロールをご覧ください。

リソース