This media query property lets you style your web application differently when your app runs as a PWA (Progressive Web App). This lets you hide/show or resize HTML elements when your application is launched in standalone mode. Hide that header or footer when you’re in app mode, so your application feels more native.
Use case: Make your web app feel native when launched standalone.
@media (display-mode: standalone)
{
<br> header { display: none; } /* no need for browser nav bar */<br>
}
Most devs don’t realize you can tailor the UX based on how the app is launched… including me (I just read about it a few days ago). Make your PWAs feel great!
DarthPedro's Blog 