العمل على أكثر من مستند واحد في الوقت نفسه باستخدام علامات التبويب في تطبيق الويب التقدّمي
في عالم الحوسبة، استعارة سطح المكتب هي استعارة واجهة تُمثّل مجموعة من المفاهيم الموحدة التي تستخدمها واجهات المستخدم الرسومية (GUI) ل help users interact more easily 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- إطلاق | لم تبدأ عملية المراجعة |
استخدام وضع التطبيق المزوّد بعلامات تبويب
لاستخدام وضع التطبيقات المزوّدة بعلامات تبويب، على المطوّرين تفعيله في تطبيقاتهم من خلال ضبط قيمة وضع معيّنة
"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"
}
]
}
}
}
رصد وضع التطبيق المزوّد بعلامات تبويب
يمكن للتطبيقات رصد ما إذا كانت تعمل في وضع التطبيقات المزوّدة بعلامات تبويب من خلال التحقّق من
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"، سيؤدي تشغيل التطبيق إلى فتح علامة تبويب جديدة في
نافذة تطبيق حالية.
عرض توضيحي
يمكنك تجربة وضع التطبيق المُقسَّم إلى علامات تبويب من خلال ضبط علامة متصفّح:
- اضبط العلامة
#enable-desktop-pwas-tab-strip. - ثبِّت التطبيق 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.
