Microsoft Edge でデスクトップ Web アプリをよりネイティブにできるようになりました

Google Chrome と同様に、Microsoft Edge は約 4 週間ごとに新しいメジャー リリースを受け取ります。Chrome 106 は昨日届きましたが、Edge 106 はまだ利用できません。Microsoftはリリースに先立ち、デスクトップ Web アプリをより自然に感じさせる Edge 105の新しい API について詳しく説明しました。

Window Controls Overlay は、Microsoft が 2020 年 1 月に初めて発表した新しいプログレッシブ Web アプリ (PWA) 機能です。同社はその後、2021 年 3 月に Chromium プロジェクトの下で早期実装に取り​​組み、その後 Origin のトライアルを開始し、Chrome は実際に 2022 年 5 月にバージョン 102 でそれを採用しました。も公開。

PWA を家のように感じさせるため、このフロントには多大な努力が払われてきました。そしてこれは、パフォーマンスを向上させることによってではなく、一見取るに足らない UX の改善によって達成されます。アプリのタイトル バーをオペレーティング システムの既定の設定に強制的に一致させる代わりに、約 30 ピクセルの高さを PWA に戻して、タイトル バーをほぼ完全に制御できるようにします。

30px は小さいように聞こえますが、PWA にカスタム タイトル、メニュー バー、ナビゲーション タブなどを領域に表示する自律性を与えます。より視覚的に表現するために、下の図の白い領域は PWA によって制御されます。

Microsoft は、これが Windows、Mac、Linux などのさまざまなオペレーティング システムに適応することを強調しました。これらの 30 ピクセルの高さの使用がオペレーティング システムによってどのように異なるかを示すグラフを以下に示します。

マイクロソフトは次のように述べています。

PWA は、デスクトップ Web アプリケーションの構築に最適だと考えています。あなたの Web サイトを、まるでデスクトップのように見えるアプリケーションに変えることは、かつてないほど簡単になりました。ウィンドウ コントロール オーバーレイ機能を使用すると、よりモダンでユーザーにとって魅力的なデスクトップ アプリケーションを作成できます。

いくつかのコード スニペットをチェックして、タイトル バーを好みに合わせてカスタマイズする方法を確認することに興味がある PWA 開発者は、こちらの Microsoft の例をチェックしてください。

興味深いことに、Microsoft は、ウィンドウ コントロール オーバーレイが Edge 105 でデフォルトで有効になっていることを指摘していますが、そのバージョンのメジャー リリースまたはマイナー リリースの変更ログのいずれもこれを強調していません。Edge の最新ビルドを使用している場合、デフォルトで API が有効になっているはずです。