طراحی اپلیکیشن

متداول ترین گزینه برای یک برنامه وب پیشرو، حالت مستقل PWA شما را در یک پنجره استاندارد سیستم عامل بدون هیچ رابط کاربری ناوبری مرورگر نمایش می دهد. این پنجره همچنین ممکن است شامل یک منوی کنترل شده توسط مرورگر باشد که در آن کاربر می تواند:

• URL فعلی را کپی کنید.
• پسوندهای مرورگر را ببینید، اعمال کنید یا غیرفعال کنید.
• مشاهده و تغییر مجوزها
• منبع فعلی و گواهی SSL را بررسی کنید.

وقتی PWA در برگه رندر می‌شود، نوار عنوان ممکن است مجوزها و استفاده از سخت‌افزار را نشان دهد که جایگزین omnibox یا نوار URL می‌شود.

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

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

حداقل رابط کاربری

این حالت برای برنامه های وب پیشرو در سیستم عامل های اندروید و دسکتاپ موجود است. هنگامی که از آن استفاده می کنید، مرورگری که PWA شما را رندر می کند یک رابط کاربری حداقلی را نشان می دهد تا به کاربر کمک کند تا در برنامه حرکت کند.

در اندروید، یک نوار عنوان دریافت خواهید کرد که عنصر <title> فعلی و مبدا را با یک منوی کشویی کوچک در دسترس ارائه می‌کند. در دسک‌تاپ، مجموعه‌ای از دکمه‌ها را در نوار عنوان دریافت خواهید کرد که به ناوبری کمک می‌کنند، از جمله دکمه بازگشت و کنترلی که بر اساس وضعیت بارگیری فعلی، بین یک توقف و یک عمل بارگذاری مجدد تعویض می‌شود.

بهینه سازی طراحی برای دسکتاپ

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

در فصل 3 ، به حالت مینی اشاره کردیم: یک برنامه دسکتاپ می تواند به اندازه 200 در 100 پیکسل باشد. این پنجره از محتوای عنصر <title> در HTML شما به عنوان عنوان پنجره استفاده می کند. این محتوا همچنین هنگام تغییر زبانه بین برنامه ها و مکان های دیگر ارائه می شود.

به عنصر <title> HTML خود توجه کنید و در نحوه استفاده از آن تجدید نظر کنید. <title> فقط برای SEO یا ارائه اولین کاراکترها در برگه مرورگر نیست. این بخشی از تجربه کاربری پنجره دسکتاپ مستقل شما خواهد بود.

بهترین روش های CSS

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

پرسش های رسانه ای

اولین درخواست رسانه ای که می توانید در PWA خود از آن استفاده کنید، ویژگی display-mode است که مقادیر browser ، standalone ، minimal-ui یا fullscreen را می پذیرد.

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

/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}

تجربه برنامه

هنگامی که کاربران از PWA نصب شده استفاده می کنند، انتظار رفتار برنامه را دارند. در حالی که تعریف معنای آن ساده نیست، رفتار پیش‌فرض وب بهترین تجربه را در برخی موقعیت‌ها ارائه نمی‌کند.

انتخاب کاربر

محتوا عموماً با ماوس یا اشاره گر یا فشار دادن و نگه داشتن حرکت لمسی قابل انتخاب است. اگرچه برای محتوا مفید است، اما بهترین تجربه را برای موارد ناوبری، منوها و دکمه‌ها در PWA شما ارائه نمی‌کند.

بنابراین، ایده خوبی است که انتخاب کاربر را در این عناصر با استفاده از user-select: none غیرفعال کنید و نسخه پیشوند -webkit- است:

.unselectable {
   user-select: none;
}

رنگ تاکیدی

در PWA خود، می‌توانید با استفاده از ویژگی accent-color رنگی را برای مطابقت با نام تجاری خود در کنترل‌های فرم HTML تعریف کنید.

فونت های سیستمی

اگر می‌خواهید عنصری مانند گفتگوها یا پیام‌ها با فونت پلتفرم پیش‌فرض کاربر مطابقت داشته باشد، می‌توانید از خانواده فونت زیر استفاده کنید:

selector {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
}

بکشید تا تازه شود

مرورگرهای مدرن موبایل، مانند گوگل کروم و سافاری، دارای ویژگی هستند که وقتی صفحه را پایین می‌کشید، آن را تازه می‌کند. در برخی از مرورگرها، مانند Chrome در Android، این رفتار در PWAهای مستقل نیز فعال است.

ممکن است بخواهید این عمل را غیرفعال کنید. به عنوان مثال، هنگام ارائه مدیریت ژست خود یا اقدام به‌روزرسانی، یا اگر این احتمال وجود دارد که کاربر شما به طور ناخواسته اقدام را فعال کند.

غیرفعال کردن این رفتار با استفاده از overscroll-behavior-y: contain : امکان پذیر است.

  body {
    overscroll-behavior-y: contain;
  }

مناطق امن

برخی از دستگاه ها صفحه نمایش مستطیلی بدون مانع ندارند. در عوض، صفحه نمایش آنها ممکن است شکل متفاوتی داشته باشد، مانند یک دایره، یا دارای بخش هایی از صفحه باشد که قابل استفاده نباشد، مانند بریدگی آیفون 13. در این موارد، برخی از مرورگرها متغیرهای محیطی را با مناطق امنی که می توانند محتوا را نمایش دهند، در معرض دید قرار می دهند.

اگر می خواهید برای نمایش رنگ یا تصویر خود به صفحه، حتی ناحیه نامرئی دسترسی کامل داشته باشید، viewport-fit=cover در محتوای تگ <meta name="viewport"> خود قرار دهید. سپس از متغیرهای محیط safe-area-inset-* استفاده کنید تا محتوای خود را به طور ایمن در آن مناطق گسترش دهید.

منابع

• پرس و جو رسانه حالت نمایش CSS
• کنترل پیمایش خود را در دست بگیرید: سفارشی کردن جلوه‌های کشش برای تازه کردن و سرریز کردن
• prefers-color-scheme: سلام تاریکی، دوست قدیمی من
• prefers-reduced-motion: گاهی اوقات حرکت کمتر بیشتر است
• تابع CSS () env
• CSS Accent Color
• پوشش کنترل های پنجره