piapia123
en

Web Notification Test

Media

Everything runs locally in your browser — nothing is uploaded

Current permission

Send a notification
Action buttons (optional; desktop Chrome shows at most two)

Platform differences (the point of this tool)

⚠️ On unsupported platforms these options **raise no error**; they simply have no effect. Hence the itemised list — "I set it and nothing happened" is far harder to diagnose than an error.

  • Body textSupported everywhere

    Supported everywhere, but the number of lines differs: desktops usually show two or three, mobile folds much sooner. Long text is truncated.

  • IconPlatform-dependent, see note

    ⚠️ On Windows this icon is not shown as the notification image; the sender app icon is used instead. macOS and most Linux desktops do use it. So "I set an icon and do not see it" is usually platform behaviour, not a mistake.

  • TagSupported everywhere

    A new notification with the same tag **replaces** the old one rather than stacking beside it. An empty tag is still a tag, so untagged notifications replace each other; give each one a different tag to keep several on screen.

  • SilentSupported everywhere

    Makes this one notification silent and vibration-free. Well supported, but it only overrides this notification — the system Do Not Disturb mode still suppresses it entirely.

  • Require interactionPlatform-dependent, see note

    ⚠️ Asks that the notification not auto-dismiss. Desktop Chrome and Edge honour it; **most mobile browsers and Safari ignore it**, so the notification disappears after a few seconds anyway. Even where it works, a user setting can override it.

  • Action buttonsPlatform-dependent, see note

    ⚠️ The biggest difference of all: desktop Chrome and Edge support it (**showing at most two**), while **most mobile browsers and Safari ignore actions entirely** — no buttons appear and nothing errors. Make sure a notification still makes sense without its buttons on mobile.

  • ImagePlatform-dependent, see note

    A large image in the notification appears on some platforms only (mainly Chrome on some Android builds) and is mostly ignored on desktop and iOS, again with no warning.

Notifications sent from this page

Ask for notification permission, then send one, trying the title, body, icon, tag, silent, require-interaction and action-button options. ⚠️ The value of this tool is not the sending; it is spelling out the platform differences. On unsupported platforms options like actions, requireInteraction and icon raise no error at all; they simply have no effect. You set two buttons and the notification has none, with a clean console. So each item here says where it works and where it is ignored: desktop Chrome shows at most two buttons while most mobile browsers and Safari ignore actions entirely; requireInteraction is the same story and the notification still vanishes after a few seconds; on Windows the icon is shown as the sending app icon rather than a notification icon. None of this is written down in the docs, and it is the only explanation for "I set it and nothing happened". Two more deliberate decisions: permission is requested only from a button press, never on page load (the most annoying habit of tools like this, and browsers ignore a request that is not tied to a user gesture); and a denial is never re-requested, because requestPermission then just returns denied without a prompt, so the page tells you to open the site settings beside the address bar and change it by hand. Notifications only work in a secure context (https or localhost).

Features

  • Shows the current permission state and asks for permission only from a button press, never on load
  • ⚠️ After a denial it stops asking and points you to the site settings beside the address bar to set it back to Allow
  • Send one notification with a title, body, icon URL, tag, silent and require-interaction options
  • At most two action buttons; a button missing its action or label is dropped with a warning, and most platforms outside desktop Chrome ignore them
  • ⚠️ An itemised platform note for each option: actions, requireInteraction, icon, tag, silent and images, saying where each works and where it is ignored
  • Explains the tag mechanism: a new notification with the same tag replaces the old one, and an empty tag is still a tag
  • A Close all button, with a note that it can only close notifications this page sent and that are still alive
  • A record of what this page sent, including tag and button count
  • Everything runs locally; an insecure context (http) is called out as unsupported

How to use

  1. Press Ask for permission and allow it in the browser prompt (only you can trigger this; the page will not ask on its own)
  2. Fill in a title and body, and set an icon, tag, silent, require-interaction and up to two buttons as you like
  3. Press Send notification to see it, then compare with the platform notes below to see which options were ignored
  4. If a notification lingers, press Close all; if you denied permission earlier, follow the note to set it back to Allow in site settings and reload

FAQ

Why did my action buttons not appear?
Because actions only work on some platforms: desktop Chrome and Edge support it (showing at most two), while most mobile browsers and Safari ignore actions entirely — no buttons appear and nothing errors. To see the difference, open this page in Chrome on a desktop and compare with your phone.
Why does pressing Ask again do nothing after a denial?
Once permission is denied, Notification.requestPermission() just returns denied and the browser shows no prompt. That is not this page being lazy; the browser has taken the decision away. The only way back is manual: open the site settings via the icon to the left of the address bar, find Notifications and set it to Allow, then reload this page.
Why do I see an app icon instead of the one I set?
That is Windows behaviour: it does not use the notification icon and shows the sender app icon instead. macOS and most Linux desktops do use the icon you set. So "I set an icon and do not see it" is usually platform behaviour rather than a mistake.
Why did the earlier notification disappear when I sent a similar one?
Because both used the same tag. A new notification with the same tag replaces the old one rather than stacking beside it, and an empty tag is still a tag, so untagged notifications replace each other. Give each one a distinct tag to keep several on screen.

Related tools