العمل على أكثر من مستند واحد في المرة باستخدام علامات التبويب في تطبيق الويب التقدّمي
في عالم الحوسبة، تمثّل استعارة سطح المكتب استعارة واجهة هي مجموعة من المفاهيم الموحّدة التي تستخدمها واجهات المستخدم الرسومية (GUI) لمساعدة المستخدمين على التفاعل بسهولة أكبر مع الكمبيوتر. بما يتوافق مع استعارة سطح المكتب، تم تصميم علامات التبويب في واجهة المستخدم الرسومية على غرار علامات التبويب التقليدية للبطاقات التي يتم إدراجها في الكتب أو الملفات الورقية أو فهارس البطاقات. واجهة المستند المبوَّبة (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"
}
]
}
}
}
رصد وضع التطبيق المزوّد بعلامات تبويب
يمكن للتطبيقات اكتشاف ما إذا كانت تعمل في وضع التطبيقات المبوَّبة من خلال التحقّق من ميزة وسائط 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 للمواقع الإلكترونية إعادة توجيه عمليات بدء التطبيقات
إلى نوافذ التطبيقات الحالية لمنع فتح نوافذ مكرّرة. عندما يضبط
تطبيق يتضمّن علامات تبويب القيمة "client_mode": "navigate-new"، سيؤدي تشغيل التطبيق إلى فتح علامة تبويب جديدة في
نافذة تطبيق حالية.
عرض توضيحي
يمكنك تجربة وضع التطبيقات ذات علامات التبويب من خلال ضبط علامة المتصفّح:
- اضبط العلامة
#enable-desktop-pwas-tab-strip. - ثبِّت التطبيق tabbed-application-mode.glitch.me (رمز المصدر).
- انقر على الروابط المختلفة في علامات التبويب المختلفة.
ملاحظات
يريد فريق Chrome معرفة تجاربك مع وضع التطبيقات المُقسّمة إلى علامات تبويب.
أخبِرنا عن تصميم واجهة برمجة التطبيقات.
هل هناك مشكلة في وضع التطبيقات المُقسَّمة إلى علامات تبويب لا تعمل على النحو المتوقّع؟ يُرجى التعليق على مشكلة بيان تطبيق الويب التي أنشأناها.
الإبلاغ عن مشكلة في التنفيذ
هل رصدت خطأ في عملية تنفيذ Chrome؟ يمكنك إرسال بلاغ عن خلل على الرابط
new.crbug.com. احرص على تضمين أكبر قدر ممكن من التفاصيل، وتعليمات بسيطة لإعادة إنتاج الخلل، وأدخِل UI>Browser>WebAppInstalls في مربّع المكوّنات.
تعمل ميزة الخطأ بشكلٍ رائع لمشاركة حافظات إعادة الإنتاج السريعة والسهلة.
إظهار الدعم لواجهة برمجة التطبيقات
هل تخطّط لاستخدام وضع التطبيق المُقسّم إلى علامات تبويب؟ يساعد دعمك العلني فريق Chrome في تحديد الميزات ذات الأولوية وإظهار مدى أهمية توفيرها في المتصفّحات الأخرى.
أرسِل تغريدة إلى @ChromiumDev باستخدام الهاشتاغ
#TabbedApplicationMode
وأطلِعنا على مكان استخدامك للميزة وطريقة استخدامك لها.
روابط مفيدة
الشكر والتقدير
استكشاف وضع التطبيق المُقسَّم إلى علامات تبويب من قِبل Matt Giuca تم تنفيذ الإصدار التجريبي في Chrome من قِبل آلان كاتلر. تمت مراجعة هذه المقالة من قِبل Joe Medley. الصورة الرئيسية من إنشاء Till Niermann على Wikimedia Commons.
