The Web Share API is a modern browser feature that enables users to easily share content—like URLs, text, or files—via the operating system's native sharing dialog. This is especially handy on mobile and touch-based devices, where copy-paste workflows can feel clunky.
As developers, we often rely on fast keyboard shortcuts to share links—focusing the address bar, copying, and pasting it into Slack or email. That’s efficient for us. But for less tech-savvy users or mobile-first audiences, a dedicated "Share" button powered by the Web Share API can significantly improve the user experience.
After all, linkability is a core principle of modern business web apps, users should be able to easily share, revisit, and navigate to specific app states with minimal friction.
Here are a few situations where the Web Share API shines:
- Touchscreen devices, especially phones and tablets
- Deep linking: Sharing a direct URL to a specific item or view in your app
- Non-technical users who appreciate a familiar, one-click sharing experience
Before the standard API was introduced to browsers, this kind of functionality was often implemented with varying JS libraries, like Sharee.
A Screenshot from an iPhone accessing a Vaadin Flow app sharing an OTT login URL using Web Share API. Operating systems have a good chance to provide optimal sharing suggestions based on recent activity.
Overview of the Web Share API
The Web Share API is centered around a single method: navigator.share(). You pass it an object containing optional properties like title, text, url. It returns a Promise, so you can track whether sharing was successful—if needed.
Example usage in raw JavaScript:
```javascript
navigator.share({
title: 'Check this out!',
text: 'Thought you might like this.',
url: 'https://example.com'
});
```
Note: File sharing is supported too, though in typical web app use cases, sharing URLs tends to be the most relevant.
Calling Web Share from Java code
Using the Web Share API from Java is straightforward. You can trigger it via Java by calling JavaScript in the browser through the Page.executeJs API.
Here’s what a basic utility method could look like:
```java
public static void webShare(String title, String text, String url) {
UI.getCurrent().getPage().executeJs("""
const data = {
title: $0,
text: $1,
url: $2
};
navigator.share(data);
""", title, text, url);
}
```
Viritin add-on includes a more complete Web Share implementation with graceful fallback and error handling. For instance, it detects unsupported browsers and offers alternatives like copying the link to the clipboard.
Caveats and browser compatibility
Support for the Web Share API is strong across modern mobile and desktop browsers—except Firefox, where it remains experimental and often hidden behind a flag. In some regions (e.g., Germany), it's still commonly used and may not support navigator.share() out of the box. If Web Share isn't available, a good approach is to copy the link to the clipboard and inform the user with Vaadin’s Notification.show()—just like the Viritin add-on does.
Another important limitation is restriction to transient activation. Browsers require APIs like navigator.share() to be triggered by a user-initiated event—like a button click (or listeners closely related to its initiated actions). So you can’t just call it from a background thread or scheduled timer. This ensures that the sharing dialog isn't abused or shown unexpectedly to the end user.
Final thoughts
The Web Share API is a small but powerful way to improve usability, particularly for mobile users and non-technical audiences. With minimal effort, you can enhance your Vaadin Flow apps with native, familiar sharing features, making your app feel more polished and modern.
If you'd like to go beyond the basics, check out the Viritin Web Share integration for a more robust solution.