PWA化を行うことで、アプリがネイティブのような見た目になりますが、問題となるのが、iPhoneやiPadのホームバーとの干渉です。
特に、ボトムナビゲーションを実装しているアプリでは、ホームバーとボトムナビゲーションが干渉してしまい、ボタンが押しにくくなるといったUIの問題が発生することがあります。
この記事では、その対策方法について紹介します。
PWAアプリの要素が、iPhoneのホームバーに干渉してしまう。どうすればいいの?
PWA化を行うことで、アプリがネイティブのような見た目になりますが、問題となるのが、iPhoneやiPadのホームバーとの干渉です。
特に、ボトムナビゲーションを実装しているアプリでは、ホームバーとボトムナビゲーションが干渉してしまい、ボタンが押しにくくなるといったUIの問題が発生することがあります。
この記事では、その対策方法について紹介します。
フッターが、ホームバーに干渉していると想定します。
<footer>
<p>これはフッターです</p>
</footer>
この場合、footer にホームバー分の padding-bottom を設定します。Appleデバイスでホームバーがあるときのみ、パディングを付与する方法です。
まず、<head> タグ内の viewport を次のように書き換えます。
<meta name='viewport' content='initial-scale=1, viewport-fit=cover' />
次に、CSSで padding-bottom を以下のように設定します。
<footer>
<p>これはフッターです</p>
</footer>
<style>
footer {
padding-bottom: env(safe-area-inset-bottom);
}
</style>
この記述により、Appleのホームバーがあるデバイスでは自動的に padding-bottom が追加され、干渉が防げます。
さらにパディングを追加したい場合は、以下のように + を使って追加の幅を指定することもできます。
footer {
padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
}
これでホームバーとの干渉を防ぐことができ、UIの問題が解決します。
ここまで、PWAアプリにおけるAppleデバイスのホームバー干渉を避ける方法について紹介しました。
この対策は、PWAアプリにはほぼ必須だと思います。ぜひ参考にして実装してみてください。
ここまでお読みいただき、ありがとうございました。