Web Share API: Building a Native Share Button with Fallback

Users increasingly expect to share content from a website via the OS native share dialog, like in mobile apps. Instead of bulky social button blocks, a single "Share" button invoking the system interface—Telegram, WhatsApp, Notes, AirDrop, etc.—does the trick. The Web Share API, a built-in browser feature, provides this without third-party SDKs. We have implemented such sharing for 15+ projects, and it works stably on iOS and Android. Our experience in native APIs is over 5 years, and we guarantee correct operation on all supported browsers.

However, the API has nuances. On desktops, support is incomplete: Firefox and Safari macOS do not open the native dialog. Therefore, it's critical to provide a fallback—copying the link to the clipboard. In this article, we'll break down how to properly integrate the Web Share API considering all details: support check, file sharing, error handling, and a React component with a fallback option.

Why Web Share API beats custom buttons

Custom social buttons require integrating separate SDKs for each platform, updating when APIs change, and don't provide native UX. Web Share API solves everything with one function:

The API is built into the browser, requires no script loading, and works even offline (if the page is loaded).

What is Web Share API and how does it work?

Web Share API is the built-in browser method navigator.share(). You pass an object with title, text, url, or files, and the browser opens the system dialog to choose an app. According to the MDN specification, the API is supported on iOS Safari 12.1+, Android Chrome 61+, Edge 79+. On desktop Chrome and Edge (Windows), the API works; Firefox and Safari macOS do not.

What data can be shared via Web Share API?

The API allows sharing:

• Text and URL (at least one required)
• Files: images, PDF, videos—via the files property
• Canvas data after conversion to Blob

To check which data types are supported, use navigator.canShare(). If the data is not supported, an error is thrown—it must be caught and a fallback executed.

Basic sharing

interface ShareData { title?: string text?: string url?: string files?: File[] } async function share(data: ShareData): Promise<void> { if (!navigator.share) { throw new Error('Web Share API not supported') } // Check that the browser supports the specific data set if (!navigator.canShare(data)) { throw new Error('This content type is not supported for sharing') } await navigator.share(data) } 

This utility is the foundation for any integration. Note: canShare is optional, but without it, the error may only occur during the call.

File sharing

async function shareFile(file: File, title?: string): Promise<void> { const data: ShareData = { files: [file], title } if (!navigator.canShare?.(data)) { // Fallback: offer to download the file const url = URL.createObjectURL(file) const a = document.createElement('a') a.href = url a.download = file.name a.click() URL.revokeObjectURL(url) return } await navigator.share(data) } // Sharing Canvas as image async function shareCanvas( canvas: HTMLCanvasElement, filename: string, title?: string ): Promise<void> { const blob = await new Promise<Blob>((resolve, reject) => canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('Conversion error'))), 'image/png') ) const file = new File([blob], filename, { type: 'image/png' }) await shareFile(file, title) } 

React component with fallback

interface ShareButtonProps { url: string title?: string text?: string fallbackCopy?: boolean } function ShareButton({ url, title, text, fallbackCopy = true }: ShareButtonProps) { const [copied, setCopied] = useState(false) const supportsShare = typeof navigator !== 'undefined' && 'share' in navigator const handleShare = async () => { if (supportsShare) { try { await navigator.share({ url, title, text }) } catch (e) { // User cancelled — not an error if (e instanceof Error && e.name !== 'AbortError') { console.error('Share error:', e) } } return } if (fallbackCopy) { await navigator.clipboard?.writeText(url) setCopied(true) setTimeout(() => setCopied(false), 2000) } } return ( <button onClick={handleShare}> {supportsShare ? 'Share' : copied ? 'Link copied' : 'Copy link'} </button> ) } 

How to handle errors during sharing?

The primary error is AbortError, thrown when the user closes the dialog. It should be ignored. Other errors (e.g., unsupported data type) should be logged and, if necessary, a fallback shown. In our component, we handle AbortError and log other errors. If the API is unavailable, the component automatically switches to copying the link.

When to use fallback for copying?

Fallback is mandatory on all desktop browsers except Chrome and Edge (Windows). Even on mobile, some older iOS versions do not support the API—they also need a fallback. We implement automatic detection: if navigator.share does not exist, we copy the URL to the clipboard via navigator.clipboard.writeText().

Turnkey integration process

We offer a ready-made turnkey solution in 2–4 hours. The process includes:

1. Requirements analysis and audit of the current sharing architecture.
2. Design: choosing fallback strategy, determining supported data (text, URL, files).
3. Implementation of the share utility with checks and error handling.
4. Integration of a React component (or component for another library—Vue, Angular).
5. Testing on real devices: mobile (iOS, Android), desktop browsers (Chrome, Firefox, Edge, Safari).
6. Deployment and error monitoring.

Timeline: from 2 to 4 hours depending on complexity (file support, custom UI). Contact us to evaluate your project and get a consultation on Web Share API integration. We guarantee correct operation on all supported browsers and document the code.

What's included

• share utility with support check and canShare
• React component with fallback (clipboard copy)
• File and image support when needed
• AbortError handling (user closed dialog)

Timeline: 2–3 hours.

Order native sharing integration via Web Share API—save up to 95% of development time on custom buttons. Get a consultation from our engineers.