النوافذ المنبثقة المقسّمة: نهج جديد للنوافذ المنبثقة على الويب في الفترة التجريبية للمطوّرين

Natalia Markoborodova

بدءًا من الإصدار 132 من Chrome، يمكن للمطوّرين المشاركة في تجربة المطوّرين لأسلوب جديد للنوافذ المنبثقة على الويب، وهو Partitioned Popins. لا تتوفّر هذه الميزة إلا على أجهزة الكمبيوتر، وهي غير متاحة بعد على أجهزة Android.

النافذة المنبثقة المقسّمة هي نوع جديد من النوافذ المنبثقة مصمَّم للتفاعلات القصيرة الأمد، مثل عمليات تسجيل الدخول أو التأكيدات السريعة. يحمّل هذا المتصفّح محتوى الويب مع ميزتَين فريدتَين:

• تقسيم مساحة التخزين حسب الجهة التي فتحت الصفحة
• واجهة مستخدم تشبه النافذة المنبثقة

لماذا نحتاج إلى نوافذ منبثقة مقسّمة؟

تم تصميم النوافذ المنبثقة المقسّمة للحفاظ على خصائص الخصوصية لإطار iframe مقسّم وخصائص الأمان للنوافذ المنبثقة.

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

كيف تعمل النوافذ المنبثقة المقسّمة؟

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

لنفترض أنّ هناك موقعًا إلكترونيًا opener.example يتضمّن محتوًى من third-party.example. لعرض محتوى مخصّص على opener.example، يجب أن يسجّل المستخدم الدخول على third-party.example. عند حظر ملفات تعريف الارتباط التابعة لجهات خارجية في متصفّح المستخدم، يكون مسار النوافذ المنبثقة الحالي على النحو التالي:

1. ينقر المستخدم على زر تسجيل الدخول.
2. سيظهر لك مربّع حوار.
3. يسجّل المستخدم الدخول من سياق المستوى الأعلى third-party.example، ويتم إنشاء ملف تعريف ارتباط مصادقة غير مقسَّم.
4. لا يمكن للمحتوى third-party.example المضمّن في opener.example الوصول إلى ملفات تعريف الارتباط الخاصة به على المستوى الأعلى والمكتوبة على third-party.example عندما تم عرضه في سياق الطرف الأول. يحدث ذلك لأنّ ملف تعريف الارتباط الخاص بالمصادقة غير مقسَّم، وبالتالي هو ملف تعريف ارتباط تابع لجهة خارجية.

يتم تقسيم مساحة تخزين النافذة المنبثقة المقسَّمة إلى النافذة الرئيسية. يؤدي ذلك إلى تغيير الخطوتين 3 و4 من مسارات المستخدمين على النحو التالي:

1. يسجّل المستخدم الدخول من سياق المستوى الأعلى third-party.example. بما أنّ النافذة المنبثقة مفتوحة في قسم، يتم تقسيم مساحة التخزين حسب opener.example.

2. يمكن للمحتوى third-party.example المضمّن في opener.example الوصول إلى ملف تعريف الارتباط الخاص به الذي تم ضبطه في النافذة المنبثقة، لأنّهما يتشاركان مساحة التخزين المقسّمة نفسها.

واجهة مستخدم تشبه النافذة المشروطة بالنسبة إلى علامة التبويب التي فتحتها

تهدف النوافذ المنبثقة المقسّمة إلى مساعدة المستخدم في فهم أنّ الصفحة التي فتحت النافذة المنبثقة والنافذة المنبثقة مرتبطتان:

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

جرِّبه الآن

سيقدّم الإصدار 132 من Chrome نسخة تجريبية للمطوّرين من ميزة "النوافذ المنبثقة المقسّمة". وهذا يعني أنّ الميزة ستكون متاحة عند تفعيل علامة. إليك كيفية تجربة النوافذ المنبثقة المقسّمة:

1. تأكَّد من استخدام الإصدار 132 من Chrome أو إصدار أحدث.
2. انتقِل إلى chrome://flags#partitioned-popins وفعِّل علامة الميزة.
3. أعِد تشغيل Chrome.
4. جرِّب العرض التوضيحي.

استخدام النوافذ المنبثقة المقسّمة على موقعك الإلكتروني

لاستخدام نافذة منبثقة مقسّمة على موقعك الإلكتروني، استدعِ طريقة window.open() مع تمرير المَعلمة popin:

window.open("third-party-popin.example", "_blank", "popin");

مشاركة ملاحظاتك

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

• خطوات مصادقة المستخدم إذا كان لديك مسار مصادقة مخصّص تم تنفيذه، وكانت المصادقة تتم على نطاق مختلف عن موقعك الإلكتروني (على سبيل المثال، يسجّل مستخدمو site.example الدخول على auth-site.example)، حاوِل فتح صفحة المصادقة في نافذة منبثقة لاستخدام ملف تعريف ارتباط الجلسة على صفحة الفتح.
• المحتوى المضمَّن: جرِّب استخدام النوافذ المنبثقة المقسّمة لعرض محتوى إضافي من أداة تابعة لجهة خارجية، مثل مربّع حوار الإعدادات أو صورة أو ملف PDF (أو أي محتوى آخر يتم تحميله عادةً في نافذة منبثقة)، ويتم عرضه في نافذة أكبر. في هذه الحالة، تهدف النوافذ المنبثقة المقسّمة إلى الاحتفاظ بحالة جلسة المستخدم بين التطبيق المصغّر التابع لجهة خارجية وموقعك الإلكتروني.

إذا كانت لديك أي من هذه السيناريوهات في حلولك، أو لديك حالات استخدام أخرى في ذهنك، أو تريد المساعدة في تحديد مستقبل هذه الميزة، جرِّبها وأخبرنا برأيك:

• هل واجهت أي مشاكل؟
• هل لديك أي اقتراحات لتحسين تجربة المستخدم؟
• هل لديك أي اقتراحات لتحسين واجهة المستخدم؟ على وجه التحديد، هل ترى أنّ واجهة المستخدم توضّح بشكل كافٍ أنّ الصفحة الأصلية والنافذة المنبثقة مضمّنة مرتبطان ببعضهما؟
• ما مدى فائدة هذه الميزة بالنسبة إليك؟
• هل هناك حالات استخدام أخرى تريد استخدام النوافذ المنبثقة المقسّمة فيها؟

يمكنك الإبلاغ عن مشكلة في GitHub لمشاركة أفكارك.