این فصل بر روی برخی از جنبه های مهم ارائه محتوا در خارج از برگه مرورگر تمرکز دارد.
پنجره
سیستم عامل های مختلف نظرات متفاوتی در مورد اینکه پنجره برنامه چیست دارند. به عنوان مثال، در آیفون ها، یک برنامه همیشه 100 درصد از صفحه نمایش را اشغال می کند. در اندروید و آی‌پد، برنامه‌های کاربردی معمولاً تمام صفحه اجرا می‌شوند، اما امکان اشتراک‌گذاری صفحه بین دو برنامه وجود دارد، اما هر بار تنها یک نمونه برنامه باز است. در مقابل، در یک دستگاه دسکتاپ، یک برنامه می‌تواند همزمان بیش از یک نمونه باز داشته باشد. این املاک و مستغلات صفحه نمایش موجود را با سایر برنامه های کاربردی باز به اشتراک می گذارد. هر نمونه برنامه را می توان تغییر اندازه داد و در هر نقطه از صفحه نمایش قرار داد، حتی با برنامه های دیگر همپوشانی دارند.
نماد
ما برنامه ها را با نماد آنها می شناسیم. این نماد هنگام جستجوی برنامه‌ها، در تنظیمات، هر جا که برنامه‌ها را راه‌اندازی می‌کنید و جایی که برنامه‌های در حال اجرا را می‌بینید ظاهر می‌شود.
این شامل:
- صفحه اصلی (iOS، iPadOS، Android).
- راه‌انداز برنامه (macOS، Android).
- منوی شروع یا منوی برنامه (Windows، ChromeOS، Linux).
- داک، نوار وظیفه یا پانل های چند وظیفه ای (همه سیستم عامل ها).
هنگام ایجاد آیکون برای برنامه وب پیشرو خود، مطمئن شوید که نماد آن دارای پلتفرم آگنوستیک است، زیرا هر سیستم عامل می تواند آیکون ها را رندر کند و ماسک های شکل متفاوتی مانند آنچه در تصویر زیر است، روی آنها اعمال کند.
برنامه خود را قالب بندی کنید
چندین روش وجود دارد که می توانید استایل برنامه را در PWA شخصی سازی کنید، از جمله:
- رنگ تم: رنگ نوار عنوان پنجره را در دسکتاپ و رنگ نوار وضعیت را در دستگاه های تلفن همراه مشخص می کند. با استفاده از متا تگ می‌توانید گزینه‌هایی برای طرح‌های مختلف مانند حالت تاریک یا روشن داشته باشید و بر اساس ترجیح کاربر استفاده شوند.
- رنگ پس زمینه: رنگ پنجره را قبل از بارگیری برنامه و CSS آن مشخص می کند.
- رنگ تاکیدی: رنگ اجزای داخلی مرورگر مانند کنترل‌های فرم را مشخص می‌کند.
حالت های نمایش
می‌توانید نوع تجربه پنجره‌ای را برای برنامه وب پیشرو خود تعریف کنید. سه گزینه برای انتخاب وجود دارد:
- تمام صفحه
- مستقل
- حداقل رابط کاربری
تجربه تمام صفحه
یک تجربه تمام صفحه برای تجربه‌های همهجانبه مانند بازی‌ها، تجربه‌های واقعیت مجازی یا واقعیت افزوده مناسب است. در حال حاضر فقط در دستگاه‌های Android در دسترس است و نوار وضعیت و نوار پیمایش را پنهان می‌کند و به PWA شما 100% صفحه را برای محتوای شما می‌دهد.
در دسکتاپ و iPadOS، PWA های تمام صفحه پشتیبانی نمی شوند. با این حال، می توانید از API تمام صفحه از داخل PWA خود برای نمایش تمام صفحه برنامه خود به درخواست کاربر استفاده کنید.
تجربه مستقل
متداول ترین گزینه برای یک برنامه وب پیشرو، حالت مستقل 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-* استفاده کنید تا محتوای خود را به طور ایمن در آن مناطق گسترش دهید.