לא מזמן פרסמו ב Smashing רשימה של Web APIs פחות מוכרים, וביניהם גיליתי את האוצר עליו אספר לכם בפוסט הזה.

1. מה זה שיתוף תוכן

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

גם על מחשבי Desktop יש מנגנון דומה, למרות שהוא פחות מוכר והרבה פחות נתמך.

ה Web API של שיתוף תוכן פשוט מאפשר לנו להשתמש באותו דיאלוג שיתוף גם מתוך אפליקציית ווב או אתר מותאם.

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

2. איך זה עובד

שתי הפונקציות היחידות ש API הן:

1. navigator.canShare() שמחזירה האם הדפדפן תומך בשיתוף המידע מהסוג שרציתם

2. navigator.share() שפותחת את דיאלוג השיתוף

קוד? ברור. הנה הגירסה המוטמעת בקודפן:

והקוד עצמו הוא בסך הכל:

const share = async (shareData) => {
  try {
    await navigator.share(shareData);
  } catch (error) {
    console.error(error);
  }
};

const shareButton = document.querySelector("#share-button");

shareButton.addEventListener("click", () => {
    let shareData = {
      title: "you rock",
      text: "Visit https://www.tocode.co.il to find great programming resources"
    };

    share(shareData);
});

3. מגבלות

ל API יש מספר מגבלות שכדאי להכיר:

1. אפשר להפעיל את הפונקציה share רק בתגובה לאירוע שיזם המשתמש - לדוגמה לחיצה על כפתור.

2. אפשר לשתף רק מתוך אתרי https.

3. תמיכת דפדפנים יחסית מוגבלת. זה עובד טוב במובייל, כרום על חלונות וספארי במק.

האוביקט עצמו שמשתפים כולל 4 סוגי מידע שאפשר לשתף: url, text, title ו files. לא חייבים להעביר את כולם ובדוגמה שלי העברתי רק title ו text.