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

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

Jeff Posnick

Joe Medley

Sam Richard

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

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

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

إذا لم تكن على دراية بكيفية عمل 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 النموذجي والاطّلاع على طريقة تنفيذ عامل الخدمة في رمز المصدر.

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

الخاتمة

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

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