Devs can soon test out placing controls in the title bar of PWAs

Developers will soon have new ways to fill the title bar area of progressive web apps.

What you need to know

• Developers will soon be able to place controls and other elements in the title bar of progressive web apps.
• The feature is called Window Controls Overlay, and it will be available for testing starting with Chrome 92.
• The feature will be in testing soon, starting with Chrome 92.

Progressive web apps (PWAs) continue to grow and evolve in terms of design and functionality. While more organizations and developers convert to and create PWAs, the technology behind them also improves. Thomas Steiner, a web developer advocate at Google, breaks down how to customize the title bars on a PWA in a recent web.dev post.

The ability to place controls and other elements inside the title bar of installed PWAs is a new option for developers that's still in the works. It was spotted last month in technical documents with information from the Microsoft Edge team's Amanda Baker. Steiner highlights Baker in his post, acknowledging her as the person who implemented and specified the feature.

Steiner's article is a technical breakdown for developers that explains how to place elements in the title bar, but it also has some interesting information for everyday users. Steiner states that the feature, officially known as Window Controls Overlay, will be available as an original trial in Chrome, starting with Chrome 92. The origin trial is expected to end in Chrome 94, which is expected in July 2021.

Developers can add different elements inside the title bar area, such as search functionality. This makes the title bar area more functional and reduces how much space is wasted within PWAs.

Since this a Chromium-based feature and Microsoft's Amanda Baker is working on it, it's safe to assume that it will likely arrive on Microsoft Edge as well as Google Chrome.