pwa-display-test icon indicating copy to clipboard operation
pwa-display-test copied to clipboard

Published 20 hours ago • verified publisher icon tecdrop
→

Metadata

See how Progressive Web Apps (PWAs) look and feel on your devices and platforms. Try all the web app manifest display modes: fullscreen, standalone, minimal-ui and browser.

PWA Display Test

See how Progressive Web Apps (PWAs) look and feel on your devices and platforms. Try it on Android, iOS, Linux, macOS, Windows, and other operating systems. Test if the standalone display mode really opens the PWA to look and feel like a standalone native application. Test if a fullscreen PWA really takes up the entirety of your screen. Try all the web app manifest display modes: fullscreen, standalone, minimal-ui and browser. To install PWA Display Test, navigate to its address and click the Install App button in supported browsers.

Lighthouse Score: 100

PWA Display Mode Status

Preferred display mode vs. actual display mode on various platforms and browsers:

Display mode / Platform fullscreen standalone minimal-ui browser
Android/Chrome ✔️ fullscreen ✔️ standalone ✔️ minimal-ui ✔️ browser
Windows/Brave ✖️ standalone ✔️ standalone ✔️ minimal-ui ✔️ browser
Windows/Chrome ✖️ standalone ✔️ standalone ✔️ minimal-ui ✔️ browser
Windows/Edge ✖️ standalone ✔️ standalone ✔️ minimal-ui ✔️ browser

Last updated: Oct 4, 2021

PWA Display Test on Android

Go to the PWA and click Install App Click Add to Home screen in prompt A PWA looks like a native app
Standalone PWA Display Test - Android Chrome - Install button Standalone PWA Display Test - Android Chrome - Install prompt Standalone PWA Display Test - Android
A fullscreen PWA covers everything A minimal-ui PWA shows the URL It works offline even in the browser
Fullscreen PWA Display Test - Android Minimal-ui PWA Display Test - Android Browser PWA Display Test - Android

Note: The screenshots were taken on Android 6.0.1 / Chrome 67.0.3396.68.

PWA Display Test on Windows

Navigate to the PWA and click Install App Click Install in the install prompt
Standalone PWA Display Test - Windows Chrome - Install button Standalone PWA Display Test - Windows Chrome - Install prompt
An installed PWA looks like a native Windows app No fullscreen mode in Windows?
Standalone PWA Display Test - Windows Fullscreen PWA Display Test - Windows

Note: The screenshots were taken on Windows 10.0.19043 / Chrome 94.0.4606.71, on Oct 4, 2021.

Development

PWA Display Test is hosted on Render. The project uses Gulp and a template to generate the 4 PWAs (fullscreen, standalone, minimal-ui, and browser) in the dist folder.

Prerequisites: Git, Node.js, ESLint. Editor: Visual Studio Code.

Contributions

Contributions are welcome! For feature requests and bug reports please submit an issue.

License

PWA Display Test is licensed under the MIT License.

← Metadata

27
Stars
3
Forks
Watchers

Owner

verified publisher icon tecdrop

Metadata

See how Progressive Web Apps (PWAs) look and feel on your devices and platforms. Try all the web app manifest display modes: fullscreen, standalone, minimal-ui and browser.

Back