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

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

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

Joe Medley

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

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

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

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

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

תמיכה בדפדפן

מקור

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

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

שיתוף במסגרות 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.

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

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

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

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

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

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

navigator.canShare()

תמיכה בדפדפן

מקור

navigator.share()

תמיכה בדפדפן

מקור

הצגת תמיכה ב-API

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

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

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

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

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

שיתוף קבצים

שיתוף במסגרות iframe של צד שלישי

מקרה לדוגמה: Santa Tracker

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

הצגת תמיכה ב-API

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