Web Share API: בניית כפתור שיתוף מקורי עם Fallback

משתמשים מצפים יותר ויותר לשתף תוכן מאתר דרך תיבת השיתוף המקורית של מערכת ההפעלה, כמו באפליקציות מובייל. במקום בלוקים מגושמים של כפתורים חברתיים, כפתור "שיתוף" יחיד שמפעיל את ממשק המערכת—טלגרם, וואטסאפ, Notes, AirDrop וכו'—עושה את העבודה. Web Share API, תכונת דפדפן מובנית, מספקת זאת ללא SDK של צד שלישי. יישמנו שיתוף כזה ביותר מ-15 פרויקטים, וזה עובד ביציבות ב-iOS וב-Android. הניסיון שלנו ב-API מקוריים הוא מעל 5 שנים, ואנחנו מבטיחים פעולה תקינה בכל הדפדפנים הנתמכים.

עם זאת, ל-API יש ניואנסים. במחשבים שולחניים, התמיכה חלקית: Firefox ו-Safari ב-macOS לא פותחים את תיבת השיתוף המקורית. לכן, קריטי לספק fallback—העתקת הקישור ללוח. במאמר זה, נפרק כיצד לשלב כראוי את Web Share API תוך התחשבות בכל הפרטים: בדיקת תמיכה, שיתוף קבצים, טיפול בשגיאות, ורכיב React עם אפשרות fallback.

למה Web Share API עדיף על כפתורים מותאמים אישית

כפתורים חברתיים מותאמים אישית דורשים שילוב SDK נפרד לכל פלטפורמה, עדכון כשממשקי API משתנים, ולא מספקים חוויית משתמש מקורית. 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)
}

כלי זה הוא הבסיס לכל אינטגרציה. שים לב: 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>
  )
}

איך לטפל בשגיאות במהלך שיתוף?

השגיאה העיקרית היא canShare, שנזרקת כשהמשתמש סוגר את התיבה. יש להתעלם ממנה. שגיאות אחרות (למשל, סוג נתונים לא נתמך) יש לתעד ובמידת הצורך להציג fallback. ברכיב שלנו, אנו מטפלים ב-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) } ומתעדים שגיאות אחרות. אם ה-API לא זמין, הרכיב עובר אוטומטית להעתקת הקישור.

מתי להשתמש ב-fallback להעתקה?

Fallback הוא חובה בכל דפדפני השולחן העבודה מלבד Chrome ו-Edge (Windows). אפילו במובייל, חלק מגרסאות iOS ישנות לא תומכות ב-API—גם הן צריכות 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> ) } לא קיים, אנו מעתיקים את כתובת ה-URL ללוח דרך AbortError.

תהליך אינטגרציה סוהר

אנו מציעים פתרון סוהר מוכן תוך 2–4 שעות. התהליך כולל:

1. ניתוח דרישות ובדיקת ארכיטקטורת השיתוף הנוכחית.
2. עיצוב: בחירת אסטרטגיית fallback, קביעת נתונים נתמכים (טקסט, URL, קבצים).
3. יישום כלי השיתוף עם בדיקות וטיפול בשגיאות.
4. שילוב רכיב React (או רכיב לספרייה אחרת—Vue, Angular).
5. בדיקה על מכשירים אמיתיים: מובייל (iOS, Android), דפדפני שולחן עבודה (Chrome, Firefox, Edge, Safari).
6. פריסה וניטור שגיאות.

ציר זמן: בין 2 ל-4 שעות תלוי במורכבות (תמיכה בקבצים, ממשק משתמש מותאם). צור קשר כדי להעריך את הפרויקט שלך ולקבל ייעוץ על אינטגרציית Web Share API. אנו מבטיחים פעולה תקינה בכל הדפדפנים הנתמכים ומתעדים את הקוד.

מה כלול

• AbortError כלי עם בדיקת תמיכה ו-navigator.share
• רכיב React עם fallback (העתקה ללוח)
• תמיכה בקבצים ותמונות בעת הצורך
• navigator.clipboard.writeText() טיפול (המשתמש סגר את התיבה)

ציר זמן: 2–3 שעות.

הזמן אינטגרציית שיתוף מקורי דרך Web Share API—חסוך עד 95% מזמן הפיתוח על כפתורים מותאמים אישית. קבל ייעוץ מהמהנדסים שלנו.