Користувачі все частіше очікують, що поділитися контентом з сайту можна через нативний діалог операційної системи — як у мобільних застосунках. Замість громіздких блоків з десятком кнопок соцмереж достатньо однієї кнопки «Поділитися», яка викликає системний інтерфейс: 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 вирішує все однією функцією:
| Критерій | Web Share API | Кастомні кнопки соцмереж |
|---|---|---|
| Кількість коду | 1 функція | ~10 різних інтеграцій |
| Підтримка файлів | Так | Ні або складно |
| Нативний UX | Так | Ні |
| Робота на десктопі | Частково (Chrome, Edge) | Так (якщо є SDK) |
| Обслуговування | Одна точка | N точок при оновленні 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 години. Процес включає:
- Аналіз вимог та аудит поточної архітектури шарінгу.
- Проектування: вибір стратегії fallback, визначення підтримуваних даних (текст, URL, файли).
- Реалізація утиліти share з перевірками та обробкою помилок.
- Інтеграція React-компонента (або компонента для іншої бібліотеки — Vue, Angular).
- Тестування на реальних пристроях: мобільні (iOS, Android), десктопні браузери (Chrome, Firefox, Edge, Safari).
- Деплой та моніторинг помилок.
| Етап | Опис | Приблизні трудозатрати |
|---|---|---|
| Аналіз | Аудит поточних кнопок, визначення сценаріїв | 30–60 хв |
| Проектування | Вибір fallback, дизайн API | 15–30 хв |
| Реалізація | Код утиліти та компонента | 60–90 хв |
| Тестування | Перевірка на пристроях | 30–60 хв |
| Деплой | Розгортання та моніторинг | 15–30 хв |
Строки: від 2 до 4 годин залежно від складності (підтримка файлів, кастомний UI). Зв'яжіться з нами, щоб оцінити ваш проєкт та отримати консультацію з інтеграції Web Share API. Ми гарантуємо коректну роботу на всіх підтримуваних браузерах і документуємо код.
Що входить в роботу
Утиліта share з перевіркою підтримки та canShare, React-компонент з fallback (копіювання в буфер), підтримка файлів та зображень за необхідності, обробка AbortError (користувач закрив діалог).
Строк: 2–3 години.
Замовте інтеграцію нативного шарінгу через Web Share API — заощадьте до 95% часу на розробку кастомних кнопок. Отримайте консультацію наших інженерів.