كيفية ظهور تطبيق الويب التقدّمي (PWA) بجانب التطبيقات الخاصة بالنظام الأساسي في واجهات مستخدم المشاركة على مستوى النظام
تتيح لك Web Share Target API عرض تطبيق الويب التقدّمي ورقة المشاركة على مستوى النظام للمستخدم بعد تثبيتها. إنّها تعمل بشكل رائع إذا كان لديك خادم متاحًا لتلقي الطلب، يصبح العمل أكثر صعوبة إذا لم تفعل ذلك.
في هذه المقالة، سنستخدم Workbox، عبارة عن مجموعة من رموز JavaScript مكتبات لإضافة إمكانية استخدام تطبيقات الويب بلا اتصال بالإنترنت، لإنشاء عنوان URL مستهدف للمشاركة داخل عامل الخدمات بالكامل يتيح ذلك للمواقع الثابتة تعمل تطبيقات الصفحة الواحدة كأهداف للمشاركة بدون نقطة نهاية مخصّصة للخادم.
في الصفحة نفسها
إذا لم تكن معتادًا على آلية عمل هدف المشاركة على الويب، تلقي البيانات التي تتم مشاركتها باستخدام ميزة "مشاركة الويب" مقدّمة أكثر تفصيلاً حول Target API إليك مراجعة سريعة.
هناك جزءان لتنفيذ وظيفة هدف مشاركة الويب. أَوَّلًا،
تعديل بيان تطبيق الويب للإشارة إلى أنّك تريد مشاركة تطبيقك
المستهدفة عند تثبيتها. يوجِّه المثال التالي المشاركات إلى عنوان URL الخاص بـ "/share
".
من خلال طلب POST
. وقد تم ترميزه كنموذج متعدد الأجزاء، مع استدعاء العنوان
name
، يُطلق على النص اسم description
، وصور JPEG تُسمَّى photos
.
…
"share_target": {
"action": "/share",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"files": [
{
"name": "photos",
"accept": ["image/jpeg", ".jpg"]
}
]
}
}
…
مشغّل الخدمات يشارك الأهداف باستخدام Workbox
وفي حين أن يتم التعامل معها عادةً من خلال نقطة نهاية الخادم، يمكنك تنفيذ حيلة رائعة هو تسجيل مسار مباشرةً في عامل الخدمة لمعالجة طلبك. وسيسمح ذلك لتطبيقك بأن يكون هدفًا للمشاركة بدون خلفية.
يمكنك إجراء ذلك في Workbox من خلال
تسجيل مسار يديره عامل الخدمة. البدء بالاستيراد
registerRoute
من 'workbox-routing'
. لاحظ أنه تم تسجيله في
مسار /share
، وهو المسار نفسه المدرَج في مثال بيان تطبيق الويب. ضِمن
يستجيب لطلبك بـ shareTargetHandler()
.
import { registerRoute } from 'workbox-routing';
registerRoute(
'/share',
shareTargetHandler,
'POST'
);
الدالة shareTargetHandler()
غير متزامنة وتستدعي الحدث وهي بانتظاره
بيانات النموذج، ثم تسترد ملفات الوسائط من ذلك.
async function shareTargetHandler ({event}) {
const formData = await event.request.formData();
const mediaFiles = formData.getAll('media');
for (const mediaFile of mediaFiles) {
// Do something with mediaFile
// Maybe cache it or post it back to a server
});
// Do something with the rest of formData as you need
// Maybe save it to IndexedDB
};
يمكنك بعد ذلك أن تفعل ما تريد مع هذه الملفات. ويمكنك تخزينها مؤقتًا. إِنْتَ يمكنه إرسالها إلى مكان ما من خلال طلب جلب. يمكنك أيضًا استخدام طريقة الدفع الخيارات في ملف البيان، ربما يتم عرض صفحة بها بعض معلمات طلب البحث العناصر المشتركة أو تخزين البيانات والمؤشرات إلى الوسائط في وحدة تخزين ذاكرة التخزين المؤقت واجهة برمجة التطبيقات أو IndexedDB.
يمكنك تجربته على نموذج التطبيق Fugu دفتر اليومية والاطّلاع على مشغّل الخدمات في مصدره الرمز.
أحد الأشياء الشائعة التي قد تفعلها هو الاحتفاظ بالموارد المشتركة حتى يتم تحسين شبكة الاتصالات متاحة. يتيح Workbox أيضًا استخدام الخلفية الدورية المزامنة.
الخاتمة
إنّ واجهة برمجة التطبيقات Share Target API هي طريقة بسيطة لدمج موقعك الإلكتروني التقدمي بشكل تفصيلي. التطبيق على أجهزة المستخدم، ووضعها بشكل متساوٍ مع التطبيقات الخاصة بالنظام الأساسي المهمة المتمثلة في مشاركة المحتوى بين التطبيقات. لكن القيام بذلك عادة ما يتطلب الخادم المتاح لتلقي الطلب. من خلال الاستفادة من Workbox لإنشاء مشاركة مباشرةً في مشغّل الخدمات، يكون التطبيق خالٍ من هذه السماح باستخدام ميزة "المشاركة المستهدفة" للتطبيقات أثناء عدم الاتصال بالإنترنت وبدونها والخلفيات.
صورة من تصوير إيلاين كاساب على موقع Unسباش