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

אפליקציות אינטרנט יכולות להשתמש באותן יכולות שיתוף שמספקת המערכת כמו אפליקציות ספציפיות לפלטפורמה.

Joe Medley

באמצעות Web Share API, אפליקציות אינטרנט יכולות להשתמש באותן יכולות שיתוף שמספקת המערכת כמו אפליקציות ספציפיות לפלטפורמה. ‫Web Share API מאפשר לאפליקציות אינטרנט לשתף קישורים, טקסט וקבצים עם אפליקציות אחרות שמותקנות במכשיר, באותו אופן שבו אפליקציות ספציפיות לפלטפורמה עושות זאת.

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

כלי לבחירת יעד שיתוף ברמת המערכת, עם אפליקציית PWA מותקנת כאפשרות.

יכולות ומגבלות

אלה היכולות והמגבלות של שיתוף באינטרנט:

• אפשר להשתמש בו רק באתר שהגישה אליו היא באמצעות HTTPS.
• אם השיתוף מתבצע ב-iframe של צד שלישי, צריך להשתמש במאפיין allow.
• הוא צריך להיות מופעל בתגובה לפעולה של משתמש, כמו קליק. אי אפשר להפעיל אותו באמצעות ה-handler של onload.
• הוא יכול לשתף כתובות URL, טקסט או קבצים.

Browser Support

• 128
• 93
• 
• 12.1

Source

שיתוף קישורים וטקסט

כדי לשתף קישורים וטקסט, משתמשים ב-method‏ share(), שהיא method מבוססת-promise עם אובייקט מאפיינים נדרש. כדי למנוע מהדפדפן להציג TypeError, האובייקט חייב להכיל לפחות אחד מהמאפיינים הבאים: title,‏ text,‏ url או files. לדוגמה, אתם יכולים לשתף טקסט בלי כתובת URL או להיפך. הוספת כל שלושת החברים מרחיבה את הגמישות של תרחישי השימוש. נניח שאחרי הרצת הקוד שבהמשך, המשתמש בחר באפליקציית אימייל כיעד. הפרמטר title יכול להפוך לנושא האימייל, הפרמטר text לגוף ההודעה והקבצים לקבצים המצורפים.

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

אם באתר שלכם יש כמה כתובות URL לאותו תוכן, שתפו את כתובת ה-URL הקנונית של הדף במקום את כתובת ה-URL הנוכחית. במקום לשתף את document.location.href, צריך לחפש תג של כתובת URL קנונית <meta> ב-<head> של הדף ולשתף אותו. כך חוויית המשתמש תהיה טובה יותר. היא לא רק מונעת הפניות אוטומטיות, אלא גם מבטיחה שכתובת URL משותפת תציג את חוויית המשתמש הנכונה ללקוח מסוים. לדוגמה, אם חבר משתף כתובת URL לנייד ואתם מסתכלים עליה במחשב, אתם אמורים לראות גרסה למחשב:

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

שיתוף קבצים

כדי לשתף קבצים, קודם צריך לבדוק אם יש navigator.canShare() ולהפעיל אותו. לאחר מכן, כוללים מערך של קבצים בקריאה ל-navigator.share():

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

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

שיתוף ב-iframe של צד שלישי

כדי להפעיל את פעולת השיתוף מתוך iframe של צד שלישי, מטמיעים את ה-iframe עם המאפיין allow עם הערך web-share:

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

מקרה לדוגמה: "איפה סנטה?"

כפתור השיתוף של "איפה סנטה?".

איפה סנטה?, פרויקט קוד פתוח, הוא מסורת חג ב-Google. בכל חודש דצמבר, אתם יכולים לחגוג את העונה עם משחקים וחוויות חינוכיות.

בשנת 2016, הצוות של "איפה סנטה?" השתמש ב-Web Share API ב-Android. ה-API הזה התאים באופן מושלם לנייד. בשנים קודמות, הצוות הסיר את כפתורי השיתוף בנייד כי המקום מוגבל, ולא הייתה הצדקה לכמה יעדי שיתוף.

אבל באמצעות Web Share API, הם הצליחו להציג כפתור אחד, וכך לחסוך פיקסלים יקרים. הם גם גילו שמשתמשים שיתפו באמצעות Web Share ב-20% יותר מאשר משתמשים שה-API לא הופעל אצלם. כדי לראות את Web Share בפעולה, היכנסו אל איפה סנטה?.

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

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

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

navigator.canShare()

Browser Support

• 128
• 93
• 
• 14

Source

navigator.share()

Browser Support

• 128
• 93
• 
• 12.1

Source

הבעת תמיכה ב-API

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

שולחים ציוץ אל ‎@ChromiumDev עם ההאשטאג #WebShare ומספרים לנו איפה ואיך אתם משתמשים בו.

קישורים מועילים

• הדגמות של Web Share
• Scrapbook PWA