ربط تطبيقات الويب التقدّمية وتطبيقات الويب المثبَّتة بإضافات Chrome

Demián Renzulli

بصفتك مطوّر ويب، من أفضل الممارسات تصميم تطبيقاتك باستخدام نموذج الأمان الأقل ثقةً، مثل تطبيق الويب التقدّمي (PWA). يؤدي هذا الأسلوب إلى زيادة مدى وصولك إلى الحد الأقصى، وتقليل النفقات العامة المتعلقة بالأمان التي عليك إدارتها، وتوفير أكبر قدر من المرونة لكل من المطوّرين والمستخدمين. ومع ذلك، بما أنّ الويب مصمّم ليكون آمنًا تلقائيًا، فإنّ نموذج الأمان المحافظ يقيّد بشكل طبيعي الوصول إلى نظام التشغيل وبعض واجهات برمجة التطبيقات القوية للأجهزة.

تحلّ "تطبيقات الويب المعزولة" (IWA) هذه المشكلة من خلال توفير نموذج تطبيقات معزول ومجمّع ومحدّد الإصدار وموقّع وموثوق به للغاية، ويتم إنشاؤه استنادًا إلى منصة الويب. ومع ذلك، قبل الانتقال إلى تطبيق ويب معزول (IWA)، من المفيد التفكير في خطوة أكثر تدريجية، وهي ربط PWA بإضافة Chrome. تتيح هذه الطريقة لتطبيقك استخدام واجهات برمجة تطبيقات الإضافات ذات المستوى الأدنى من خلال تمرير الرسائل بشكل آمن، وهي متاحة في بيئات ChromeOS المُدارة، مثل جلسات المستخدم المُدارة أو "جلسات الضيف المُدارة" أو وضع Kiosk. يوضّح المخطط التالي هذا النهج التدريجي: بدءًا بتطبيق ويب عادي، وإضافة الإمكانات ليصبح تطبيق ويب تقدّميًا قابلاً للتثبيت، وأخيرًا استكشاف مسار تطبيق الويب التقدّمي و"إضافة Chrome" لإتاحة واجهات برمجة تطبيقات إضافية.

إذا كان تطبيقك يتطلّب إمكانات متقدّمة تظل غير متاحة حتى مع واجهات برمجة التطبيقات الخاصة بإضافات Chrome، مثل الإطار الخاضع للتحكّم أو Direct Sockets API، فإنّ أفضل مسار للمضي قدمًا هو نقل التطبيق إلى تطبيق ويب معزول (IWA). ومع ذلك، على الرغم من أنّ تطبيقات الويب المثبَّتة تتيح استخدام ميزات ويب جديدة وفعّالة، قد تظل بحاجة إلى واجهات برمجة تطبيقات معيّنة على مستوى الجهاز لا تتوفّر إلا في إضافات Chrome، مثل chrome.runtime.restart() لإعادة تشغيل جهاز ChromeOS في وضع Kiosk. لحسن الحظ، يمكنك ربط تطبيق ويب مثبَّت (IWA) بإضافة Chrome باستخدام الأسلوب نفسه تمامًا كما هو الحال مع تطبيقات الويب التقدّمية (PWA). يتم تناول هذه التقنية في الخطوات التالية.

الخطوات التفصيلية لعملية التنفيذ

تفعيل إضافة المزاملة

يتم نشر الإضافات من خلال "وحدة تحكّم مشرف Chrome". استنادًا إلى البيئة المستهدَفة، عليك ضبط هذا الإعداد في القسم المناسب (على سبيل المثال، انتقِل إلى الأجهزة > Chrome > التطبيقات والإضافات > تطبيقات Kiosk لوضع Kiosk، أو علامات التبويب ذات الصلة المستخدمون والمتصفّحات أو جلسات الضيوف المُدارة). يمكنك استضافة الإضافة بنفسك على رابط متاح للجميع أو استضافتها مباشرةً في "سوق Chrome الإلكتروني". للحصول على تعليمات أكثر تفصيلاً حول إدارة الإضافات، يُرجى الرجوع إلى المستندات الرسمية.

تنفيذ تمرير الرسائل

إعداد الإضافة

لتلقّي الرسائل والردّ عليها من تطبيق الويب، يجب عرض نص برمجي يعمل في الخلفية يستمع إلى الرسائل الواردة من العميل (تطبيق الويب)، ثم ينقل هذه الطلبات إلى طلب بيانات مطابق من واجهة برمجة التطبيقات. في المثال التالي، يتم توجيه طلب عبر وكيل لإعادة تشغيل جهاز ChromeOS عندما يرسل تطبيق الويب عنصر رسالة مخصّصًا يحتوي على methodName بقيمة callRestart.

Background.js

// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
  if (request.methodName == 'callRestart') {
    chrome.runtime.restart();
  }
});

يمكن ضبط بيان الإضافة للسماح بإجراء عمليات استدعاء خارجية للدوال في الإضافة باستخدام المفتاح externally_connectable⁠⁠ الذي يحدّد المواقع الإلكترونية والإضافات المسموح لها باستدعاء الطرق في الإضافة. يمكنك الاطّلاع على مزيد من المعلومات حول إضافات Chrome وManifest V3 في المستندات الرسمية⁠⁠.

إذا كنت تتصل من خلال تطبيق ويب تقدّمي (PWA)، عليك إدراج نطاق HTTPS العادي الذي يستضيف تطبيقك ضمن مصفوفة matches. في ما يلي مثال على بيان تم إعداده لتطبيق ويب تقدّمي (PWA) يعمل في وضع Kiosk:

Manifest.json

{
  "manifest_version": 3,
  "name": "Restart your kiosk app",
  "version": "1.0",
  "description": "This restarts your ChromeOS device.",
  "background": {
    "service_worker": "background.js"
  },
  "externally_connectable": {
    "accepts_tls_channel_id": false,
    "matches": [
      "*://developer.chrome.com/*"
    ]
  }
}

إذا كنت تتصل من خلال "تطبيق ويب معزول" (IWA)، تكون الآلية هي نفسها تمامًا، ولكن يتغير مخطط عنوان URL. بما أنّ تطبيقات الويب المعزولة يتم تجميعها بشكل آمن ولا تعمل على خوادم الويب العادية، فإنّها تستخدم بروتوكولها الخاص. يجب إضافة مصدر تطبيق الويب المثبَّت باستخدام المخطط isolated-app://.

Manifest.json

{
  "manifest_version": 3,
  "name": "IWA Companion Extension",
  "version": "1.1",
  "description": "Companion extension for the IWA",
  "background": {
    "service_worker": "/scripts/background.js"
  },
  "externally_connectable": {
    "matches": [
      "isolated-app://*/*"
    ]
  }
}

هذا هو الحد الأدنى من الرموز المطلوبة في إضافة للاستماع إلى الرسائل الواردة من تطبيق ويب تقدّمي أو تطبيق ويب مثبَّت.

إعداد تطبيقات الويب التقدّمية (PWA) وتطبيقات الويب المعزولة (IWA)

لاستدعاء الإضافة من تطبيق ويب، عليك معرفة رقم تعريفها الثابت. يمكن العثور على رقم التعريف هذا في الصفحة chrome://extensions التي تظهر عند تثبيت إضافة Chrome، أو من "سوق Chrome الإلكتروني" بعد تحميل الإضافة. يتيح ذلك لتطبيق الويب تحديد الامتداد الدقيق الذي سيتم التواصل معه. بعد ذلك، استدعِ الدالة chrome.runtime.sendMessage⁠⁠ وأدخِل معرّف الإضافة مع رسالة لإرسالها إلى الإضافة.

const STATIC_EXTENSION_ID = 'abcdefghijklmnopqrstuvwxyz';
// found from chrome extensions page of chrome web store.
const callExtensionAPI = function (method) {
  chrome.runtime.sendMessage(STATIC_EXTENSION_ID, {
    methodName: method,
  });
};
callExtensionAPI('callRestart');

لمزيد من المعلومات حول ربط تطبيقات الويب بالإضافات لتمرير الرسائل، يُرجى الرجوع إلى مستندات الإضافات⁠⁠.

عرض توضيحي

للاطّلاع على هذا التنفيذ عمليًا، يمكنك استكشاف مستودع IWA Kitchen Sink. يعمل هذا المشروع كبيئة تجريبية شاملة لمختلف إمكانات تطبيقات الويب المعزولة، ويتضمّن عروضًا توضيحية لواجهات برمجة التطبيقات التي تتطلّب مستوى ثقة عاليًا، مثل Direct Sockets وControlled Frame. ويوفّر أيضًا مثالاً كاملاً وعاملاً على الربط بين تطبيق الويب المثبَّت وإضافة Chrome. يتضمّن المستودع إضافة مصاحبة نموذجية وواجهة ويب مخصّصة توضّح كيفية استخدام ميزة "تمرير الرسائل الآمن" لتفعيل طرق حصرية للإضافة. على سبيل المثال، يمكنك اختبار جلب معلومات الملف الشخصي للمستخدم باستخدام واجهة برمجة التطبيقات chrome.identity.getProfileUserInfo() مباشرةً من "تطبيق الويب المعزول".

الخاتمة

يتيح ربط تطبيقات الويب بإضافة Chrome مسارًا آمنًا وتدريجيًا للاستفادة من إمكانات الجهاز التي تشبه التطبيقات الأصلية. أثناء تصميم بنية تطبيقك، ضَع النقاط الرئيسية التالية في اعتبارك:

1. البدء بالويب: يمكنك ضبط تطبيق الويب التقدمي (PWA) كخيار تلقائي لتحقيق أفضل مدى وصول وأقل تكلفة أمان.
2. توفير ميزات إضافية باستخدام الإضافات: للحصول على ميزات مدمجة بشكل كبير على مستوى نظام التشغيل (مثل إعادة تشغيل الجهاز في وضع Kiosk)، يمكنك نشر إضافة Chrome مصاحبة وربطها بتطبيقك باستخدام تمرير الرسائل الآمن.
3. الترقية إلى تطبيقات الويب المعزولة عند الحاجة فقط: استخدِم تطبيقات الويب المعزولة عندما تحتاج إلى واجهات برمجة تطبيقات تتطلّب مستوى أمان عاليًا، مثل Direct Sockets أو Controlled Frame أو أي من واجهات برمجة التطبيقات الأخرى المخصّصة لتطبيقات الويب المعزولة.