Vivaldi Tab Notifications for Web Developers

This post is also available in: 日本語 Français Deutsch Српски Português Български 简体中文

Products: Vivaldi for desktop-only.

Tab Notifications let webpages communicate brief numeric status summaries to users. Examples include displaying new unread messages, emails, or news items; unprocessed tasks or bills; or the number of items added to a shopping cart.

Tab Notifications are displayed as numeric badges on top of the document’s favicon on the Tab Bar and Web Panels.

Vivaldi detects numeric counters at the beginning of the document title when they’re surrounded by parentheses (U+0028 LEFT PARENTHESIS and U+0029 RIGHT PARENTHES) and separated from the remainder of the title by a space (U+0020 SPACE) character. Example:

<title>(7) Webmail</title>

Tab Notifications is enabled by default, but users can disable it.

The badge is updated dynamically when the document’s title changes. For the best performance, update the document.title property or update the <title> element’s innerText property. Replacing the <title> element may cause badge updates to be delayed.

Numbers with two or more digits may be displayed as a plus-sign badge instead of a numeric badge due to space constraints.

The numeric counter is removed from the document title in user interfaces where the badge is displayed. The character sequence “(0) ” is removed from titles but does not generate a badge.

Tab Notifications are only detected from the top-frame document title (no frames).

Opt-Out of Tab Notifications

You can disable Tab Notifications in a document by prefixing the title with a zero-width space (U+200B ZERO WIDTH SPACE) character. Example:

<title>&#x200b;​(1195) Step Counter</title>