الدمج مع واجهة مستخدم مشاركة نظام التشغيل مع Web Share API

يمكن لتطبيقات الويب استخدام إمكانات المشاركة نفسها التي يوفّرها النظام مثل التطبيقات المخصّصة لمنصات معيّنة.

Joe Medley

باستخدام Web Share API، يمكن لتطبيقات الويب استخدام إمكانات المشاركة نفسها التي يوفّرها النظام، مثل التطبيقات المخصّصة لمنصات معيّنة. تتيح واجهة Web Share API لتطبيقات الويب مشاركة الروابط والنصوص والملفات مع تطبيقات أخرى مثبّتة على الجهاز بالطريقة نفسها التي تستخدمها التطبيقات الخاصة بالنظام الأساسي.

ملاحظة: المشاركة هي نصف المتعة فقط. يمكن أن تكون تطبيقات الويب أيضًا أهدافًا للمشاركة، ما يعني أنّها يمكنها تلقّي البيانات والروابط والنصوص والملفات من تطبيقات الويب أو التطبيقات المخصّصة لمنصات معيّنة. يُرجى قراءة مقالة تلقّي البيانات التي تمت مشاركتها لمعرفة كيفية تسجيل تطبيقك كهدف للمشاركة.

أداة اختيار هدف المشاركة على مستوى النظام مع تطبيق ويب تقدّمي مثبَّت كخيار

الإمكانات والقيود

تتوفّر في واجهة برمجة التطبيقات Web Share الإمكانات والقيود التالية:

• ولا يمكن استخدامها إلا على موقع إلكتروني يتم الوصول إليه عبر بروتوكول HTTPS.
• إذا تمت المشاركة في إطار iframe تابع لجهة خارجية، يجب استخدام السمة allow.
• ويجب استدعاؤها استجابةً لإجراء من المستخدم، مثل النقر. ولا يمكن استدعاؤه من خلال معالج onload.
• ويمكنها مشاركة عناوين URL أو النصوص أو الملفات.

Browser Support

• 128
• 93
• 
• 12.1

Source

مشاركة روابط ونص

لمشاركة الروابط والنصوص، استخدِم طريقة 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>

دراسة حالة حول لعبة "تتبُّع بابا نويل"

زر المشاركة في لعبة "تتبُّع بابا نويل"

تتبُّع بابا نويل هو مشروع مفتوح المصدر، وهو أحد تقاليد العطلات في Google. في شهر ديسمبر من كل عام، يمكنك الاحتفال بالموسم من خلال الألعاب والتجارب التعليمية.

في عام 2016، استخدم فريق "تتبُّع بابا نويل" واجهة برمجة التطبيقات Web Share API على Android. كانت واجهة برمجة التطبيقات هذه مناسبة تمامًا للأجهزة الجوّالة. في السنوات السابقة، أزال الفريق أزرار المشاركة على الأجهزة الجوّالة لأنّ المساحة محدودة، ولم يتمكّن من تبرير وجود عدة وجهات للمشاركة.

ولكن باستخدام Web Share API، تمكّنوا من عرض زر واحد، ما أدى إلى توفير وحدات بكسل ثمينة. وتبيّن أيضًا أنّ المستخدمين شاركوا المحتوى باستخدام Web Share بنسبة تزيد عن ‎20% مقارنةً بالمستخدمين الذين لم يفعّلوا واجهة برمجة التطبيقات. انتقِل إلى تتبُّع بابا نويل للاطّلاع على Web Share أثناء العمل.

دعم المتصفح

يختلف دعم المتصفّح لواجهة Web Share API، لذا ننصحك باستخدام ميزة رصد الميزات (كما هو موضّح في عيّنات التعليمات البرمجية السابقة) بدلاً من افتراض أنّ طريقة معيّنة متوافقة.

في ما يلي نظرة عامة على مدى توفّر هذه الميزة. للحصول على معلومات تفصيلية، يُرجى اتّباع أي من روابط الدعم.

navigator.canShare()

Browser Support

• 128
• 93
• 
• 14

Source

navigator.share()

Browser Support

• 128
• 93
• 
• 12.1

Source

إظهار الدعم لواجهة برمجة التطبيقات

هل تخطّط لاستخدام Web Share API؟ يساعد دعمك العلني فريق Chromium في تحديد أولويات الميزات، كما يوضّح لمورّدي المتصفّحات الآخرين مدى أهمية توفير هذه الميزات.

أرسِل تغريدة إلى ‎@ChromiumDev باستخدام الهاشتاغ #WebShare وأخبِرنا عن مكان وكيفية استخدامك له.

روابط مفيدة

• أمثلة على Web Share
• تطبيق الويب التقدّمي Scrapbook