Chrome adds Colored Tab Strips to PWAs

Image about Chrome adds Colored Tab Strips to PWAs

After Edge, now Google Chrome has got colored title bars for Progressive Web Apps (sort of). We’ve already heard about Microsoft plans to make PWAs more native and run on startup on Windows. Recently Edge team has started automatically theming PWA’s title bar based on site’s color, now Google has jumped into this to apply to Chrome PWA window tab strips.

Chrome PWA with colorful Tab Strip

If a site you’re visiting is detected as Web App by the Chrome browser, then you’ll be allowed to install that app from the address bar by clicking on the icon displayed. Chrome and Chromium Edge browsers already let you open PWA links in respective apps, recently Chromium team has started testing two new features behind the flags: minimal UI and tab strips.

The “Desktop PWA support minimal-UI” feature available behind a flag with the same name, displays less UI with back and forward buttons for better navigation. While the other “Desktop PWA Tab Strips” provide tab strip for PWA, now Google is adding more to this:  Chrome now detects app site color and themes its tab strip based on that automatically.

The latest commit made by the Chromium team brings this change and can be already seen for an Installed PWA in Chromium, expect this to show up and work in the next Canary update if you enable “Desktop PWA Tab Strips” flag.

” Use theme colors to color PWA window tab strips. This CL updates BrowserFrame:GettThemepevoider() to return a specialized UI:: Themeprovider for PWA windows. The ThemeProvider uses the page’s theme color to determine the window’s overall color scheme. ”

desktop PWA tab strips flag

Related articles:

Chrome now displays Back and Reload buttons for PWAs

Microsoft Chromium Edge brings the Back button for PWAs before Google Chrome