Vaadin developers are no strangers to the Notification component. It has for almost two decades served as a reliable way to notify users about important events—whether it’s the success or failure of an operation or the completion of a time-consuming background task.
But the web platform has evolved from its inception. Modern browsers and operating systems nowadays also support native notifications that work across tabs, applications, and even when your web app isn’t open or mobile phone screen is closed. So how do these options stack up? When should you use which approach?
Let’s walk through and compare the three main types of notification options available to modern web applications.
1. Vaadin Notification Component
Vaadin’s built-in Notification is a Web Component (with Java API!) that provides a simple and powerful way to show in-app messages. It:
- Is rendered using standard DOM elements and styled with CSS.
- Can be positioned anywhere in the UI and styled freely.
- Can contain other Vaadin components.
- Requires no permissions or approvals from the user.
Limitations:
- Only visible when the user is actively viewing your web application.
- If the user has switched tabs or minimized the window, the message will likely be missed.
Best for:
- Quick UI feedback (e.g., form submission errors, success confirmations).
- Situations where the user is already engaged with the app.
2. Web Notifications API
The Web Notifications API is a browser-based interface to the operating system's native notification system. It allows your app to display notifications outside the browser window.
Key characteristics:
- Requires user permission (usually requested on first use).
- Accessible via a JavaScript API.
- Delivered via the browser but rendered by the OS, which may display them differently across platforms.
Integration in Vaadin Flow:
- Though Vaadin Flow doesn’t currently provide built-in wrappers, using them from Java is possible via JS interop.
- The Viritin add-on offers a basic integration that you can extend or copy as needed. See this online demo to test how it works. The demo also shows how our application code could choose between Vaadin Notification and Web Notification, based on the current visibility/activity of the browser window. There are also other add-ons that support older Vaadin versions.
Gotchas:
- When going beyond sharing simple messages and URLs, feature availability and appearance may vary significantly across OS/browser combinations.
- Testing on multiple platforms is essential for production apps.
Best for:
- Reminders, alerts, or system messages when the user is still on your site but may have switched tabs.
3. Push Notifications (via Service Workers)
Push Notifications are not a single API, but a combination of:
- Notifications API – shows the message, discussed above.
- Push API – receives messages from a server. This is bit different than Push in Vaadin lingo.
- Service Workers – acts as a “background thread” for the web app.
The power of “Web Push Notifications” comes from the fact that they work even if the browser window is closed and a possible server session is closed.
How it works:
- Your server sends the message to a third-party relay service (managed by the browser/OS vendor).
- The message is delivered to the user's device and shown as a native notification.
- Clicking it can launch your app or bring it into focus.
Vaadin Support:
- Vaadin Flow offers helper utilities to ease the setup in pure Java. See Web Push Notification configuration guide.
Platform caveats:
- A lot more complex (creating cryptography keys, saving subscriptions of individual users etc) to set up than the two other options and still, it might be that the user denies your notifications.
- On iOS, Push Notifications only work if the app is installed as a PWA (aka added to the home screen). On the other hand, you and your end user will anyway benefit from getting into PWAs.
- Some features may still behave slightly differently depending on the browser and OS as discussed in the Web Notification part.
Best for:
- Alerts that should reach the user regardless of app state.
- Messaging and scheduling apps.
- Notifications triggered from long lasting or scheduled backend services.
Final thoughts: Which should you use?
Use Case |
Vaadin Notification |
Web Notifications API |
Web Push |
In-app status updates |
✅ |
🚫 |
🚫 |
Cross-tab/tab-hidden alerts |
🚫 |
✅ |
✅ |
Notifications when browser is closed |
🚫 |
🚫 |
✅ |
No user permission required |
✅ |
🚫 |
🚫 |
Easy to implement |
✅ |
⚠️ (via JS interop) |
❌ |
Each approach has its strengths. Use Vaadin Notifications for instant UI feedback, Web Notifications when you need lightweight alerts outside the current view, and Web Push when you need full-fledged, OS-level communication—especially for real-time updates from backend systems.
You will probably get best results by combining these based on the user activity and whether the user has subscribed to your notifications or not. In case your messages are very important, it might be best to support them with old-school email or SMS notifications.