אפליקציות אינטרנט יכולות להשתמש באותן יכולות שיתוף שסופקו על ידי המערכת כמו אפליקציות ספציפיות לפלטפורמה.
באמצעות Web Share API, אפליקציות אינטרנט יכולות להשתמש באותו שיתוף שסופק על ידי המערכת יכולות של אפליקציות ספציפיות לפלטפורמה. Web Share API מאפשר לאפליקציות אינטרנט לשתף קישורים, טקסט וקבצים לאפליקציות אחרות שמותקנות במכשיר באותו מכשיר בתור אפליקציות ספציפיות לפלטפורמה.
יכולות ומגבלות
התכונה 'שיתוף אינטרנט' כוללת את היכולות והמגבלות הבאות:
- אפשר להשתמש בה רק באתרים שהגישה אליהם מתבצעת באמצעות 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, פרויקט בקוד פתוח, מסורת לחגים ב-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
וספר לנו איפה אתה משתמש בו ובאיזה אופן.