حالت برنامه Tabbed برای PWA ها

روی بیش از یک سند همزمان با برگه‌ها در برنامه وب پیشرو خود کار کنید

Thomas Steiner

در دنیای محاسبات، استعاره دسکتاپ یک استعاره رابط است که مجموعه ای از مفاهیم یکپارچه است که توسط رابط های گرافیکی کاربر (GUI) برای کمک به کاربران برای تعامل آسان تر با رایانه استفاده می شود. مطابق با استعاره دسکتاپ، برگه‌های رابط کاربری گرافیکی از برگه‌های کارت سنتی که در کتاب‌ها، فایل‌های کاغذی یا فهرست‌های کارت درج شده‌اند، مدل‌سازی می‌شوند. رابط سند زبانه‌دار (TDI) یا برگه یک عنصر کنترل گرافیکی است که به چندین سند یا پانل اجازه می‌دهد تا در یک پنجره واحد قرار گیرند و از برگه‌ها به‌عنوان ویجت ناوبری برای جابجایی بین مجموعه‌ای از اسناد استفاده می‌کند.

برنامه‌های وب پیشرو می‌توانند در حالت‌های نمایش مختلف که توسط ویژگی display در مانیفست برنامه وب تعیین می‌شوند اجرا شوند. نمونه‌ها عبارتند از fullscreen ، standalone ، minimal-ui و browser . این حالت‌های نمایش از یک زنجیره بازگشتی کاملاً تعریف شده پیروی می‌کنند ( "fullscreen" → "standalone" → "minimal-ui" → "browser" ). اگر مرورگر از حالت معینی پشتیبانی نکند، به حالت نمایش بعدی در زنجیره بازمی گردد. از طریق ویژگی "display_override" ، توسعه‌دهندگان می‌توانند در صورت نیاز زنجیره بازگشتی خود را مشخص کنند.

حالت برنامه تب دار چیست

چیزی که تاکنون در این پلتفرم وجود نداشته است، راهی است که به توسعه دهندگان PWA اجازه می دهد تا به کاربران خود یک رابط سند تب دار ارائه دهند، به عنوان مثال، ویرایش فایل های مختلف را در همان پنجره PWA فعال کند. حالت برنامه Tabbed این شکاف را می‌بندد.

موارد استفاده پیشنهادی برای حالت برنامه تب دار

نمونه‌هایی از سایت‌هایی که ممکن است از حالت برنامه کاربردی تب دار استفاده کنند عبارتند از:

• برنامه‌های بهره‌وری که به کاربر اجازه می‌دهند بیش از یک سند (یا فایل) را همزمان ویرایش کنند.
• برنامه‌های ارتباطی که به کاربر امکان می‌دهند در هر برگه در اتاق‌های مختلف مکالمه داشته باشند.
• خواندن برنامه هایی که پیوندهای مقاله را در برگه های درون برنامه ای جدید باز می کنند.

تفاوت با برگه های ساخته شده توسط توسعه دهندگان

داشتن اسناد در برگه‌های مرورگر جداگانه با جداسازی منابع به صورت رایگان همراه است، که امروزه با استفاده از وب امکان‌پذیر نیست. برگه‌های ساخته‌شده توسط برنامه‌نویس، مانند برگه‌های مرورگر، به اندازه صدها برگه قابل قبول نیستند. امکانات مرورگر مانند تاریخچه پیمایش، "کپی این نشانی اینترنتی صفحه"، "ارسال این برگه" یا "باز کردن این صفحه در یک مرورگر وب" در صفحه رابط زبانه ای ساخته شده توسط توسعه دهنده اعمال می شود، اما نه در صفحه سند انتخاب شده فعلی.

تفاوت با "display": "browser"

"display": "browser" قبلاً معنای خاصی دارد:

برنامه وب را با استفاده از قرارداد مخصوص پلتفرم برای باز کردن پیوندها در عامل کاربر (به عنوان مثال، در یک برگه مرورگر یا یک پنجره جدید) باز می کند.

در حالی که مرورگرها می‌توانند در رابطه با رابط کاربری هر کاری که می‌خواهند انجام دهند، اگر "display": "browser" ناگهان به معنای «اجرا در یک پنجره خاص برنامه‌های کاربردی جداگانه بدون هزینه‌های مرورگر، اما یک رابط سند زبانه‌دار، اجرا شود»، واضح است که انتظارات توسعه‌دهندگان را زیر سوال می‌برد. ".

تنظیم "display": "browser" در واقع راهی است که شما از قرار گرفتن در پنجره برنامه انصراف می دهید .

وضعیت فعلی

استفاده از حالت برنامه تب دار

برای استفاده از حالت برنامه تب دار، توسعه دهندگان باید برنامه های خود را با تنظیم یک مقدار حالت خاص "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" اصلی .

دکمه برگه جدید

دکمه برگه جدید، در صورت وجود، باید برگه جدیدی را در نشانی اینترنتی باز کند که در محدوده برنامه است. ممکن است برنامه یک نشانی وب و نماد سفارشی برای این دکمه تنظیم کند. مرورگرها می‌توانند تصمیم بگیرند که چگونه این برگه‌ها را برای ایجاد پنجره‌های جدید یا ترکیب با برگه‌های مرورگر انجام دهند.

مقادیر مجاز برای "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 یا جاوا اسکریپت، تشخیص دهند که آیا در حالت برنامه تب‌دار اجرا می‌شوند یا خیر:

@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" ، راه اندازی برنامه یک برگه جدید را در پنجره برنامه موجود باز می کند.

نسخه ی نمایشی

می‌توانید با تنظیم پرچم مرورگر، حالت برنامه تب‌دار را امتحان کنید:

1. پرچم #enable-desktop-pwas-tab-strip را تنظیم کنید.
2. برنامه tabbed-application-mode.glitch.me ( کد منبع ) را نصب کنید.
3. روی پیوندهای مختلف در برگه های مختلف کلیک کنید.

بازخورد

تیم Chrome می‌خواهد در مورد تجربیات شما در مورد حالت برنامه‌های برگه‌دار بشنود.

در مورد طراحی API به ما بگویید

آیا چیزی در مورد حالت برنامه تب دار وجود دارد که آنطور که انتظار داشتید کار نمی کند؟ در مورد مشکل مانیفست برنامه وب که ایجاد کرده ایم نظر دهید.

گزارش مشکل در اجرا

آیا اشکالی در پیاده سازی کروم پیدا کردید؟ یک اشکال را در new.crbug.com ثبت کنید. اطمینان حاصل کنید که تا جایی که می توانید جزئیات، دستورالعمل های ساده برای بازتولید را وارد کنید و UI>Browser>WebAppInstalls در کادر Components وارد کنید. Glitch برای به اشتراک گذاری موارد بازتولید سریع و آسان عالی عمل می کند.

پشتیبانی از API را نشان دهید

آیا قصد دارید از حالت برنامه کاربردی تب دار استفاده کنید؟ پشتیبانی عمومی شما به تیم Chrome کمک می‌کند ویژگی‌ها را اولویت‌بندی کند و به سایر فروشندگان مرورگر نشان می‌دهد که چقدر حمایت از آنها ضروری است.

با استفاده از هشتگ #TabbedApplicationMode یک توییت به ChromiumDev@ ارسال کنید و به ما اطلاع دهید که کجا و چگونه از آن استفاده می‌کنید.

لینک های مفید

• توضیح دهنده
• مشکل مشخصات مانیفست برنامه وب
• اشکال کروم
• مولفه چشمک زدن: UI>Browser>WebAppInstalls

قدردانی ها

حالت برنامه Tabbed توسط Matt Giuca مورد بررسی قرار گرفت. اجرای آزمایشی در کروم کار آلن کاتر بود. این مقاله توسط جو مدلی بررسی شده است. تصویر قهرمان توسط تیل نیرمان در ویکی‌مدیا کامانز .

روی بیش از یک سند همزمان با برگه‌ها در برنامه وب پیشرو خود کار کنید

Thomas Steiner

در دنیای محاسبات، استعاره دسکتاپ یک استعاره رابط است که مجموعه ای از مفاهیم یکپارچه است که توسط رابط های گرافیکی کاربر (GUI) برای کمک به کاربران برای تعامل آسان تر با رایانه استفاده می شود. مطابق با استعاره دسکتاپ، برگه‌های رابط کاربری گرافیکی از برگه‌های کارت سنتی که در کتاب‌ها، فایل‌های کاغذی یا فهرست‌های کارت درج شده‌اند، مدل‌سازی می‌شوند. رابط سند زبانه‌دار (TDI) یا برگه یک عنصر کنترل گرافیکی است که به چندین سند یا پانل اجازه می‌دهد تا در یک پنجره واحد قرار گیرند و از برگه‌ها به‌عنوان ویجت ناوبری برای جابجایی بین مجموعه‌ای از اسناد استفاده می‌کند.

برنامه‌های وب پیشرو می‌توانند در حالت‌های نمایش مختلف که توسط ویژگی display در مانیفست برنامه وب تعیین می‌شوند اجرا شوند. نمونه‌ها عبارتند از fullscreen ، standalone ، minimal-ui و browser . این حالت‌های نمایش از یک زنجیره بازگشتی کاملاً تعریف شده پیروی می‌کنند ( "fullscreen" → "standalone" → "minimal-ui" → "browser" ). اگر مرورگر از حالت معینی پشتیبانی نکند، به حالت نمایش بعدی در زنجیره بازمی گردد. از طریق ویژگی "display_override" ، توسعه‌دهندگان می‌توانند در صورت نیاز زنجیره بازگشتی خود را مشخص کنند.

حالت برنامه تب دار چیست

چیزی که تاکنون در این پلتفرم وجود نداشته است، راهی است که به توسعه دهندگان PWA اجازه می دهد تا به کاربران خود یک رابط سند تب دار ارائه دهند، به عنوان مثال، ویرایش فایل های مختلف را در همان پنجره PWA فعال کند. حالت برنامه Tabbed این شکاف را می‌بندد.

موارد استفاده پیشنهادی برای حالت برنامه تب دار

نمونه‌هایی از سایت‌هایی که ممکن است از حالت برنامه کاربردی تب دار استفاده کنند عبارتند از:

• برنامه‌های بهره‌وری که به کاربر اجازه می‌دهند بیش از یک سند (یا فایل) را همزمان ویرایش کنند.
• برنامه‌های ارتباطی که به کاربر امکان می‌دهند در هر برگه در اتاق‌های مختلف مکالمه داشته باشند.
• خواندن برنامه هایی که پیوندهای مقاله را در برگه های درون برنامه ای جدید باز می کنند.

تفاوت با برگه های ساخته شده توسط توسعه دهندگان

داشتن اسناد در برگه‌های مرورگر جداگانه با جداسازی منابع به صورت رایگان همراه است، که امروزه با استفاده از وب امکان‌پذیر نیست. برگه‌های ساخته‌شده توسط برنامه‌نویس، مانند برگه‌های مرورگر، به‌طور قابل قبولی به صدها تب نمی‌رسد. امکانات مرورگر مانند تاریخچه پیمایش، "کپی این نشانی اینترنتی صفحه"، "ارسال این برگه" یا "باز کردن این صفحه در یک مرورگر وب" در صفحه رابط زبانه ای ساخته شده توسط توسعه دهنده اعمال می شود، اما نه در صفحه سند انتخاب شده فعلی.

تفاوت با "display": "browser"

"display": "browser" قبلاً معنای خاصی دارد:

برنامه وب را با استفاده از قرارداد مخصوص پلتفرم برای باز کردن پیوندها در عامل کاربر (به عنوان مثال، در یک برگه مرورگر یا یک پنجره جدید) باز می کند.

در حالی که مرورگرها می‌توانند در رابطه با رابط کاربری هر کاری که می‌خواهند انجام دهند، اگر "display": "browser" ناگهان به معنای «اجرا در یک پنجره خاص برنامه‌های کاربردی جداگانه بدون هزینه‌های مرورگر، اما یک رابط سند زبانه‌دار، اجرا شود»، واضح است که انتظارات توسعه‌دهندگان را زیر سوال می‌برد. ".

تنظیم "display": "browser" در واقع راهی است که شما از قرار گرفتن در پنجره برنامه انصراف می دهید .

وضعیت فعلی

استفاده از حالت برنامه تب دار

برای استفاده از حالت برنامه تب دار، توسعه دهندگان باید برنامه های خود را با تنظیم یک مقدار حالت خاص "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" اصلی .

دکمه برگه جدید

دکمه برگه جدید، در صورت وجود، باید برگه جدیدی را در نشانی اینترنتی باز کند که در محدوده برنامه است. ممکن است برنامه یک نشانی وب و نماد سفارشی برای این دکمه تنظیم کند. مرورگرها می‌توانند تصمیم بگیرند که چگونه این برگه‌ها را برای ایجاد پنجره‌های جدید یا ترکیب با برگه‌های مرورگر انجام دهند.

مقادیر مجاز برای "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 یا جاوا اسکریپت، تشخیص دهند که آیا در حالت برنامه تب‌دار اجرا می‌شوند یا خیر:

@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" ، راه اندازی برنامه یک برگه جدید را در پنجره برنامه موجود باز می کند.

نسخه ی نمایشی

می‌توانید با تنظیم پرچم مرورگر، حالت برنامه تب‌دار را امتحان کنید:

1. پرچم #enable-desktop-pwas-tab-strip را تنظیم کنید.
2. برنامه tabbed-application-mode.glitch.me ( کد منبع ) را نصب کنید.
3. روی پیوندهای مختلف در برگه های مختلف کلیک کنید.

بازخورد

تیم Chrome می‌خواهد در مورد تجربیات شما در مورد حالت برنامه‌های برگه‌دار بشنود.

در مورد طراحی API به ما بگویید

آیا چیزی در مورد حالت برنامه تب دار وجود دارد که آنطور که انتظار داشتید کار نمی کند؟ در مورد مشکل مانیفست برنامه وب که ایجاد کرده ایم نظر دهید.

گزارش مشکل در اجرا

آیا اشکالی در پیاده سازی کروم پیدا کردید؟ یک اشکال را در new.crbug.com ثبت کنید. اطمینان حاصل کنید که تا جایی که می توانید جزئیات، دستورالعمل های ساده برای بازتولید را وارد کنید و UI>Browser>WebAppInstalls در کادر Components وارد کنید. Glitch برای به اشتراک گذاری موارد بازتولید سریع و آسان عالی عمل می کند.

پشتیبانی از API را نشان دهید

آیا قصد دارید از حالت برنامه کاربردی تب دار استفاده کنید؟ پشتیبانی عمومی شما به تیم Chrome کمک می‌کند ویژگی‌ها را اولویت‌بندی کند و به سایر فروشندگان مرورگر نشان می‌دهد که چقدر حمایت از آنها ضروری است.

با استفاده از هشتگ #TabbedApplicationMode یک توییت به ChromiumDev@ ارسال کنید و به ما اطلاع دهید که کجا و چگونه از آن استفاده می‌کنید.

لینک های مفید

• توضیح دهنده
• مشکل مشخصات مانیفست برنامه وب
• اشکال کروم
• مولفه چشمک زدن: UI>Browser>WebAppInstalls

قدردانی ها

حالت برنامه Tabbed توسط Matt Giuca مورد بررسی قرار گرفت. اجرای آزمایشی در کروم کار آلن کاتر بود. این مقاله توسط جو مدلی بررسی شده است. تصویر قهرمان توسط تیل نیرمان در ویکی‌مدیا کامانز .

روی بیش از یک سند همزمان با برگه‌ها در برنامه وب پیشرو خود کار کنید

Thomas Steiner

در دنیای محاسبات، استعاره دسکتاپ یک استعاره رابط است که مجموعه ای از مفاهیم یکپارچه است که توسط رابط های گرافیکی کاربر (GUI) برای کمک به کاربران برای تعامل آسان تر با رایانه استفاده می شود. مطابق با استعاره دسکتاپ، برگه‌های رابط کاربری گرافیکی از برگه‌های کارت سنتی که در کتاب‌ها، فایل‌های کاغذی یا فهرست‌های کارت درج شده‌اند، مدل‌سازی می‌شوند. رابط سند زبانه‌دار (TDI) یا برگه یک عنصر کنترل گرافیکی است که به چندین سند یا پانل اجازه می‌دهد تا در یک پنجره واحد قرار گیرند و از برگه‌ها به‌عنوان ویجت ناوبری برای جابجایی بین مجموعه‌ای از اسناد استفاده می‌کند.

برنامه‌های وب پیشرو می‌توانند در حالت‌های نمایش مختلف که توسط ویژگی display در مانیفست برنامه وب تعیین می‌شوند اجرا شوند. نمونه‌ها عبارتند از fullscreen ، standalone ، minimal-ui و browser . این حالت‌های نمایش از یک زنجیره بازگشتی کاملاً تعریف شده پیروی می‌کنند ( "fullscreen" → "standalone" → "minimal-ui" → "browser" ). اگر مرورگر از حالت معینی پشتیبانی نکند، به حالت نمایش بعدی در زنجیره بازمی گردد. از طریق ویژگی "display_override" ، توسعه‌دهندگان می‌توانند در صورت نیاز زنجیره بازگشتی خود را مشخص کنند.

حالت برنامه تب دار چیست

چیزی که تاکنون در این پلتفرم وجود نداشته است، راهی است که به توسعه دهندگان PWA اجازه می دهد تا به کاربران خود یک رابط سند تب دار ارائه دهند، به عنوان مثال، ویرایش فایل های مختلف را در همان پنجره PWA فعال کند. حالت برنامه Tabbed این شکاف را می‌بندد.

موارد استفاده پیشنهادی برای حالت برنامه تب دار

نمونه‌هایی از سایت‌هایی که ممکن است از حالت برنامه کاربردی تب دار استفاده کنند عبارتند از:

• برنامه‌های بهره‌وری که به کاربر اجازه می‌دهند بیش از یک سند (یا فایل) را همزمان ویرایش کنند.
• برنامه‌های ارتباطی که به کاربر امکان می‌دهند در هر برگه در اتاق‌های مختلف مکالمه داشته باشند.
• خواندن برنامه هایی که پیوندهای مقاله را در برگه های درون برنامه ای جدید باز می کنند.

تفاوت با برگه های ساخته شده توسط توسعه دهندگان

داشتن اسناد در برگه‌های مرورگر جداگانه با جداسازی منابع به صورت رایگان همراه است، که امروزه با استفاده از وب امکان‌پذیر نیست. برگه‌های ساخته‌شده توسط برنامه‌نویس، مانند برگه‌های مرورگر، به اندازه صدها برگه قابل قبول نیستند. امکانات مرورگر مانند تاریخچه پیمایش، "کپی این نشانی اینترنتی صفحه"، "ارسال این برگه" یا "باز کردن این صفحه در یک مرورگر وب" در صفحه رابط زبانه ای ساخته شده توسط توسعه دهنده اعمال می شود، اما نه در صفحه سند انتخاب شده فعلی.

تفاوت با "display": "browser"

"display": "browser" قبلاً معنای خاصی دارد:

برنامه وب را با استفاده از قرارداد مخصوص پلتفرم برای باز کردن پیوندها در عامل کاربر (به عنوان مثال، در یک برگه مرورگر یا یک پنجره جدید) باز می کند.

در حالی که مرورگرها می‌توانند در رابطه با رابط کاربری هر کاری که می‌خواهند انجام دهند، اگر "display": "browser" ناگهان به معنای «اجرا در یک پنجره خاص برنامه‌های کاربردی جداگانه بدون هزینه‌های مرورگر، اما یک رابط سند زبانه‌دار، اجرا شود»، واضح است که انتظارات توسعه‌دهندگان را زیر سوال می‌برد. ".

تنظیم "display": "browser" در واقع راهی است که شما از قرار گرفتن در پنجره برنامه انصراف می دهید .

وضعیت فعلی

استفاده از حالت برنامه تب دار

برای استفاده از حالت برنامه تب دار، توسعه دهندگان باید برنامه های خود را با تنظیم یک مقدار حالت خاص "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" اصلی .

دکمه برگه جدید

دکمه برگه جدید، در صورت وجود، باید برگه جدیدی را در نشانی اینترنتی باز کند که در محدوده برنامه است. ممکن است برنامه یک نشانی وب و نماد سفارشی برای این دکمه تنظیم کند. مرورگرها می‌توانند تصمیم بگیرند که چگونه این برگه‌ها را برای ایجاد پنجره‌های جدید یا ترکیب با برگه‌های مرورگر انجام دهند.

مقادیر مجاز برای "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 یا جاوا اسکریپت، تشخیص دهند که آیا در حالت برنامه تب‌دار اجرا می‌شوند یا خیر:

@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" ، راه اندازی برنامه یک برگه جدید را در پنجره برنامه موجود باز می کند.

نسخه ی نمایشی

می‌توانید با تنظیم پرچم مرورگر، حالت برنامه تب‌دار را امتحان کنید:

1. پرچم #enable-desktop-pwas-tab-strip را تنظیم کنید.
2. برنامه tabbed-application-mode.glitch.me ( کد منبع ) را نصب کنید.
3. روی پیوندهای مختلف در برگه های مختلف کلیک کنید.

بازخورد

تیم Chrome می‌خواهد در مورد تجربیات شما در مورد حالت برنامه‌های برگه‌دار بشنود.

در مورد طراحی API به ما بگویید

آیا چیزی در مورد حالت برنامه تب دار وجود دارد که آنطور که انتظار داشتید کار نمی کند؟ در مورد مشکل مانیفست برنامه وب که ایجاد کرده ایم نظر دهید.

گزارش مشکل در اجرا

آیا اشکالی در پیاده سازی کروم پیدا کردید؟ یک اشکال را در new.crbug.com ثبت کنید. اطمینان حاصل کنید که تا جایی که می توانید جزئیات، دستورالعمل های ساده برای بازتولید را وارد کنید و UI>Browser>WebAppInstalls در کادر Components وارد کنید. Glitch برای به اشتراک گذاری موارد بازتولید سریع و آسان عالی عمل می کند.

پشتیبانی از API را نشان دهید

آیا قصد دارید از حالت برنامه کاربردی تب دار استفاده کنید؟ پشتیبانی عمومی شما به تیم Chrome کمک می‌کند ویژگی‌ها را اولویت‌بندی کند و به سایر فروشندگان مرورگر نشان می‌دهد که چقدر حمایت از آنها ضروری است.

با استفاده از هشتگ #TabbedApplicationMode یک توییت به ChromiumDev@ ارسال کنید و به ما اطلاع دهید که کجا و چگونه از آن استفاده می‌کنید.

لینک های مفید

• توضیح دهنده
• مشکل مشخصات مانیفست برنامه وب
• اشکال کروم
• مولفه چشمک زدن: UI>Browser>WebAppInstalls

قدردانی ها

حالت برنامه Tabbed توسط Matt Giuca مورد بررسی قرار گرفت. اجرای آزمایشی در کروم کار آلن کاتر بود. این مقاله توسط جو مدلی بررسی شده است. تصویر قهرمان توسط تیل نیرمان در ویکی‌مدیا کامانز .