هبة العطاء
يتمتع استخدام الجيل التالي من تطبيقات الويب ببعض المزايا الواضحة ، أحدها استخدام واجهة برمجة تطبيقات المشاركة الخاصة بالمتصفح. بفضل مجموعة الإمكانات الغنية المتطورة باستمرار ، أصبح الملاح الذي تختاره قادرًا الآن على استدعاء Web Share API لمشاركة العناصر التالية:
- نص عادي
- الروابط من خلال توفير العنوان
- الملفات مباشرة
إذا كان متصفح المستخدم يدعم المتصفح الجديد 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>
كما ترى ، تستدعي رد الاتصال هذا وظيفة المشاركة غير المتزامنة (إن أمكن) وتوفر بعض البيانات بحيث يمكن عرض عنوان URL لطيف + عنوان وصفي وعنوان فرعي في ورقة المشاركة. يتم استخدام الكود الموضح بصيغة مختلفة قليلاً في نهاية هذه المقالة. إذا كان متصفحك يدعم المشاركة ، فسيتم عرض زر ذي صلة في قائمة "الإجراءات".
أين تستخدم
اعتبارًا من كتابة هذا التقرير ، يمكن استخدام واجهة برمجة التطبيقات في الغالب على متغيرات الأجهزة المحمولة من المتصفحات الشائعة (Chrome و Opera و Safari) ولكن فقط على Safari + Edge على سطح المكتب. نظرًا لأن هذه الوظيفة لا تقتصر على متطلبات أجهزة معينة ، أتوقع أن يزداد الدعم في الأشهر المقبلة.
ونعم ، كانت هذه مقدمة سريعة إلى Web Share API ، لمزيد من المعلومات ، راجع موقع web.dev المرتبط بالإضافة إلى مقالات MDN في الملحق.
- Tom
