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

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

Jeff Posnick

Joe Medley

Sam Richard

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

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

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

على الصفحة نفسها

إذا لم تكن على دراية بكيفية عمل استهداف مشاركة الويب، يمكنك الاطّلاع على مقدّمة تفصيلية من خلال تلقّي البيانات التي تمت مشاركتها باستخدام Web Share 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 Journal والاطّلاع على تنفيذ مشغّل الخدمات في الرمز المصدري للتطبيق.

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

الخلاصة

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

تصوير إيلاين كساب على Unسبلاش