Microsoft は、Edge ブラウザーの Web アプリがデスクトップ デバイス上で表示される方法を改善しています。 同社は、Web 開発者が次のことを可能にするウィンドウ コントロール オーバーレイ機能の利用可能性を発表しました。 ほとんどのオペレーティング システムでネイティブ アプリが行うのと同様に、Web アプリのタイトル バーの追加スペースを利用します。 システム。
現在、Web アプリがデスクトップ デバイス上で動作する方法では、アプリ ウィンドウ内でのみコンテンツを描画できます。 上部に表示されるタイトル バーは、ページのタイトル、ブラウザ コントロール、およびオペレーティング システムの一般的なウィンドウ コントロールを表示するために予約されています。 ブラウザーに依存しないカスタム Web アプリを構築している場合を除き、開発者がアプリに有用なコンテンツを表示できる領域が制限されます。
ウィンドウ コントロール オーバーレイを使用すると、Microsoft Edge はアプリを表示するためにタイトル バーのスペースを解放します トップレベルのメニュー、検索バー、その他の機能に役立つ可能性のあるコンテンツを任意に選択できます。 タイトル バーが 30 行のピクセルを占める代わりに、最小化ボタンや閉じるボタンなどのウィンドウ コントロールが Web アプリ コンテンツの上にオーバーレイとして表示されるようになりました。
開発者は、表示オーバーライド マニフェスト メンバーを Web アプリ マニフェストに追加することで、これを利用できます。 次に、CSS 変数を使用して、Web アプリがアプリの隅にあるウィンドウ コントロールの下に要素を描画しないようにします。 ウィンドウ コントロールは Windows、Linux、または macOS で異なるため、アプリが実行されているプラットフォームに応じて異なる幅変数を使用する必要があります。 この機能の詳細については、 Mozilla 開発者ネットワーク.
Microsoft は 2 年以上前に初めて Window Controls Overlay について話し、それからしばらくして Chromium エンジンへの実装を開始しました。 この機能は、バージョン 105 以降の Edge と Chrome、および Opera バージョン 91 で利用できるようになりました。 最新の Chromium バージョンを実行している場合、他の Chromium ベースのブラウザもこれをサポートする必要があります。 また、Firefox などの他のブラウザにもこの機能を実装するよう促す正式な仕様も公開されています。
ソース：マイクロソフト