مشاركة المحتوى على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي بشكلٍ مبسط باستخدام Web Share Target API
على جهاز جوّال أو كمبيوتر مكتبي، من المفترض أن تكون المشاركة سهلة مثل النقر على الزر مشاركة، واختيار تطبيق، واختيار المستخدمين الذين تريد المشاركة معهم. على سبيل المثال، قد ترغب في مشاركة مقالة شيقة، إما من خلال إرسالها بالبريد الإلكتروني إلى الأصدقاء أو نشرها عبر تغريدة إلى العالم.
في الماضي، كان يمكن للتطبيقات الخاصة بنظام التشغيل فقط التسجيل في نظام التشغيل لتلقي حصص من التطبيقات المثبّتة الأخرى. ولكن باستخدام Web Share Target API، يمكن لتطبيقات الويب المثبَّتة التسجيل في نظام التشغيل الأساسي كهدف مشاركة لتلقّي المحتوى المشترَك.
الاطّلاع على طريقة عمل ميزة "استهداف مشاركة الويب"
- باستخدام الإصدار 76 أو الإصدارات الأحدث من Chrome على أجهزة Android، أو الإصدار 89 أو الإصدارات الأحدث من Chrome على أجهزة الكمبيوتر المكتبي، افتح العرض التوضيحي لهدف مشاركة الويب.
- انقر على تثبيت لإضافة التطبيق إلى شاشتك الرئيسية عندما يُطلب منك ذلك، أو استخدِم قائمة Chrome لإضافته إلى شاشتك الرئيسية.
- افتح أي تطبيق يتيح المشاركة، أو استخدِم زر المشاركة في التطبيق التجريبي.
- من أداة اختيار الأهداف، اختَر اختبار المشاركة على الويب.
بعد المشاركة، من المفترض أن تظهر لك كل المعلومات التي تمت مشاركتها في تطبيق الويب المستهدَف لمشاركة الويب.
تسجيل تطبيقك كهدف للمشاركة
لتسجيل تطبيقك كهدف للمشاركة، يجب أن يستوفي معايير قابلية التثبيت في Chrome. بالإضافة إلى ذلك، قبل أن يتمكّن المستخدم من مشاركة المحتوى مع تطبيقك، يجب أن يضيف التطبيق إلى الشاشة الرئيسية. ويمنع ذلك المواقع الإلكترونية من إضافة نفسها بشكل عشوائي إلى أداة اختيار نية المشاركة لدى المستخدم، ويضمن أنّه يريد المستخدمون إجراء عملية المشاركة باستخدام تطبيقك.
تعديل بيان تطبيق الويب
لتسجيل تطبيقك كهدف مشاركة، أضِف إدخال share_target إلى ملف بيان
تطبيق الويب. يطلب هذا الإجراء من نظام التشغيل تضمين تطبيقك كأحد الخيارات في أداة اختيار الأهداف. إنّ ما تضيفه إلى البيان يتحكّم في البيانات
التي سيقبلها تطبيقك. هناك ثلاثة سيناريوهات شائعة لقيمة share_target:
- قبول المعلومات الأساسية
- جارٍ قبول التغييرات في الطلب
- قبول الملفات
قبول المعلومات الأساسية
إذا كان التطبيق المستهدَف يقبل فقط المعلومات الأساسية، مثل البيانات والروابط
والنص، أضِف ما يلي إلى ملف manifest.json:
"share_target": {
"action": "/share-target/",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
إذا كان تطبيقك يتضمّن مخططًا لعنوان URL للمشاركة، يمكنك استبدال القيم params بمعلمات طلب البحث الحالية. على سبيل المثال، إذا كان body بدلاً من text يُستخدَم في body
مخطط مشاركة عنوان URL، يمكنك استبدال "text": "text" بـ "text":
"body".
وتكون القيمة method التلقائية هي "GET" إذا لم يتم توفيرها. يشير حقل enctype، الذي لم يتم
عرضه في هذا المثال، إلى نوع الترميز للبيانات.
بالنسبة إلى طريقة "GET"، يكون الإعداد التلقائي لـ enctype هو "application/x-www-form-urlencoded" ويتم تجاهله إذا تم ضبطه على أي شيء آخر.
قبول تغييرات التطبيق
إذا كانت البيانات المشترَكة تغيّر التطبيق المستهدَف بطريقة ما، مثلاً حفظ bookmarked في التطبيق المستهدَف، اضبط قيمة method على "POST" وأدرِج
حقل enctype. ينشئ المثال أدناه إشارة مرجعية في التطبيق المستهدَف،
لذلك يتم استخدام "POST" لكل من method و"multipart/form-data" للسمة enctype:
{
"name": "Bookmark",
"share_target": {
"action": "/bookmark",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"url": "link"
}
}
}
قبول الملفات
كما هو الحال مع تغييرات التطبيق، يتطلب قبول الملفات أن يكون method "POST"
وأن يكون enctype متوفّرًا. إضافةً إلى ذلك، يجب أن يكون enctype
"multipart/form-data"، كما يجب إضافة إدخال files.
يجب أيضًا إضافة صفيف files يحدِّد أنواع الملفات التي يقبلها تطبيقك. عناصر السلسلة المتعدّدة هي إدخالات تتضمّن عضوَين: حقل name وحقل accept. يأخذ الحقل accept نوع MIME أو امتداد ملف أو صفيفًا يحتوي على كليهما. من الأفضل تقديم صفيف يتضمّن كلاً من نوع
MIME وامتداد الملف لأنّ أنظمة التشغيل تختلف في نوع
الملف المفضّل لديها.
{
"name": "Aggregator",
"share_target": {
"action": "/cgi-bin/aggregate",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"url": "link",
"files": [
{
"name": "records",
"accept": ["text/csv", ".csv"]
},
{
"name": "graphs",
"accept": "image/svg+xml"
}
]
}
}
}
معالجة المحتوى الوافد
إنّ طريقة التعامل مع البيانات المشتركة الواردة متروكة لك وتعتمد على تطبيقك. على سبيل المثال:
- يمكن أن يُعدّ برنامج بريد إلكتروني مسودة رسالة إلكترونية جديدة باستخدام
titleكموضوع رسالة إلكترونية، مع تسلسلtextوurlمعًا كنص الرسالة. - يمكن أن يُعدّل تطبيق للتواصل الاجتماعي مسودة مشاركة جديدة يتجاهل فيها
title، ويستخدمtextكنص الرسالة، ويضيفurlكرابط. إذا كانtextغير متوفّر، قد يستخدم التطبيقurlفي النص أيضًا. إذا لم يكنurlمتوفّرًا، قد يفحص التطبيقtextبحثًا عن عنوان URL ويضيفه كرابط. - يمكن لتطبيق مشاركة الصور إنشاء عرض شرائح جديد باستخدام
titleكعنوان لعرض الشرائح وtextكوصف وfilesكصور لعرض الشرائح. - يمكن لتطبيق المراسلة النصية صياغة رسالة جديدة باستخدام
textوurlمعًا وحذفtitle.
معالجة حصص GET
إذا اختار المستخدم تطبيقك وكان method هو "GET" ("GET" هو القيمة الافتراضية)، سيفتح المتصفّح نافذة جديدة على عنوان URL action. ينشئ المتصفح بعد ذلك سلسلة استعلام باستخدام القيم المرمّزة بعنوان URL المقدمة في البيان.
على سبيل المثال، إذا كان تطبيق المشاركة يوفّر title وtext، تكون سلسلة طلب البحث هي ?title=hello&text=world. لمعالجة هذه العملية، استخدِم أداة معالجة حدث DOMContentLoaded
في الصفحة التي تعمل في المقدّمة وحلِّل سلسلة طلب البحث:
window.addEventListener('DOMContentLoaded', () => {
const parsedUrl = new URL(window.location);
// searchParams.get() will properly handle decoding the values.
console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});
احرِص على استخدام مشغّل الخدمات لإجراء تخزين مؤقت لصفحة action كي يتم تحميلها بسرعة وتعمل بشكل موثوق حتى إذا كان المستخدم غير متصل بالإنترنت.
Workbox هي أداة يمكنها مساعدتك في
تنفيذ ميزة "التخزين المؤقت المُسبَق" في مشغّل الخدمة.
جارٍ معالجة مشاركات POST
إذا كان method هو "POST"، كما هو الحال إذا كان تطبيقك المستهدَف يقبل bookmarkedملفًا bookmarkedملفًا محفوظًا أو ملفات مشترَكة، سيتضمّن نص طلب POST الوافد
البيانات التي تم تمريرها من خلال تطبيق المشاركة، ويتم تشفيرها باستخدام قيمة enctype
المقدَّمة في البيان.
لا يمكن للصفحة التي تعمل في المقدّمة معالجة هذه البيانات مباشرةً. بما أنّ الصفحة ترى البيانات على أنّها
طلب، فإنّها ترسلها إلى مشغّل الخدمة، حيث يمكنك اعتراضها باستخدام مستمع حدث
fetch. من هنا، يمكنك تمرير البيانات مرة أخرى إلى الصفحة التي تعمل في المقدّمة باستخدام postMessage() أو إرسالها إلى الخادم:
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
// If this is an incoming POST request for the
// registered "action" URL, respond to it.
if (event.request.method === 'POST' &&
url.pathname === '/bookmark') {
event.respondWith((async () => {
const formData = await event.request.formData();
const link = formData.get('link') || '';
const responseUrl = await saveBookmark(link);
return Response.redirect(responseUrl, 303);
})());
}
});
إثبات ملكية المحتوى الذي تمت مشاركته
احرص على التحقّق من صحة البيانات الواردة. لا يمكن ضمان أن تشارك التطبيقات الأخرى المحتوى المناسب في المَعلمة الصحيحة.
على سبيل المثال، سيكون الحقل url فارغًا على أجهزة Android لأنّه غير متاح في نظام المشاركة على Android. وبدلاً من ذلك، ستظهر عناوين URL غالبًا في
الحقل text أو أحيانًا في الحقل title.
دعم المتصفح
يمكن استخدام Web Share Target API على النحو الموضّح أدناه:
على جميع الأنظمة الأساسية، يجب تثبيت تطبيق الويب الخاص بك قبل أن يظهر كهدف محتمل لتلقّي البيانات التي تتم مشاركتها.
نماذج التطبيقات
إظهار الدعم لواجهة برمجة التطبيقات
هل تخطّط لاستخدام Web Share Target API؟ يساعد دعمك العلني فريق Chromium في تحديد الميزات ذات الأولوية وإظهار مدى أهمية توفيرها لمطوّري المتصفّحات الآخرين.
أرسِل تغريدة إلى @ChromiumDev باستخدام الهاشتاغ
#WebShareTarget
وأطلِعنا على مكان استخدامك للميزة وطريقة استخدامك لها.