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

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

Demián Renzulli
Thomas Steiner

نظرة عامة

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

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

الأهداف

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

رسم بياني يوضّح تطبيق الويب التقدّمي الرئيسي والتجارب الفرعية المرتبطة به

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

من الناحية العملية، يترجم هذا هدفين آخرين محددين:

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

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

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

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

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

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

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

طلب شريط العديد من التطبيقات لتطبيق الويب التقدّمي (PWA) مثبَّت.

جزء من شريط عناوين Chrome لعلامة تبويب في ChromeOS يُظهر مؤشرًا مرئيًا على أنّه يمكن معالجة الرابط من خلال تطبيق ويب تقدّمي (PWA) وخيار تذكُّر ذلك القرار.

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

التنفيذ

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

تعريف قائمة المصادر المرتبطة

يمكنك إضافة عضو في بيان تطبيق الويب 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 وعرضه في هذا الموقع تحديدًا، لأنه معرّف موارد منتظم (URI) معروف.

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

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

الخصائص الديموغرافية

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

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

اختبار التنقّل المشترك المصدر

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

نافذة تطبيق الويب التقدّمي (PWA) الرئيسية التي تتضمّن روابط داخل النطاق وروابط للنطاق الموسَّع

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

التنقّل التلقائي من مصادر متعددة (ليس في النطاق الموسَّع)

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

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

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

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

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

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

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

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

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

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

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

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

إضافة ملاحظات

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

مراجع إضافية

شكر وتقدير

شكر خاص للفريق المسؤول عن تطوير واجهة برمجة التطبيقات هذه. تم تحديد إضافات النطاق من قِبل آلان كاتر ولو هوانغ، مع إدخالات من مات جوكا. تم تنفيذ واجهة برمجة التطبيقات من قِبل Alan Cutter من Google Chrome وHassan Talat وKristin Lee ولو هوانغ من Microsoft Edge.