يمكنك العمل على أكثر من مستند في الوقت نفسه باستخدام علامات التبويب في تطبيق الويب التقدّمي.
في عالم الحوسبة، الاستعارة المخصصة لأجهزة الكمبيوتر المكتبية هي استعارة للواجهة تشكل مجموعة من المفاهيم الموحدة التي تستخدمها واجهات المستخدم الرسومية (GUI) لمساعدة المستخدمين على التفاعل بسهولة أكبر مع جهاز الكمبيوتر. وتماشيًا مع استعارة سطح المكتب، يتم تصميم علامات تبويب واجهة المستخدم الرسومية على غرار علامات تبويب البطاقات التقليدية التي يتم إدراجها في الكتب أو الملفات الورقية أو فهارس البطاقات. واجهة المستندات المبوَّبة (TDI) أو علامة التبويب (Tab) هي عنصر تحكُّم رسومي يسمح بإدراج مستندات أو لوحات متعدّدة في نافذة واحدة، وذلك باستخدام علامات تبويب كأداة للتنقّل بين مجموعات المستندات.
يمكن تشغيل تطبيقات الويب التقدّمية في أوضاع عرض مختلفة تحدّدها السمة
display في بيان تطبيق الويب. تشمل الأمثلة fullscreen وstandalone وminimal-ui وbrowser. تتبع أوضاع العرض هذه
سلسلة احتياطية محدّدة جيدًا
("fullscreen" ← "standalone" ← "minimal-ui" ← "browser"). إذا كان المتصفّح لا يتيح استخدام
وضع معيّن، يعود إلى وضع العرض التالي في السلسلة. من خلال السمة
"display_override"، يمكن للمطوّرين تحديد سلسلة احتياطية خاصة بهم
عند الحاجة.
ما هو وضع التطبيق المبوَّب؟
إنّ أحد الأدوات التي لم تتوفّر على النظام الأساسي حتى الآن هو توفير وسيلة تتيح لمطوّري تطبيقات الويب التقدّمية (PWA) تقديم واجهة مستندات مبوبة للمستخدمين، على سبيل المثال، لتفعيل تعديل ملفات مختلفة في نافذة PWA نفسها. يعمل وضع التطبيق المبوَّب على إغلاق هذه الفجوة.
حالات الاستخدام المقترَحة لوضع التطبيقات المبوّبة
تشمل أمثلة المواقع الإلكترونية التي قد تستخدم وضع التطبيقات المبوبة ما يلي:
- تطبيقات الإنتاجية التي تتيح للمستخدم تعديل أكثر من مستند (أو ملف) في الوقت نفسه
- تطبيقات التواصل التي تتيح للمستخدم إجراء محادثات في غرف مختلفة لكل علامة تبويب
- قراءة التطبيقات التي تفتح روابط المقالات في علامات تبويب جديدة داخل التطبيق
الاختلافات بين علامات التبويب التي أنشأها المطوّرون
تأتي المستندات في علامات تبويب منفصلة في المتصفّح مع ميزة عزل الموارد مجانًا، وهو أمر لا يمكن استخدامه على الويب في الوقت الحالي. لا يمكن تغيير حجم علامات التبويب التي أنشأها المطوّر بشكل مقبول لمئات علامات التبويب مثل علامات تبويب المتصفّح. سيتم تطبيق ميزات المتصفح، مثل سجلّ التنقّل أو "نسخ عنوان URL لهذه الصفحة" أو "بث علامة التبويب هذه" أو "فتح هذه الصفحة في متصفح ويب" على صفحة الواجهة التي أنشأها المطوّر، ولكن ليس على صفحة المستند المحددة حاليًا.
أوجه الاختلاف مع "display": "browser"
إنّ السمة "display": "browser" الحالية لها
معنى محدّد، وهو:
يتم فتح تطبيق الويب باستخدام الاصطلاح الخاص بالنظام الأساسي لفتح الروابط التشعّبية في وكيل المستخدم (على سبيل المثال، في علامة تبويب متصفّح أو نافذة جديدة).
بإمكان المتصفِّحات تنفيذ كل ما يريدونه في ما يتعلّق بواجهة المستخدم، إلا أنّه سيكون من الواضح أنّها تخريبية كبيرة جدًا
لتوقعات المطوّرين إذا قصد "display": "browser" فجأة "التشغيل في نافذة منفصلة خاصة بالتطبيق بدون خصائص المتصفّح، بل واجهة مستند مبوّبة".
الإعداد "display": "browser" هو الطريقة الفعلية لإيقاف وضعك في
نافذة التطبيق.
الوضع الحالي
| الخطوة | الحالة |
|---|---|
| 1- إنشاء شرح | تاريخ الاكتمال |
| 2. إنشاء مسودة أولية للمواصفات | Not started |
| 3- جمع الملاحظات والتكرار التحسيني للتصميم | قيد التقدّم |
| 4. مرحلة التجربة والتقييم | قيد التقدّم |
| 5- الإطلاق | Not started |
استخدام وضع التطبيقات المبوَّبة
لاستخدام وضع التطبيق المبوَّب، على المطوّرين تفعيل تطبيقاتهم من خلال ضبط قيمة محدّدة لوضع
"display_override" في بيان تطبيق الويب.
{
"display": "standalone",
"display_override": ["tabbed"]
}
بعد ذلك، يمكن استخدام السمة "tab_strip" اختياريًا لضبط سلوك علامة التبويب. وهي تشمل خاصيتَين فرعيتَين مسموح بهما، هما "home_tab" و"new_tab_button". في حال عدم توفّر السمة "tab_strip"، سيتم
استخدام قيم "auto" للسمات المحدّدة. يحدّد المتصفح القيم التي سيتم
استخدامها مع "auto"
علامة تبويب "الصفحة الرئيسية"
علامة التبويب الرئيسية هي علامة تبويب مثبّتة، في حالة تفعيلها لتطبيق، يجب أن تكون موجودة دائمًا عندما يكون التطبيق مفتوحًا. يجب عدم التنقّل في علامة التبويب هذه مطلقًا. من المفترض أن يتم فتح الروابط التي تم النقر عليها من علامة التبويب هذه في علامة تبويب جديدة في التطبيق. ويمكن للتطبيقات اختيار تخصيص عنوان URL الذي ترتبط به علامة التبويب هذه والرمز المعروض في علامة التبويب.
قيم "home_tab" المسموح بها هي:
"auto"للسماح للمتصفّح بتحديد ما يجب فعله."absent"لتوجيه المتصفّح بعدم عرض علامة تبويب الصفحة الرئيسية- عنصر له سمتان فرعيتان:
"url"بالقيم المسموح بها"auto"أو عنوان URL لقفل علامة تبويب الصفحة الرئيسية به"icons"مع قيم"auto"المسموح بها أو مصفوفة من الرموز كما في السمة"icons"الرئيسية.
زر علامة تبويب جديدة
من المفترض أن يفتح زر "علامة تبويب جديدة"، إن وُجد، علامة تبويب جديدة على عنوان URL يقع ضمن نطاق التطبيق. وقد يختار التطبيق تعيين عنوان URL مخصّص ورمز لهذا الزر. ويمكن للمتصفحات تحديد كيفية التعامل مع سحب علامات التبويب هذه لإنشاء نوافذ جديدة أو دمجها مع علامات تبويب المتصفح.
قيم "new_tab_button" المسموح بها هي:
"auto"للسماح للمتصفّح بتحديد ما يجب فعله."absent"لإبلاغ المتصفِّح بعدم عرض زر علامة تبويب جديدة- عنصر له سمتان فرعيتان:
"url"بالقيم المسموح بها"auto"أو عنوان URL داخل النطاق لفتح علامات تبويب جديدة عليه."icons"مع قيم"auto"المسموح بها أو مصفوفة من الرموز كما في السمة"icons"الرئيسية.
مثال مكتمل
قد يبدو المثال الكامل لضبط سلوك تطبيق يتضمّن واجهة ذات علامات تبويب كما يلي:
{
"display_override": ["tabbed"],
"tab_strip": {
"home_tab": {
"url": "./home/",
"icons": [
{
"src": "./home.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
},
"new_tab_button": {
"url": "./new-tab/",
"icons": [
{
"src": "./new-tab.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
}
}
}
رصد وضع التطبيقات المبوَّبة
يمكن للتطبيقات اكتشاف ما إذا كانت تعمل في وضع التطبيق المبوَّب من خلال التحقّق من ميزة وسائط CSS display-mode في CSS أو JavaScript:
@media (display-mode: tabbed) {
/* Styles to apply in tabbed application mode. */
}
const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;
التفاعل مع واجهة برمجة التطبيقات Launch Handler API
تتيح واجهة برمجة التطبيقات Launch Handler API للمواقع الإلكترونية إعادة توجيه عمليات تشغيل التطبيقات إلى نوافذ التطبيقات الحالية لمنع فتح نوافذ مكرّرة. عند ضبط تطبيق مبوَّب "client_mode": "navigate-new"، سيتم فتح علامة تبويب جديدة في نافذة تطبيق حالية.
الخصائص الديموغرافية
يمكنك تجربة وضع التطبيقات المبوَّبة من خلال ضبط علامة متصفِّح:
- إعداد العلامة
#enable-desktop-pwas-tab-strip - ثبِّت التطبيق tabbed-Application-mode.glitch.me (رمز المصدر).
- انقر على الروابط المختلفة في علامات التبويب المختلفة.
إضافة ملاحظات
يرغب فريق Chrome في التعرف على تجاربك مع وضع التطبيقات المبوَّبة.
أخبرنا عن تصميم واجهة برمجة التطبيقات
هل هناك مشكلة في وضع التطبيق المبوَّب لا يعمل على النحو المتوقَّع؟ التعليق على مشكلة في بيان تطبيق الويب التي أنشأناها
الإبلاغ عن مشكلة في التنفيذ
هل واجهت خطأً في تنفيذ Chrome؟ عليك الإبلاغ عن خطأ على الموقع الإلكتروني
new.crbug.com. واحرص على تضمين أكبر قدر ممكن من التفاصيل والتعليمات البسيطة لإعادة الإنتاج وإدخال UI>Browser>WebAppInstalls في مربّع المكوّنات.
تعمل ميزة Glitch بشكل رائع لمشاركة حالات إعادة الإنتاج بسرعة وسهولة.
إظهار الدعم لواجهة برمجة التطبيقات
هل تخطّط لاستخدام وضع التطبيقات المبوَّبة؟ يساعد الدعم العام فريق Chrome في تحديد أولويات الميزات ويوضح لمورّدي المتصفِّح الآخرين مدى أهمية دعمهم.
يمكنك إرسال تغريدة إلى @ChromiumDev باستخدام الهاشتاغ
#TabbedApplicationMode
وإعلامنا بمكان استخدامك لها وطريقة استخدامك لها.
روابط مفيدة
شكر وتقدير
استكشف مات جوكا وضع التطبيق المبوَّب. كان التنفيذ التجريبي في Chrome من عمل Alan Cutter. راجع هذه المقالة جو ميدلي. صورة رئيسية من تصوير تيل نيرمان على ويكيميديا كومنز
