manifest: display_override "tabbed" mode
Published
manifest: display_override “tabbed” mode — Adding "tabbed" to a manifest’s
display_override array, together with the optional tab_strip member, lets a PWA
open a single app window that shows a tab strip for switching between documents inside
the app’s scope, instead of one window per document.
Browser & ecosystem support
Section titled “Browser & ecosystem support”- Legend
- Yes
- Partial
- Flag
- No
- Unknown
| Browser / Platform | Support | Versions | Confidence | Source | Notes |
|---|---|---|---|---|---|
| Chrome (Desktop) | Yes | 126 | high | source | — |
| Chrome (Android) | Yes | 126 | high | source | 1 |
| Edge (Desktop) | Yes | 126 | high | source | 2 |
| Firefox (Desktop) | No | — | high | source | 3 |
| Firefox (Android) | No | — | high | source | 45 |
| Safari (macOS) | No | — | high | source | 6 |
| Safari (iOS) | No | — | high | source | 78 |
| Samsung Internet | Yes | 28.0 | high | source | 9 |
| WebView (Android) | No | — | high | source | 10 |
- Derived by browser-compat-data mirroring from Chrome.
- Derived by browser-compat-data mirroring from Chrome.
- No Firefox support is recorded in browser-compat-data.
- No Firefox for Android support is recorded in browser-compat-data.
- Derived by browser-compat-data mirroring from Firefox.
- No Safari support is recorded in browser-compat-data.
- No Safari on iOS support is recorded in browser-compat-data.
- Derived by browser-compat-data mirroring from Safari.
- Derived by browser-compat-data mirroring from Chrome Android.
- No WebView Android support is recorded in browser-compat-data.
Per Chrome for Developers, tabbed application mode “is part of the capabilities project
and has shipped on ChromeOS.” MDN’s compatibility data records the tabbed value as
experimental and unsupported in Firefox and Safari.
Declaring the tabbed display mode
Section titled “Declaring the tabbed display mode”Per Chrome for Developers, "tabbed" must be requested through display_override, not
display, because it is not backward compatible with browsers that do not implement it:
{ "display": "standalone", "display_override": ["tabbed"], "tab_strip": { "new_tab_button": { "url": "/new" } }}If tab_strip is omitted, Chrome for Developers documents that it defaults to a
new_tab_button whose url is the manifest’s start_url.
Detecting an active tabbed window
Section titled “Detecting an active tabbed window”Per the WICG tabbed-mode explainer, apps detect the tab strip with the display-mode
media feature’s tabbed value, the same mechanism used for other display modes:
function hasTabStripEnabled() { if (!('matchMedia' in window)) { // No matchMedia support — assume the tab strip is not present. return false; } return window.matchMedia('(display-mode: tabbed)').matches;}
if (hasTabStripEnabled()) { // Running with a tab strip — skip any in-page tab UI.} else { // No tab strip: render the app's own document-switching UI instead.}What goes wrong
Section titled “What goes wrong”- Do not put
"tabbed"directly indisplay: per the WICG explainer, it is only valid insidedisplay_override, and browsers that support neither fall back to the next entry (or todisplay). - Chrome for Developers reports that tabbed application mode has shipped on ChromeOS — design the app to work correctly when the tab strip does not appear.
- Per Chrome for Developers, separate browser tabs provide resource isolation. With developer-built tabs, browser affordances such as navigation history and “copy this page URL” apply to the tabbed-interface page rather than the selected document page.
- The
home_tab(if configured) should never navigate; Chrome for Developers says links clicked from it should open in a new app tab.
Where to go next
Section titled “Where to go next”- manifest: display_override support — the
fallback-chain member that
"tabbed"is declared through. - manifest: launch_handler support — controls whether a launch opens a new tab or reuses an existing app window.
← Back to the Compatibility explorer.