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

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

Demián Renzulli
Thomas Steiner

نظرة عامة

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

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

الأهداف

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

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

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

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

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

التنقّل من نطاقات أخرى داخل النطاق

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

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

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

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

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

طلب مفتاح متعدد الاستخدامات لتطبيق ويب تقدّمي (PWA) مثبَّت.

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

في حال نقر المستخدم على رابط خارج نطاق تطبيق الويب التقدّمي (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) إلى فتح الرابط في علامة تبويب جديدة عرض رسالة "فتح في التطبيق" رمز يسمح للمستخدم بتفعيل الربط التلقائي الالتقاط.

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

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

ملاحظات

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

مراجع إضافية

شكر وتقدير

نشكر الفريق المسؤول عن تطوير واجهة برمجة التطبيقات هذه. إضافات النطاقات تم تحديده بواسطة Alan Cutter "لو هوانغ"، مع معلومات من مات جوكا تم تنفيذ واجهة برمجة التطبيقات بواسطة Alan Cutter من Google Chrome حسن طلات، كريستين لي، Lu Huang من Microsoft Edge.