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

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

ג'ו מדלי
ג'ו מדלי
GitHub

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

בורר יעדי שיתוף ברמת המערכת עם PWA מותקן.
בורר יעדי שיתוף ברמת המערכת עם PWA מותקן כאופציה.

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

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

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

תמיכה בדפדפן

  • 89
  • 93
  • 12.1

מקור

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

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

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

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

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

תוכלו לראות את זה בפעולה בהדגמה ב-Glitch ולצפות בקוד המקור. אם לא תציינו את המאפיין, תופיע ההודעה Failed to execute 'share' on 'Navigator': Permission denied ב-NotAllowedError.

מקרה שממחיש הטמעה של סנטה מעקב

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

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

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

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

תמיכת דפדפן

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

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

navigator.canShare()

תמיכה בדפדפן

  • 89
  • 93
  • 14

מקור

navigator.share()

תמיכה בדפדפן

  • 89
  • 93
  • 12.1

מקור

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

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

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