מתנת הנתינה
לשימוש בדור הבא של אפליקציות האינטרנט יש כמה יתרונות ברורים, שאחד מהם הוא השימוש ב- API של שיתוף הנווט. הודות למערכת יכולות עשירה המתפתחת, הנווט שבחרת מסוגל כעת להפעיל את ה- API של Web Share כדי לשתף את הפריטים הבאים:
- טקסט רגיל
- קישורים על ידי מתן כותרת
- קבצים ישירות
אם הדפדפן של המשתמש תומך ב- navigator.share החדש, אתה יכול להשתמש בתכונה זו כבר עכשיו!
זמן הדגמה!
השימוש בפונקציונליות השיתוף הוא פשוט ככל שזה נעשה, הנה דוגמה שמשמשת למעשה באתר:
<Button
className={classes.container}
aria-label={"Share this article"}
onClick={() => {
// '.share' can only by called when
// triggered by click-events to make
// sure it's the user's intention.
navigator.share?.({
title: info.title,
text: info.description,
url: `${getBaseRoute(routes.posts)}/${info.slug.current}`,
}).catch(console.error);
// Optionally virbrate slightly.
navigator.vibrate?.([30, 20, 10]);
}}>
<ShareIcon />
<Typography>{"Share"}</Typography>
</Button>
כפי שאתה יכול לראות, התקשרות חוזרת זו מפעילה את פונקציית השיתוף async (אם אפשרי) ומספקת נתונים כך שניתן יהיה להציג כתובת URL יפה + כותרת תיאורית וכותרת משנה בגליון השיתוף. הקוד המוצג משמש בגרסה מעט שונה בסוף מאמר זה. אם הדפדפן שלך תומך בשיתוף, כפתור קשור יופיע בשורה "פעולות".
היכן להשתמש
נכון לכתיבת שורות אלה, ניתן להשתמש ב- API בעיקר בגרסאות ניידות של הדפדפנים הפופולריים (Chrome, Opera, Safari) אך רק ב- Safari + Edge בשולחן העבודה. מאחר ופונקציונליות זו אינה מוגבלת לדרישות חומרה ספציפיות, אני מצפה שהתמיכה תגדל בחודשים הקרובים.
וכן, זה היה מבוא מהיר לממשק ה- API לשיתוף אינטרנט, למידע נוסף עיין בכתובת web.dev המקושרת וכן במאמרי MDN בתוספת.
- Tom
