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

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

Demián Renzulli
Demián Renzulli
X GitHub
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 للمصدر الجديد. ويؤدي ذلك إلى إعاقة تجربة المستخدم، لأنّه يتوقّع مواصلة التنقّل داخل سياق التطبيق نفسه، ولكن قد يشعر بأنّه تم إخراجه منه.

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

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

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

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

طلب في المربّع المتعدّد الاستخدامات لتطبيق ويب تقدّمي مثبَّت

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

إذا نقر المستخدم على رابط خارج نطاق تطبيق الويب التقدّمي (بما في ذلك الروابط المؤدية إلى نطاقات فرعية أو نطاقات المستوى الأعلى)، لن يتم التعرّف عليه على أنّه ينتمي إلى التطبيق. على سبيل المثال، سيتم فتح الروابط في علامة تبويب المتصفّح بدون أي إشارة إلى المستخدم بأنّه يتوفّر تطبيق يمكنه التعامل مع الرابط. تسمح واجهة برمجة التطبيقات Scope Extensions بتوسيع نطاق تطبيق الويب التقدّمي (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 وأن يتم عرضه في هذا الموقع بالتحديد، لأنّه معرّف موارد منتظم معروف.

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

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

عرض توضيحي

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الملاحظات

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

مراجع إضافية

الإقرارات

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