Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
その他 Limited support

Window Controls Overlay

Window Controls Overlay はプログレッシブWebアプリ（PWA）のタイトルバーをカスタマイズし、ネイティブアプリのような外観を実現する機能です。ウィンドウコントロール（閉じる、最小化、最大化ボタン）の周りにカスタムコンテンツを配置できます。PWAのブランディングやナビゲーション要素をタイトルバーに統合するために使用されます。

PWAタイトルバー

概要

Window Controls Overlay はプログレッシブWebアプリ（PWA）のタイトルバーをカスタマイズし、ネイティブアプリのような外観を実現する機能です。ウィンドウコントロール（閉じる、最小化、最大化ボタン）の周りにカスタムコンテンツを配置できます。PWAのブランディングやナビゲーション要素をタイトルバーに統合するために使用されます。

対応ブラウザ

デスクトップ

Chrome 105+
Edge 105+
Safari 未対応
Firefox 未対応

基本構文

CSS 
/* titlebar領域のスタイル */
.titlebar {
  -webkit-app-region: drag;
  height: env(titlebar-area-height);
  padding-left: env(titlebar-area-x);
}

実務での使いどころ

  • PWAのネイティブ風タイトルバー

    デスクトップPWAのタイトルバーに検索バーやロゴを配置し、ネイティブアプリケーションのような統一されたUIを提供します。

注意点

  • Chrome/Edge のみでサポートされており、Safari/Firefox では利用できません。タイトルバーがないフォールバックも必要です。

アクセシビリティ

  • タイトルバー領域のインタラクティブ要素が、キーボードナビゲーションで適切にアクセスできることを確認してください。

参考リンク