Breaking Out of the Box

Patrick Brosset, writing for A List Apart, digging into the Window Controls Overlay for Progressive Web Apps:

At the end of the day though, PWAs on desktop are constrained to the window they appear in: a rectangle with a title bar at the top.

What if we could think outside this box, and reclaim the real estate of the app’s entire window? Doing so would give us a chance to make our apps more beautiful and feel more integrated in the operating system.

Once activated from the manifest, you get to define an app-region and can also use these Environment Variables in your CSS:

  • titlebar-area-x
  • titlebar-area-y
  • titlebar-area-width
  • titlebar-area-height

Breaking Out of the Box →
Window Controls Overlay on web.dev →

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.