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

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

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

Joe Medley

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

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

دعم المتصفح

المصدر

navigator.share()

دعم المتصفح

المصدر

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

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

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

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

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

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

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

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

دراسة حالة حول Santa Tracker

دعم المتصفح

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

وصلات مساعدة