تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

Joe Medley

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

أداة اختيار أهداف المشاركة على مستوى النظام مع خيار تطبيق ويب تقدّمي (PWA) مثبّت — أداة اختيار الهدف على مستوى النظام مع تطبيق ويب تقدّمي (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، عليك البحث عن علامة عنوان URL أساسي <meta> في <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

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

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

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

دعم المتصفح

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

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

navigator.canShare()

توافق المتصفّح

المصدر

navigator.share()

دعم المتصفح

المصدر

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

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

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

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

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

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

مشاركة الملفات

المشاركة في إطارات iframe تابعة لجهات خارجية

دراسة حالة عن تطبيق Santa Tracker

دعم المتصفح

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

وصلات مساعدة