العمل على أكثر من مستند واحد في المرة الواحدة باستخدام علامات التبويب في تطبيق الويب التقدّمي
في عالم الحوسبة، يشير مجاز سطح المكتب إلى مجاز واجهة يمثّل مجموعة من المفاهيم الموحدة التي تستخدمها واجهات المستخدم الرسومية (GUI) ل help users interact more intuitively with the computer. بما يتوافق مع استعارة سطح المكتب، تم تصميم علامات التبويب في واجهة المستخدم الرسومية على غرار علامات التبويب الكلاسيكية للبطاقات التي يتم إدراجها في الكتب أو الملفات الورقية أو فهارس البطاقات. واجهة مستندات بعلامات تبويب (TDI) أو علامة التبويب هي عنصر تحكّم رسومي يسمح بتضمين عدة مستندات أو لوحات في نافذة واحدة، باستخدام علامات التبويب كتطبيق مصغّر للتنقّل للتبديل بين مجموعات المستندات.
يمكن تشغيل تطبيقات الويب التقدّمية في أوضاع عرض مختلفة يتم تحديدها من خلال سمة
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. إنشاء مسودة أولية للمواصفة | تاريخ الاكتمال |
| 3- جمع الملاحظات وتحسين التصميم | اكتمل الإجراء |
| 4. مرحلة التجربة والتقييم | اكتمل الإجراء |
| 5- إطلاق | مكتمل (نظام التشغيل ChromeOS) |
استخدام وضع التطبيق المزوّد بعلامات تبويب
لاستخدام وضع التطبيقات المزوّدة بعلامات تبويب، على المطوّرين تفعيله في تطبيقاتهم من خلال ضبط قيمة وضع معيّنة
"display_override" في ملف بيان تطبيق الويب.
{
"display": "standalone",
"display_override": ["tabbed"]
}
بعد ذلك، يمكن استخدام السمة "tab_strip" اختياريًا لتحسين سلوك علامة التبويب. وتحتوي على سمتَين فرعيتَين
مسموح بهما، وهما "home_tab" و"new_tab_button". إذا لم تكن سمة "tab_strip"
متوفّرة، سيتم ضبطها تلقائيًا على العنصر التالي:
"tab_strip": {
"new_tab_button": {
"url": <start_url>,
},
}
علامة تبويب "الصفحة الرئيسية"
علامة التبويب "الصفحة الرئيسية" هي علامة تبويب تم تثبيتها، ويجب أن تكون متوفّرة دائمًا عند فتح التطبيق إذا كان مفعّلاً له. لا يُفترَض أن يتم التنقّل في علامة التبويب هذه أبدًا. من المفترض أن يتم فتح الروابط التي يتم النقر عليها من علامة التبويب هذه في علامة تبويب جديدة للتطبيق. يمكن للتطبيقات اختيار تخصيص عنوان URL الذي يتم قفل علامة التبويب عليه والرمز المعروض على علامة التبويب.
يحتوي العنصر "home_tab" من العنصر "tab_strip" على معلومات حول "علامة تبويب منزلية" خاصة
المخصّصة لتكون بمثابة قائمة المستوى الأعلى للتطبيق. يحتوي على العنصر التالي:
-
"scope_patterns": العنصر"scope_patterns"هو قائمة ب أنماط عناوين URL التي تحدّد نطاق علامة التبويب الرئيسية بالنسبة إلى عنوان URL للبيان.
زر "علامة تبويب جديدة"
يصف العنصر "new_tab_button" من العنصر "tab_strip" سلوك عنصر واجهة مستخدِم (مثل
زر) الذي يؤدي النقر عليه أو تفعيله إلى فتح سياق تطبيق جديد ضمن
نافذة التطبيق. يحتوي على العنصر التالي:
-
"url": العنصر"url"هو سلسلة تمثّل عنوان URL نسبيًا لعنوان URL للبيان الذي يقع ضمن نطاق بيان تمت معالجته.
يحتوي التطبيق على زر علامة تبويب جديدة إذا كان العنصر
"url" في عنصر new_tab_button في البيان الذي تمت معالجته خارج نطاق علامة التبويب الرئيسية. إذا لم يكن التطبيق يحتوي على زر
علامة تبويب جديدة، لن يُتيح المتصفّح للمستخدم
استخدام ميزة "علامة تبويب جديدة".
مثال كامل
قد يبدو مثال كامل لضبط سلوك تطبيق يتضمّن واجهة تنقّل بين علامات تبويب على النحو التالي:
{
"name": "Tabbed App Example",
"start_url": "/",
"display": "standalone",
"display_override": ["tabbed"],
"tab_strip": {
"home_tab": {
"scope_patterns": [
{"pathname": "/"},
{"pathname": "/index.html"}
]
},
"new_tab_button": {
"url": "/create"
}
}
}
رصد وضع التطبيق المزوّد بعلامات تبويب
يمكن للتطبيقات رصد ما إذا كانت تعمل في وضع التطبيقات المزوّدة بعلامات تبويب من خلال التحقّق من
display-mode ميزة وسائط CSS
في 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"، سيؤدي تشغيل التطبيق إلى فتح علامة تبويب جديدة في
نافذة تطبيق حالية.
عرض توضيحي
يمكنك تجربة التطبيق المزوّد بعلامات تبويب على ChromeOS:
- ثبِّت التطبيق tabbed-application-mode.glitch.me (رمز المصدر).
- انقر على الروابط المختلفة في علامات التبويب المختلفة.
الملاحظات
يريد فريق Chrome معرفة تجاربك مع وضع التطبيقات المُفصَّلة.
أخبِرنا عن تصميم واجهة برمجة التطبيقات.
هل هناك مشكلة في وضع التطبيقات المُقسَّمة إلى علامات تبويب لا تعمل على النحو المتوقّع؟ يُرجى التعليق على مشكلة بيان تطبيق الويب التي أنشأناها.
الإبلاغ عن مشكلة في التنفيذ
هل رصدت خطأ في عملية تنفيذ Chrome؟ يمكنك إرسال بلاغ عن خلل على الرابط
new.crbug.com. احرص على تضمين أكبر قدر ممكن من التفاصيل،
وتعليمات لإعادة إنتاج الخلل، وأدخِل UI>Browser>WebAppInstalls في مربّع المكوّنات.
تُعد ميزة Glitch رائعة لمشاركة حالات إعادة الإنتاج السريعة.
إظهار الدعم لواجهة برمجة التطبيقات
هل تخطّط لاستخدام وضع التطبيق المُقسّم إلى علامات تبويب؟ يساعد دعمك العلني فريق Chrome في تحديد الميزات ذات الأولوية وإظهار مدى أهمية توفيرها في المتصفّحات الأخرى.
أرسِل تغريدة إلى @ChromiumDev باستخدام الهاشتاغ
#TabbedApplicationMode
وأطلِعنا على مكان استخدامك له وطريقة استخدامه.
روابط مفيدة
الشكر والتقدير
استكشاف وضع التطبيق المُقسَّم إلى علامات تبويب من قِبل Matt Giuca تم تنفيذ الإصدار التجريبي في Chrome من قِبل آلان كاتلر. تمت مراجعة هذا المستند من قِبل Joe Medley. الصورة الرئيسية من إنشاء Till Niermann على Wikimedia Commons.
