"Single Tab Page" meta tag #11322
Description
What problem are you trying to solve?
Some web apps are designed to only be allowed to run on one tab (per browser window, or per browser), e.g.: "WhatsApp Web".
The common behavior for these apps is, if the url/path of the app is already opened/loaded/browsed to in a tab, and a user browses to the same url/path - a modal dialog will be displayed, informing them that the app can only run in a single tab, usually with buttons that allow to either close the new tab, or close the old tab and make the new tab the "singleton tab".
I believe this is common enough to be implemented in the browser levels - e.g. with a <meta> HTML tag in the <head> of the page. Another reason is, this is a behavioral UX/UI issue on the "browser level" - similar to how ` contains "rendering instructions" for the browser.
What solutions exist today?
The "old way" was using a value stored in LocalStorage , and a check if a value already exists - this is limited and prone to errors, because:
- There is no reliable clean-up mechanism. (
unloadis obolete,pagehideis unreliable). - Some browsers sandbox LocalStorage per tab in "private mode" (e.g. Safari).
Modern apps use BroadcastChannel, which is reliable - but if this feature is implemented, the overhead of using it just for this can be avoided.
How would you solve it?
Option 1: single behavior
a Meta tag: <meta name="single-tab" content="true"> or <meta name="single-tab" content="*.example.com, *.example2.com"> (with comma-separated list of urls) will signal the browser that that page should not be allowed to be opened in other tabs- the browser will show the modal alert upon opening in another tab - giving the option to close others or cancel the new tab.
Option 2: multiple behavior options
<meta name="single-tab-urls" value="*.example.com, *.example1.com" />
<meta name="single-tab-policy">
with optional values such as:
allow-multiple: Default browser behaviorwarn-on-duplicate: Show a modal if the page is opened again in another tab (with options to close others, or close the new tab).block-duplicate: Prevent rendering on new tabs, show a warning and close tab.
Maybe a value that specifies the page should only be allowed in a single tab across all Browser window instances.
Anything else?
No response