Sharing is Caring: איך להשתמש ב-Web Share API בקלות!

ישנן דרכים רבות לבצע שיתוף תוכן מאתר אינטרנט כמו שילוב פלאג-אין או כתיבת הפיצ׳ר בעצמכם, אבל זה עדיין לא מספיק טוב, אם אנחנו המפתחים יכולים לחסוך להמשתמש להוריד קוד javascript נוסף, זה מעולה!.

Web Share API נועד לעזור למפתחים לשלב באתר שלהם אפשרות לשיתוף native, מה זאת אומרת native? זה אומר שדרך API אנחנו נפעיל פונקציונליות ששייכת למערכת ההפעלה, מן trigger כזה לדיאלוג השיתוף המובנה.

לפני שנתחיל להסביר ולהדגים יש כמה דגשים:

• האתר צריך לפעול על HTTPS (אל דאגה בפיתוח על localhost ה-API עובד 🤘)
• הפונקציה navigator.share חייב להיקרא בעקבות אירוע שנוצר על ידי המשתמש כמו לחיצה על כפתור, אם תנסו להפעיל את הפונקציה בpage-load, זה פשוט לא יעבוד.

בראש ובראשונה אנחנו צריכים לבדוק האם הדפדפן של המשתמש תומך ב-Web Share API, ואת זה נוכל לבדוק בצורה הבאה:

if (navigator.share) {
  // we can use the Web Share API
} else {
  // we can not use the Web Share API :(
}

דבר נוסף שחשוב לדעת הוא שה-Web Share API הוא promise-based, שזה אומר שניתן לשרשר פונקציות כמו then ן-catch על מנת להתמודד עם הצלחה וכישלון.

יש לנו אפשרות להעביר לפונקציית ה-share אובייקט שיכיל url או text ויש אפשרות גם לצרף title בצורה הבאה:

const shareBtn = document.querySelector('.share-btn');

shareBtn.addEventListener('click', () => {
  if (navigator.share) {
    navigator.share({
      title: 'My awesome post!',
      text: 'This post may or may not contain the answer to the universe',
      url: window.location.href
    }).then(() => {
      console.log('Thanks for sharing!');
    })
    .catch(err => {
      console.log(`Couldn't share because of`, err.message);
    });
  } else {
    console.log('web share not supported');
  }
});

תמיכה בדפדפנים

ל-Web Share API אין תמיכה מזהירה כפי שהייתם יכולים לדמיין, בדפדפן ה-chrome למערכת ההפעלה אנדרואיד ישנה תמיכה מלאה מגרסה 61, ודפדפן הדסקטופ היחיד שהפיצר הזה נתמך הוא safari.

https://caniuse.com/#feat=web-share