דף זה תורגם על ידי Cloud Translation API.

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

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

Joe Medley

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

בורר יעד שיתוף ברמת המערכת עם אפשרות ל-PWA מותקן. — בורר יעד לשיתוף ברמת המערכת, עם אפשרות ל-PWA מותקן.

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

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

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

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

מקור

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

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

שיתוף בפריטי 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>

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

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

אפליקציית Santa Tracker עם לחצן שיתוף. — לחצן השיתוף של 'איפה סנטה?'.

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

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

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

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

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

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

navigator.canShare()

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

מקור

navigator.share()

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

מקור

תמיכה ב-API

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

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

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

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

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

שיתוף קבצים

שיתוף בפריטי iframe של צד שלישי

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

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

תמיכה ב-API

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