دمج تطبيقات الويب التقدّمية (PWA) في واجهات المستخدم المدمَجة للمشاركة باستخدام Workbox

كيفية عرض تطبيقك المتوافق مع الويب بجانب التطبيقات المخصّصة للمنصة في واجهات مستخدم مشاركة على مستوى النظام

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

في هذه المقالة، سنستخدم Workbox، وهي مجموعة من مكتبات JavaScript لإضافة ميزة العمل بلا إنترنت إلى تطبيقات الويب، وذلك لإنشاء عنوان URL مستهدف للمشاركة يكون متوفّرًا بالكامل داخل مشغّل الخدمة. يتيح ذلك للمواقع الإلكترونية الثابتة والتطبيقات المكوّنة من صفحة واحدة أن تكون أهدافًا للمشاركة بدون نقطة نهاية خادم مخصّصة.

هاتف Android مع فتح درج "المشاركة من خلال"
أداة اختيار مستهدَف المشاركة على مستوى النظام مع تطبيق ويب تقدّمي مثبّت يُسمى Share Target Test كخيار

في الصفحة نفسها

إذا لم تكن على دراية بآلية عمل Web Share Target، يمكنك الاطّلاع على تلقّي البيانات المشترَكة باستخدام واجهة برمجة التطبيقات Web Share 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
};

ويمكنك بعد ذلك إجراء ما تريده بهذه الملفات. يمكنك تخزينها مؤقتًا. يمكنك إرسالها إلى مكان ما باستخدام طلب استرجاع. يمكنك أيضًا استخدام خيارات البيان الأخرى، مثل عرض صفحة تتضمّن بعض مَعلمات طلبات البحث للعناصر المشترَكة الأخرى أو تخزين البيانات والمؤشرات إلى الوسائط في Cache Storage API أو IndexedDB.

يمكنك تجربته في نموذج التطبيق Fugu Journal والاطّلاع على تنفيذ worker الخدمة في رمزه المبرمَج.

من الإجراءات الشائعة التي يمكنك اتّخاذها هي الاحتفاظ بالموارد المشتركة إلى أن تتوفّر اتصالات أفضل بالشبكة. يتيح Workbox أيضًا المزامنة الدورية في background.

الخاتمة

توفّر واجهة برمجة التطبيقات Share Target API طريقة بسيطة لدمج "تطبيق الويب التقدّمي" بدقة في أجهزة المستخدمين، ما يجعله على قدم المساواة مع التطبيقات المخصّصة للمنصة في ما يتعلّق بال tâche مهمة مشاركة المحتوى بين التطبيقات. ولكن يتطلب ذلك عادةً استخدام خادم متاح لتلقّي الطلب. من خلال الاستفادة من Workbox لإنشاء مسار مشاركة الهدف مباشرةً في مشغّل الخدمة، يصبح تطبيقك خاليًا من هذا القيود، ما يسمح لميزة "مشاركة الهدف" بالعمل مع التطبيقات بلا إنترنت وبدون الخلفيات.

صورة إيلين كاساب على Unsplash