إضافات نطاقات تطبيق الويب

اعتبارًا من الإصدار 122 من Chrome، يمكنك الاشتراك في الإصدار التجريبي من scope_extensions ملف بيان التطبيق الذي يتيح عرض المواقع الإلكترونية التي تتحكّم في نطاقات فرعية متعددة ونطاقات أساسية على مستوى أعلى كتطبيق ويب واحد. يوضّح هذا المستند سبب طرح فريق Chrome لهذه الميزة والحالات التي قد تحتاج فيها إلى استخدامها.

Demián Renzulli
Thomas Steiner

نظرة عامة

تتضمّن بعض تطبيقات الويب عدة أصول، على سبيل المثال، example.com كتطبيق رئيسي، ثم space_1.example.com، …، space_n.example.com، وأحيانًا مع special-example.com، كتجارب فرعية، وكلها ضمن التطبيق الرئيسي. لهذا النوع من بنية الموقع الإلكتروني آثار في سياق تطبيقات الويب التقدمية. وتشمل القيود عدم التمكّن من مشاركة مهام الخدمة وأي نوع من الأجهزة والمساحة التخزينية المحلية والأذونات على مستوى جميع المصادر. بالإضافة إلى ذلك، يعرض التنقّل بين مصادر مختلفة في تطبيق ويب تقدّمي مستقل واجهة مستخدم للنافذة ("شريط خارج النطاق") يشير إلى أنّ المستخدِم قد خرج من تجربة تطبيق الويب التقدّمي. يمكنك الاطّلاع على كيفية تجنُّب بعض هذه المشاكل في المقالتَين تطبيقات الويب التقدّمية في المواقع الإلكترونية التي لها مصادر متعددة و إنشاء تطبيقات ويب تقدّمية متعددة على النطاق نفسه.

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

الأهداف

الهدف الرئيسي من واجهة برمجة التطبيقات Scope Extensions API هو السماح للمواقع الإلكترونية التي تتحكّم في نطاقات فرعية متعددة ونطاقات من المستوى الأعلى بالعمل كتطبيق ويب متّصل واحد عندما يتعلق الأمر بواجهة مستخدم تطبيق الويب وميزة "التقاط الروابط". على سبيل المثال، السماح للموقع الإلكتروني example.com الذي يمتد على example.com.co.uk وsupport.example.com بالعمل بقدر الإمكان كتطبيق ويب واحد

رسم بياني يعرض تطبيقًا متوافقًا مع مبادرة التطبيقات المتوافقة مع الأجهزة الجوّالة (PWA) الرئيسي والتجارب الفرعية المرتبطة به

تسمح "إضافات النطاق" لتطبيقات الويب التقدّمية متعددة المصادر بالعمل كتطبيق ويب متّصل عند التعامل مع واجهة مستخدم تطبيق الويب.

في الممارسة العملية، يُترجم ذلك إلى هدفَين أكثر تحديدًا:

  • التنقّل بين مصادر مختلفة: يجب السماح للمستخدمين بالتنقّل بين المصادر المرتبطة بدون إيقاف تجربة المستخدم من خلال استدعاء واجهة مستخدم النافذة التي تُعلم المستخدم بأنّه ينتقل بعيدًا عن تطبيق الويب التقدّمي.
  • تسجيل الروابط من مصادر مختلفة: السماح لتطبيقات الويب بتسجيل عمليات انتقال المستخدمين إلى المواقع الإلكترونية التي ترتبط بها

التنقّل ضمن النطاق من مصادر متعددة

عندما ينتقل المستخدمون بين مصادر البيانات في تطبيق ويب تقدّمي مستقل، يتم تلقائيًا عرض واجهة مستخدم نافذة تشير إلى أنّهم ينتقلون خارج تجربة تطبيق الويب التقدّمي. في Chrome، تتألف واجهة المستخدم هذه من شريط "خارج النطاق" يحتوي على عنوان URL للمصدر الجديد. ويؤدي ذلك إلى تعطيل تجربة المستخدم، لأنّ المستخدمين يتوقّعون مواصلة التنقّل داخل سياق التطبيق نفسه، ولكن قد يعتقدون أنّه يتم إخراجهم منه.

شريط "خارج النطاق" في أعلى تطبيق متوافق مع الأجهزة الجوّالة (PWA) مستقل

شريط "خارج النطاق" الذي يظهر في Chrome عندما ينتقل المستخدمون بين مصادر مختلفة في تطبيق ويب تقدّمي مستقل

باستخدام "إضافات النطاق"، لن يتم عرض واجهة مستخدم النافذة عندما ينتقل المستخدمون إلى أي من المصادر المرتبطة حتى يتم تقديم تطبيق الويب التقدّمي كتجربة موحّدة.

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

إشعار في شريط العناوين الشامل لتطبيق ويب تقدّمي مثبّت

جزء من شريط عناوين Chrome لعلامة تبويب في ChromeOS يعرض إشارة مرئية تشير إلى أنّه يمكن لتطبيق ويب تقدّمي معالجة الرابط وخيار تذكُّر هذا القرار

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

التنفيذ

يتطلّب تنفيذ توسيع النطاق إنشاء العلاقة بين المصدر الرئيسي والمصادر المرتبطة به.

الإفصاح عن قائمة المصادر المرتبطة

أضِف عضوًا في بيان تطبيق الويب scope_extensions إلى مصدر تطبيق PWA الرئيسي لمنح تطبيق الويب الإذن بتوسيع نطاقه ليشمل مصادر أخرى.

بيان تطبيق الويب (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

تأكيد عمليات الربط

يؤكد كل مصدر من المصادر المدرَجة الارتباط بتطبيق الويب باستخدام ملف إعدادات /.well-known/web-app-origin-association. يجب أن يحمل هذا الملف اسم web-app-origin-association وأن يتم عرضه في هذا الموقع الدقيق، لأنّه معرّف موارد منتظم معروف.

‎/.well-known/web-app-origin-association (المصدر المرتبط)

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

عرض توضيحي

يتألّف العرض التجريبي من موقعَين إلكترونيَّين:

لإجراء الاختبارات التالية، عليك تفعيل العلامة about://flags/#enable-desktop-pwas-scope-extensions (متوفّرة من Chrome 115 والإصدارات الأحدث).

اختبار التنقّل بين المواقع الإلكترونية

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

نافذة تطبيق الويب التقدّمي الرئيسية تتضمّن روابط ضمن النطاق وأخرى ذات نطاق موسّع

تطبيق تجريبي متوافق مع تطبيقات الويب التقدّمية يتضمّن روابط تؤدي إلى مصدر في نطاق موسّع والمصدر ليس في نطاق موسّع

التنقّل التلقائي بين المواقع الإلكترونية (ليس ضمن النطاق الموسّع)

  1. انقر على الرابط المؤدّي إلى المصدر غير المُدرَج في النطاق الموسّع داخل تطبيق الويب التقدّمي بملء الشاشة.
  2. نتيجةً لذلك، يتمّ التنقّل وعرض شريط "خارج النطاق".

نافذة تطبيق PWA الرئيسية مع شريط "خارج النطاق" بعد النقر على رابط "خارج النطاق"

شريط "خارج النطاق" الذي يظهر تلقائيًا للتنقّل بين مصادر مختلفة لتطبيق ويب تقدّمي (PWA) في الوضع المستقل

التنقّل بين مصادر مختلفة باستخدام إضافات النطاق (في النطاق الموسّع)

  1. انتقِل مرة أخرى إلى الصفحة الرئيسية للتطبيق المتوافق مع الأجهزة الجوّالة.
  2. انقر على الرابط المؤدي إلى المصدر غير المُدرَج في النطاق الموسّع.
  3. من المفترض أن يظهر شريط "خارج النطاق" تلقائيًا، ولكن لا يظهر بسبب الربط بين "النطاق" و"الإضافات".

نافذة تطبيق PWA الرئيسية بدون شريط "خارج النطاق" بعد النقر على رابط النطاق الموسّع

لا يظهر شريط "خارج النطاق" في التنقّل بين مصادر مختلفة بعد إجراء عملية ربط المصدر باستخدام "إضافات النطاق".

  1. افتح تطبيق الويب المتقدّم الرئيسي وثبِّته على جهاز ChromeOS.
  2. انقر على الرابط التالي: المصدر المرتبط.
  3. يتم فتح الرابط في علامة تبويب متصفّح جديدة، ويتم عرض طلب لفتحه في تطبيق الويب المتوافق مع الأجهزة الجوّالة المثبَّت.

إشعار في شريط العناوين الشامل لتطبيق ويب تقدّمي (PWA) مثبّت ذي نطاق موسّع

يؤدي النقر على رابط يؤدي إلى مصدر مرتبط بتطبيق متوافق مع الأجهزة الجوّالة (PWA) إلى فتح الرابط في علامة تبويب جديدة ويُظهر رمز "الفتح في التطبيق" الذي يتيح للمستخدم تفعيل ميزة التقاط الروابط تلقائيًا.

مرحلة التجربة والتقييم

إذا أردت اختبار واجهة برمجة التطبيقات هذه في تطبيقك في الميدان مع مستخدمين حقيقيين، يمكنك إجراء ذلك من خلال مرحلة التجربة والتقييم. تتيح لك تجارب الإصدارات العلنية الأولى تجربة الميزات التجريبية مع المستخدمين من خلال الحصول على رمز اختبار مرتبط بنطاقك. يمكنك بعد ذلك نشر تطبيقك والتوقع أن يعمل في متصفّح متوافق مع الميزة التي تختبرها (في هذا الحالة، تتوفّر الميزة في الإصدارات من 121 إلى 126 من Chrome). للحصول على رمزك المميّز لتنفيذ اختبار أصول، يُرجى ملء نموذج الطلب.

ملاحظات

يبحث فريق Chrome عن ملاحظات حول مدى فائدة واجهة برمجة التطبيقات هذه. لمساعدة الفريق في تطوير واجهة برمجة التطبيقات هذه من خلال تقديم ملاحظات حول مدى فائدتها و حالات الاستخدام الجديدة غير المشمولة في الإصدار الحالي، يُرجى فتح مشكلة على GitHub.

مراجع إضافية

الشكر والتقدير

نشكر بشكل خاص الفريق الذي ساهم في تطوير واجهة برمجة التطبيقات هذه. تم تحديد "إضافات النطاق" من قِبل آلان كاتلر و لو هوانغ، بمساهمة من مات جيوكا. نفَّذ واجهة برمجة التطبيقات كلّ من ألان كاتّر من Google Chrome و حسين طلال و كريستين لي و لو هوانغ من Microsoft Edge.