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

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

در دنیای محاسبات، استعاره دسکتاپ یک استعاره رابط است که مجموعه ای از مفاهیم یکپارچه است که توسط رابط های گرافیکی کاربر (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" در واقع راهی است که شما از قرار گرفتن در پنجره برنامه انصراف می دهید .

وضعیت فعلی

مرحله وضعیت
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" رفتار یک UI affordance (مانند یک دکمه) را توصیف می کند که با کلیک/فعال شدن، یک زمینه برنامه جدید در پنجره برنامه باز می شود. دارای اعضای زیر است:

  • "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"
    }
  }
}

تشخیص حالت برنامه تب دار

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

نسخه ی نمایشی

می‌توانید برنامه تب‌دار را در ChromeOS امتحان کنید:

  1. برنامه tabbed-application-mode.glitch.me ( کد منبع ) را نصب کنید.
  2. روی پیوندهای مختلف در برگه های مختلف کلیک کنید.

حالت نمایشی برنامه Tabbed در tabbed-application-mode.glitch.me.

بازخورد

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

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

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

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

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

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

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

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

قدردانی ها

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

،

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

در دنیای محاسبات، استعاره دسکتاپ یک استعاره رابط است که مجموعه ای از مفاهیم یکپارچه است که توسط رابط های گرافیکی کاربر (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" در واقع راهی است که شما از قرار گرفتن در پنجره برنامه انصراف می دهید .

وضعیت فعلی

مرحله وضعیت
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" رفتار یک UI affordance (مانند یک دکمه) را توصیف می کند که با کلیک/فعال شدن، یک زمینه برنامه جدید در پنجره برنامه باز می شود. دارای اعضای زیر است:

  • "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"
    }
  }
}

تشخیص حالت برنامه تب دار

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

نسخه ی نمایشی

می‌توانید برنامه تب‌دار را در ChromeOS امتحان کنید:

  1. برنامه tabbed-application-mode.glitch.me ( کد منبع ) را نصب کنید.
  2. روی پیوندهای مختلف در برگه های مختلف کلیک کنید.

حالت نمایشی برنامه Tabbed در tabbed-application-mode.glitch.me.

بازخورد

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

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

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

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

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

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

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

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

قدردانی ها

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

،

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

در دنیای محاسبات، استعاره دسکتاپ یک استعاره رابط است که مجموعه ای از مفاهیم یکپارچه است که توسط رابط های گرافیکی کاربر (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" در واقع راهی است که شما از قرار گرفتن در پنجره برنامه انصراف می دهید .

وضعیت فعلی

مرحله وضعیت
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" رفتار یک UI affordance (مانند یک دکمه) را توصیف می کند که با کلیک/فعال شدن، یک زمینه برنامه جدید در پنجره برنامه باز می شود. دارای اعضای زیر است:

  • "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"
    }
  }
}

تشخیص حالت برنامه تب دار

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

نسخه ی نمایشی

می‌توانید برنامه تب‌دار را در ChromeOS امتحان کنید:

  1. برنامه tabbed-application-mode.glitch.me ( کد منبع ) را نصب کنید.
  2. روی پیوندهای مختلف در برگه های مختلف کلیک کنید.

حالت نمایشی برنامه Tabbed در tabbed-application-mode.glitch.me.

بازخورد

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

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

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

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

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

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

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

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

قدردانی ها

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

،

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

در دنیای محاسبات، استعاره دسکتاپ یک استعاره رابط است که مجموعه ای از مفاهیم یکپارچه است که توسط رابط های گرافیکی کاربر (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" عملاً راهی است که شما از قرار گرفتن در پنجره برنامه انصراف می دهید .

وضعیت فعلی

مرحله وضعیت
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" رفتار یک UI affordance (مانند یک دکمه) را توصیف می کند که با کلیک/فعال شدن، یک زمینه برنامه جدید در پنجره برنامه باز می شود. دارای اعضای زیر است:

  • "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"
    }
  }
}

تشخیص حالت برنامه تب دار

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

نسخه ی نمایشی

می‌توانید برنامه تب‌دار را در ChromeOS امتحان کنید:

  1. برنامه tabbed-application-mode.glitch.me ( کد منبع ) را نصب کنید.
  2. روی پیوندهای مختلف در برگه های مختلف کلیک کنید.

حالت نمایشی برنامه Tabbed در tabbed-application-mode.glitch.me.

بازخورد

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

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

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

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

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

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

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

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

قدردانی ها

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