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

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

Joe Medley
Joe Medley
GitHub

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

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

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

تشمل ميزة "المشاركة على الويب" الإمكانات والقيود التالية:

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

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

  • 89
  • 93
  • 12.1

المصدر

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

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

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

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

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

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

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

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

navigator.canShare()

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

  • 89
  • 93
  • 14

المصدر

navigator.share()

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

  • 89
  • 93
  • 12.1

المصدر

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

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

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