Реалізація Web Share API на сайті

Реалізація Web Share API на сайті

Web Share API викликає нативний діалог шеринга операційної системи — той самий, що відкривається при шерингу з мобільного додатку. Користувач бачить свій список програм: Telegram, WhatsApp, Notes, пошта, AirDrop. Ніяких кастомних кнопок для кожної соцмережі, ніяких вспливаючих вікон з іконками.

Підтримка: iOS Safari 12.1+, Android Chrome 61+, Edge 79+. На десктопі підтримка часткова — працює в Chrome/Edge на Windows, не працює в Firefox та Safari macOS (без розширень).

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

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)
}

Шеринг файлів

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>
  )
}

Що входить у роботу

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

Строк: 2–3 години.