instantpwa
Help centre

Answer

How do you handle safe areas in a PWA?

Short answer

To avoid content being obscured by notches, camera cutouts or the home indicator on modern phones, set <meta name="viewport" content="viewport-fit=cover"> and then apply padding using the CSS environment variables env(safe-area-inset-top), -right, -bottom and -left, which report the exact inset needed on the current device in standalone or fullscreen mode.

By InstantPWA engineering·Reviewed July 25, 2026

The viewport-fit meta tag

Without viewport-fit=cover, Safari letterboxes the page around notches instead of letting content extend under them, so the safe-area variables would be unnecessary but your app also cannot use the full screen.

Applying the insets

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); on a fixed header/footer keeps content clear of hardware cutouts.

Fallback values

env() accepts a second fallback argument, e.g. env(safe-area-inset-bottom, 0px), for browsers or devices that report no inset.

Sources

Related
How does a PWA enter fullscreen mode?
A PWA can enter fullscreen two ways: programmatically, by calling element.requestFullscreen() in response to a user gesture (common for games and video players), or declaratively, by setting the manifest’s "display" field to "fullscreen" so the installed app always launches without any system UI at all, including the status bar.
What is a PWA?
A PWA (Progressive Web App) is a regular website that meets three technical criteria — HTTPS, a Web App Manifest and a service worker — so browsers let visitors install it on their home screen. Once installed, it launches like a native app, works offline and can send push notifications.
Can a PWA use Face ID or Touch ID?
Yes. The Web Authentication API (WebAuthn) lets a PWA prompt for the device’s built-in biometric authenticator — Face ID and Touch ID on Apple devices, Windows Hello on PC, or a fingerprint sensor on Android — to register or verify a user without ever handling the raw biometric data, which stays on-device. It is widely supported across modern Chrome, Safari, Edge and Firefox.
What is a passkey and can a PWA use one?
A passkey is a phishing-resistant credential built on the WebAuthn standard that replaces passwords: it is a cryptographic key pair, unlockable with the device’s biometric sensor or PIN, that can sync across a user’s devices via their platform account (Apple iCloud Keychain, Google Password Manager). A PWA can offer passkey sign-in using the same navigator.credentials API as any website — no native app is required.
What is the Idle Detection API?
The Idle Detection API lets a page detect, with the user’s permission, whether they have been idle (no keyboard/mouse/touch activity) for a specified threshold or have locked their screen — commonly used by chat and collaboration apps to automatically show an "away" status. It requires an explicit permission prompt and is supported on Chromium browsers only.