Web Share API: делаем нативную кнопку «Поделиться» с fallback

Пользователи всё чаще ожидают, что поделиться контентом с сайта можно через нативный диалог операционной системы — как в мобильных приложениях. Вместо громоздких блоков с десятком кнопок соцсетей достаточно одной кнопки «Поделиться», которая вызывает системный интерфейс: Telegram, WhatsApp, Notes, AirDrop и другие приложения. Web Share API — встроенная возможность браузера — даёт это без установки сторонних SDK. Мы уже реализовали такой шаринг для 15+ проектов, и он стабильно работает на iOS и Android. Наш опыт в нативных API — более 5 лет, и мы гарантируем корректную работу на всех поддерживаемых браузерах.

Однако у API есть особенности. На десктопах поддержка неполная: в Firefox и Safari macOS нативный диалог не открывается. Поэтому критически важно предусмотреть fallback — копирование ссылки в буфер обмена. В этой статье разберём, как правильно интегрировать Web Share API с учётом всех нюансов: проверка поддержки, шаринг файлов, обработка ошибок и React-компонент с запасным вариантом.

Почему Web Share API лучше кастомных кнопок?

Кастомные кнопки соцсетей требуют интеграции отдельного SDK для каждой платформы, обновления при изменениях API и не дают нативного UX. Web Share API решает всё одной функцией:

API встроено в браузер, не требует загрузки скриптов и работает даже офлайн (если страница загружена).

Что такое Web Share API и как он работает?

Web Share API — это встроенный метод браузера navigator.share(). Вы передаёте объект с полями title, text, url или files, и браузер открывает системный диалог выбора приложений. Согласно спецификации MDN, API поддерживается на iOS Safari 12.1+, Android Chrome 61+, Edge 79+. На десктопных Chrome и Edge (Windows) API работает, Firefox и Safari macOS — нет.

Какие данные можно шарить через Web Share API?

API позволяет шарить:

• Текст и URL (обязательно хотя бы одно)
• Файлы: изображения, PDF, видео — через свойство files
• Данные с Canvas после конвертации в Blob

Для проверки поддерживаемого типа данных используйте navigator.canShare(). Если данные не поддерживаются, выбросится ошибка — её нужно перехватить и выполнить fallback.

Базовый шаринг

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 не поддерживается') } // Проверка, что браузер поддерживает конкретный набор данных if (!navigator.canShare(data)) { throw new Error('Этот тип контента не поддерживается для шаринга') } await navigator.share(data) } 

Эта утилита — база для любой интеграции. Обрати внимание: canShare необязателен, но без него ошибка может возникнуть только во время вызова.

Шаринг файлов

async function shareFile(file: File, title?: string): Promise<void> { const data: ShareData = { files: [file], title } if (!navigator.canShare?.(data)) { // Fallback: предложить скачать файл 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) } // Шаринг Canvas как изображения 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('Ошибка'))), 'image/png') ) const file = new File([blob], filename, { type: 'image/png' }) await shareFile(file, title) } 

React-компонент с 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) { // Пользователь отменил — не считается ошибкой 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 ? 'Поделиться' : copied ? 'Ссылка скопирована' : 'Копировать ссылку'} </button> ) } 

Как обработать ошибки при шаринге?

Основная ошибка — AbortError, когда пользователь закрывает диалог. Её следует игнорировать. Другие ошибки (например, неподдерживаемый тип данных) нужно логировать и, при необходимости, показывать fallback. В нашем компоненте мы уже обработали AbortError, а остальные ошибки логируем. Если API недоступно, компонент автоматически переключается на копирование ссылки.

Когда использовать fallback для копирования?

Fallback обязателен на всех десктопных браузерах, кроме Chrome и Edge (Windows). Даже на мобильных устройствах некоторые старые версии iOS не поддерживают API — для них также нужен fallback. Мы реализуем автоматическое определение поддержки: если navigator.share не существует, копируем URL в буфер обмена через navigator.clipboard.writeText().

Процесс работы над интеграцией под ключ

Мы предлагаем готовое решение «под ключ» за 2–4 часа. Процесс включает:

1. Анализ требований и аудит текущей архитектуры шаринга.
2. Проектирование: выбор стратегии fallback, определение поддерживаемых данных (текст, URL, файлы).
3. Реализация утилиты share с проверками и обработкой ошибок.
4. Интеграция React-компонента (или компонента для другой библиотеки — Vue, Angular).
5. Тестирование на реальных устройствах: мобильные (iOS, Android), десктопные браузеры (Chrome, Firefox, Edge, Safari).
6. Деплой и мониторинг ошибок.

Сроки: от 2 до 4 часов в зависимости от сложности (поддержка файлов, кастомный UI). Свяжитесь с нами, чтобы оценить ваш проект и получить консультацию по интеграции Web Share API. Мы гарантируем корректную работу на всех поддерживаемых браузерах и документируем код.

Что входит в работу

Утилита share с проверкой поддержки и canShare, React-компонент с fallback (копирование в буфер), поддержка файлов и изображений при необходимости, обработка AbortError (пользователь закрыл диалог).

Срок: 2–3 часа.

Закажите интеграцию нативного шаринга через Web Share API — сэкономьте до 95% времени на разработку кастомных кнопок. Получите консультацию наших инженеров.