ChromeOS Tabbed Web Apps: A New Era for Progressive Web Apps (PWAs) or a Missed Opportunity?

Progressive Web Apps (PWAs) are evolving, offering a more app-like experience within the browser. A recent development focuses on enabling tabbed interfaces within PWA windows, aiming to enhance usability and organization. This article explores the "tabbed" display mode for PWAs, its current limitations, and the potential future for cross-platform support.

What are Tabbed Web Apps and How Can They Improve User Experience?

Tabbed web apps allow users to experience PWAs with a tab strip, similar to a native desktop application. This means:

• Improved organization: Managing multiple aspects of a web app becomes easier within a single window.
• Enhanced navigation: Switching between different sections or functionalities is streamlined.
• Native app feel: PWAs feel more integrated with the desktop environment.

The "Tabbed" Display Mode: Key Features to Know

The implementation of tabbed web apps relies on a new "tabbed" display mode and a manifest field for customizing the tab strip. These are important details to keep in mind:

• display_override: Developers utilize the display_override manifest member to define a fallback chain. This ensures that if the "tabbed" mode isn't supported, the app gracefully degrades to a user-defined alternative like "standalone" or "browser".
• Customization: The new manifest field allows developers to tailor the appearance and behavior of the tab strip.
• Backwards Compatibility: The design prioritizes backwards compatibility, ensuring existing PWAs aren't broken by the introduction of the new feature.

ChromeOS Exclusive? Understanding the Current Limitations

Initially, the tabbed web app feature is exclusively available on ChromeOS. While there were initial plans to extend support to other desktop platforms, the Chrome team has currently put those plans on hold.

This decision has sparked discussion within the Chromium development community. The primary reasons cited for this limitation are product prioritization and the engineering effort needed to refine the implementation for other desktop platforms.

Cross-Platform Potential: Hope for Windows, Mac, and Linux Users?

Despite the current ChromeOS focus, there's still hope for wider adoption. Microsoft (MSFT) has expressed interest in polishing the feature for Windows, and the Chrome team has indicated that they would likely accept patches that enable tabbed web apps on other platforms.

However, it's important to note that while contributions are welcome, the Chrome team may not be able to dedicate significant resources to consultation or maintenance for non-ChromeOS implementations. This presents both an opportunity and a challenge for developers interested in bringing tabbed PWAs to other operating systems.

Fallback Strategies: Ensuring a Consistent User Experience

For platforms that don't support the "tabbed" display mode, developers can use the display_override manifest member to specify fallback options. Common strategies include:

• Falling back to "standalone": The PWA opens in a separate, non-tabbed window.
• Falling back to "browser": The PWA opens as a regular browser tab.

The recommended approach is to align the fallback behavior with the existing experience users have on those platforms, ensuring a smooth transition.

Debugging and Testing Tabbed Web Apps

Developers can use chrome://web-app-internals for debugging, and the new manifest field can be added to the DevTools Application pane. Web platform tests are also available to ensure the feature functions correctly.

Real-World Adoption: Figma and the Future of Tabbed PWAs

While widespread adoption is still in its early stages, some companies are already exploring the potential of tabbed web apps. Figma, for example, is experimenting with the feature, indicating its value in productivity-focused applications.

Troubleshooting: What If Tabbed Mode Isn't Working?

Some users have reported issues with the tabbed PWA feature, even after enabling the necessary flags in chrome://flags.

• Flag Expiration: Ensure that the flags haven't expired. Expired flags may need to be re-enabled using temporary unexpire flags.
• Platform Support: Remember that the feature is officially supported only on ChromeOS.
• Browser Version: Make sure you are using a recent version of Chrome.

If issues persist, consider exploring alternative browsers like Edge, where the feature may have broader support.