【ITニュース解説】PWA in iPadOS 26 is a joke

システムエンジニアを目指す皆さんにとって、Webアプリケーションの技術は非常に重要だ。近年、「PWA（Progressive Web App）」という技術が注目されている。これは、Webサイトでありながら、まるで通常のスマートフォンアプリやデスクトップアプリのように使えるようにする技術だ。PWAは、インターネット接続が不安定な場所でも動作したり、スマートフォンのホーム画面にアイコンを追加して直接起動できたり、プッシュ通知を受け取れたりするなど、Webの柔軟性とネイティブアプリの利便性を兼ね備えている点が特徴だ。しかし、このPWAが、AppleのiPadOSの最新バージョンであるiPadOS 26で、期待通りの動作をしないという問題が指摘されている。

この問題の根源を理解するには、まずWebアプリケーションがデバイスの画面表示にどう対応してきたかを知る必要がある。昔、iPhone Xが登場したとき、画面上部には「ノッチ」と呼ばれる切り欠きがあった。通常のWebサイトは、このノッチにコンテンツが隠れてしまわないように、特別な対応が必要だった。そのために、WebKitという、Apple製品のWebブラウザ（Safariなど）の根幹をなす技術が、「viewport-fit」というメタタグや、特定のCSS属性を追加した。これらの技術を使うことで、Web開発者は、ノッチのあるiPhone Xの画面でも、コンテンツが邪魔されずにきれいに表示されるように、レイアウトを調整できるようになったのだ。これらの属性は、現在でもiPhoneでは問題なく機能している。

しかし、iPadOS 26で状況が変わった。iPadOS 26では、いくつかの大きなUI（ユーザーインターフェース）の変更が加えられた。例えば、ウィンドウの角がこれまで以上に丸くなり、また、複数のアプリをウィンドウ形式で並べて表示できる新しいウィンドウモードが導入された。さらに、各ウィンドウの上部には、アプリを閉じたり、最小化したりするための「交通信号」のような3つのボタン（ウィンドウコントロール）が表示されるようになった。これらの新しいUI要素が、PWAの表示に大きな影響を与えているのだ。

具体的にどのような問題が起きているかというと、PWAがiPadOS 26の新しいウィンドウモードで表示されると、致命的なレイアウトの不具合が発生する。例えば、ウェブサイトのナビゲーションバーにある「Blog」のような重要なリンクが、iPadOSの新しいウィンドウコントロールによって完全に覆い隠されてしまうという事態が発生している。もし、ウェブアプリの重要な「ハンバーガーメニュー」アイコン（三本線で表されるメニューアイコン）が同じ場所にあったとしたら、それもまたウィンドウコントロールにブロックされてしまい、ユーザーはメニューを開くことすらできなくなってしまうだろう。これは、アプリの操作性を著しく損なう問題だ。

さらに、もう一つの問題として、ウェブアプリのコンテンツと、ウィンドウの上端（ウィンドウコントロールが表示される部分）との間に、不自然な黒い隙間ができてしまう。これは、せっかくWebアプリ全体を没入感のあるデザインにしようとしても、その没入感を台無しにしてしまう視覚的な問題だ。開発者としては、env(safe-area-inset-top)というCSSの変数を使って、ウィンドウコントロールのようなシステムUI要素によってコンテンツが隠れないように、適切にレイアウトをオフセット（ずらす）することを期待していた。これは、iPhone Xのノッチ問題に対応したときと同じように、Webコンテンツが新しいシステムUIに自然に馴染むように調整できるはず、という期待があったのだ。しかし、iPadOS 26では、この変数が期待通りに機能せず、結果としてコンテンツの隠蔽や不自然な隙間が生じてしまっている。

もちろん、ウェブアプリケーション開発者が、まるでMacのデスクトップアプリのように、ウィンドウコントロールとウェブサイトのナビゲーションバーをきれいに揃えたいと考えることもあるだろう。このような目的のために、「CSS Window Controls Overlay API」という技術が開発されている。このAPIを使うと、Webアプリの表示領域をウィンドウコントロールの下にまで広げつつ、コントロール自体は透過的に重ねて表示させたり、あるいはWebアプリ側でコントロールの表示位置に合わせてレイアウトを調整したりすることが可能になる。これにより、Webアプリは、よりネイティブアプリに近い、一体感のある見た目と操作感を実現できるのだ。

実際に、この「CSS Window Controls Overlay API」は、Google ChromeやMicrosoft Edgeといった主要なWebブラウザでサポートされており、macOSやWindowsといったデスクトップOS上では、その効果をしっかり確認できる。デモを見ても、これらのプラットフォームでは、ウィンドウコントロールとWebアプリのコンテンツが美しく融合しているのがわかる。しかし、残念ながら、iPadOSではこのAPIがサポートされていない。つまり、macOSやWindowsでは利用できる最先端のWeb技術によるレイアウト調整が、iPadOSでは全く利用できない状況なのだ。

この状況は、「PWAがiPadOS 26ではジョークだ」とまで言われる原因となっている。PWAは、Webの可能性を広げ、ユーザーに優れた体験を提供することを目指している。しかし、iPadOS 26における現状は、開発者がiPad向けにPWAを最適化する上で大きな障壁となり、結果としてユーザーが体験できるPWAの品質も低下してしまう。Appleが、PWAの持つ本来の力をiPadOSでも発揮できるように、このレイアウト問題を早急に解決することが望まれている。