با تسلط بر حالت‌های نمایش مانیفست، پتانسیل کامل اپلیکیشن وب پیشرونده (PWA) خود را آزاد کنید. این راهنمای جامع گزینه‌های مختلف نمایش و تأثیر آنها بر تجربه کاربری در پلتفرم‌های گوناگون را بررسی می‌کند.
نمایش مانیفست PWA در فرانت‌اند: پیکربندی پیشرفته حالت نمایش
اپلیکیشن‌های وب پیشرونده (PWAs) در حال ایجاد تحول در نحوه تعامل کاربران با محتوای وب هستند. PWAs با بهره‌گیری از فناوری‌های مدرن وب، تجربه‌هایی شبیه به اپلیکیشن را مستقیماً از طریق مرورگر ارائه می‌دهند و شکاف بین وب‌سایت‌های سنتی و اپلیکیشن‌های بومی را پر می‌کنند. در قلب یک PWA، مانیفست وب اپلیکیشن قرار دارد، یک فایل JSON که اطلاعات حیاتی در مورد اپلیکیشن، از جمله نام، آیکون‌ها و مهم‌تر از همه، حالت نمایش آن را ارائه می‌دهد. این مقاله به طور عمیق به پیکربندی پیشرفته خاصیت حالت نمایش در مانیفست PWA می‌پردازد و گزینه‌های مختلف و تأثیر آنها بر تجربه کاربری را بررسی می‌کند.
درک مانیفست وب اپلیکیشن
قبل از اینکه به پیچیدگی‌های حالت‌های نمایش بپردازیم، بیایید به طور خلاصه نقش مانیفست وب اپلیکیشن را مرور کنیم. فایل مانیفست، که معمولاً manifest.json یا manifest.webmanifest نامیده می‌شود، یک فایل JSON ساده است که حاوی فراداده (metadata) در مورد PWA شماست. این فراداده توسط مرورگر برای تعیین نحوه نصب و نمایش اپلیکیشن استفاده می‌شود. خواص کلیدی در مانیفست عبارتند از:
- name: نام PWA شما، همانطور که به کاربر نمایش داده می‌شود.
- short_name: نسخه کوتاه‌تری از نام، که در فضای محدود استفاده می‌شود.
- icons: آرایه‌ای از آیکون‌ها با اندازه‌ها و فرمت‌های مختلف که برای آیکون صفحه اصلی اپلیکیشن، صفحه اسپلش و سایر عناصر UI استفاده می‌شود.
- start_url: آدرس URL که هنگام راه‌اندازی PWA بارگیری می‌شود.
- display: این موضوع اصلی مقاله ماست – حالت نمایش تعیین می‌کند که PWA چگونه به کاربر نمایش داده شود.
- background_color: رنگ پس‌زمینه استفاده شده برای صفحه اسپلش.
- theme_color: رنگ تم که توسط مرورگر برای نوار عنوان و سایر عناصر UI استفاده می‌شود.
- description: توضیحات مختصری از PWA.
- screenshots: آرایه‌ای از اسکرین‌شات‌ها برای نمایش در بنر نصب اپلیکیشن.
- categories: آرایه‌ای از دسته‌بندی‌هایی که PWA به آنها تعلق دارد (مانند «کتاب‌ها»، «خرید»، «بهره‌وری»).
- prefer_related_applications: مقدار بولی که نشان می‌دهد آیا اپلیکیشن مخصوص پلتفرم باید بر اپلیکیشن وب ترجیح داده شود یا خیر.
- related_applications: آرایه‌ای از اپلیکیشن‌های مخصوص پلتفرم که به عنوان جایگزین برای نصب در نظر گرفته می‌شوند.
فایل مانیفست با استفاده از یک تگ <link> در بخش <head> فایل HTML شما به PWA متصل می‌شود:
<link rel="manifest" href="manifest.json">
بررسی گزینه‌های حالت نمایش
خاصیت display در مانیفست چهار حالت نمایش متمایز را ارائه می‌دهد که هر کدام بر نحوه ارائه PWA به کاربر تأثیر می‌گذارد:
- fullscreen: PWA کل صفحه را اشغال می‌کند و عناصر رابط کاربری مرورگر مانند نوار آدرس و دکمه‌های ناوبری را پنهان می‌کند.
- standalone: PWA در پنجره خود، جدا از مرورگر، با یک نوار عنوان و بدون عناصر رابط کاربری مرورگر اجرا می‌شود. این حالت، رایج‌ترین و اغلب مطلوب‌ترین حالت نمایش برای یک PWA است.
- minimal-ui: شبیه به standalone، اما شامل حداقل عناصر رابط کاربری مرورگر، مانند دکمه‌های بازگشت و جلو و یک دکمه رفرش است.
- browser: PWA در یک تب یا پنجره استاندارد مرورگر باز می‌شود و رابط کاربری کامل مرورگر را نمایش می‌دهد.
بیایید هر یک از این حالت‌ها را با جزئیات بررسی کنیم.
۱. حالت fullscreen
حالت fullscreen فراگیرترین تجربه را فراهم می‌کند و فضای صفحه را برای PWA شما به حداکثر می‌رساند. این حالت برای بازی‌ها، پخش‌کننده‌های ویدیو یا اپلیکیشن‌هایی که در آنها یک محیط بدون حواس‌پرتی حیاتی است، ایده‌آل است.
برای پیکربندی حالت fullscreen، کافی است خاصیت display را در مانیفست خود روی "fullscreen" تنظیم کنید:
{
"name": "My Fullscreen PWA",
"display": "fullscreen",
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
ملاحظات برای حالت fullscreen:
- تجربه کاربری: اطمینان حاصل کنید که PWA شما ناوبری واضح و شهودی را در محیط تمام‌صفحه فراهم می‌کند. کاربران باید بتوانند به راحتی از آن خارج شوند یا به صفحات قبلی بازگردند.
- دسترسی‌پذیری: کاربرانی را که ممکن است برای ناوبری به عناصر رابط کاربری مرورگر متکی باشند، در نظر بگیرید. روش‌های ناوبری جایگزین را در PWA خود ارائه دهید.
- پشتیبانی پلتفرم: اگرچه به طور گسترده پشتیبانی می‌شود، رفتار حالت تمام‌صفحه ممکن است در مرورگرها و سیستم‌عامل‌های مختلف کمی متفاوت باشد. آزمایش کامل ضروری است.
- مقیاس‌پذیری محتوا: اطمینان حاصل کنید که محتوای شما به درستی مقیاس‌بندی می‌شود تا در حالت تمام‌صفحه با اندازه‌ها و نسبت‌های مختلف صفحه نمایش سازگار باشد.
مثال: یک اپلیکیشن بازی یا یک سرویس پخش ویدیوی اختصاصی از حالت فراگیر fullscreen بهره زیادی خواهد برد و به کاربران اجازه می‌دهد بدون حواس‌پرتی روی محتوا تمرکز کنند.
۲. حالت standalone
حالت standalone یک رویکرد متعادل ارائه می‌دهد و تجربه‌ای شبیه به اپلیکیشن را بدون پنهان کردن کامل رابط کاربری مرورگر فراهم می‌کند. PWA در پنجره سطح بالای خود، جدا از مرورگر، اجرا می‌شود و آیکون اپلیکیشن خود را در لانچر اپلیکیشن سیستم‌عامل دارد. این اغلب حالت ترجیحی برای اکثر PWAs است.
برای پیکربندی حالت standalone، خاصیت display را روی "standalone" تنظیم کنید:
{
"name": "My Standalone PWA",
"display": "standalone",
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
مزایای حالت standalone:
- تجربه شبیه به اپلیکیشن: تجربه‌ای بصری متمایز از یک وب‌سایت معمولی فراهم می‌کند و تعامل کاربر را افزایش می‌دهد.
- ادغام با صفحه اصلی: به کاربران اجازه می‌دهد PWA را روی صفحه اصلی خود نصب کنند و دسترسی به آن را آسان می‌کند.
- قابلیت‌های آفلاین: PWAs در حالت standalone می‌توانند از سرویس ورکرها برای ارائه قابلیت آفلاین استفاده کنند و قابلیت اطمینان را افزایش دهند.
مثال: یک اپلیکیشن تجارت الکترونیک یا یک کلاینت رسانه‌های اجتماعی در حالت standalone به خوبی کار می‌کند و تجربه‌ای یکپارچه شبیه به اپلیکیشن‌های بومی را به کاربران ارائه می‌دهد.
۳. حالت minimal-ui
حالت minimal-ui شبیه به standalone است اما شامل مجموعه حداقلی از عناصر رابط کاربری مرورگر، معمولاً دکمه‌های بازگشت و جلو و یک دکمه رفرش است. این حالت تجربه‌ای کمی کمتر فراگیر نسبت به standalone فراهم می‌کند اما می‌تواند برای PWAs که به ناوبری مرورگر متکی هستند مفید باشد.
برای پیکربندی حالت minimal-ui، خاصیت display را روی "minimal-ui" تنظیم کنید:
{
"name": "My Minimal-UI PWA",
"display": "minimal-ui",
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
موارد استفاده برای حالت minimal-ui:
- اتکا به ناوبری مرورگر: هنگامی که PWA شما به شدت به دکمه‌های بازگشت و جلو مرورگر متکی است،
minimal-uiمی‌تواند تجربه‌ای آشناتر برای کاربران فراهم کند. - ادغام با اپلیکیشن وب قدیمی: اگر در حال انتقال یک اپلیکیشن وب قدیمی به PWA هستید،
minimal-uiمی‌تواند با فراهم کردن کنترل‌های آشنای مرورگر، این انتقال را آسان‌تر کند.
مثال: یک اپلیکیشن ویرایش اسناد یا یک فرم وب پیچیده ممکن است از حالت minimal-ui بهره‌مند شود و به کاربران اجازه دهد با استفاده از دکمه‌های بازگشت و جلو مرورگر به راحتی بین بخش‌های مختلف جابجا شوند.
۴. حالت browser
حالت browser حالت نمایش پیش‌فرض است اگر خاصیت display در مانیفست مشخص نشده باشد. در این حالت، PWA در یک تب یا پنجره استاندارد مرورگر باز می‌شود و رابط کاربری کامل مرورگر، از جمله نوار آدرس، دکمه‌های ناوبری و بوک‌مارک‌ها را نمایش می‌دهد. این حالت اساساً معادل یک وب‌سایت معمولی است.
برای پیکربندی صریح حالت browser، خاصیت display را روی "browser" تنظیم کنید:
{
"name": "My Browser PWA",
"display": "browser",
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
چه زمانی از حالت browser استفاده کنیم:
- اپلیکیشن‌های وب ساده: برای اپلیکیشن‌های وب ساده که به تجربه‌ای شبیه به اپلیکیشن نیاز ندارند، حالت
browserممکن است کافی باشد. - ارتقای تدریجی (Progressive Enhancement): می‌توانید از حالت
browserبه عنوان یک جایگزین برای مرورگرهای قدیمی که به طور کامل از ویژگی‌های PWA پشتیبانی نمی‌کنند، استفاده کنید.
مثال: یک وبلاگ ساده یا یک وب‌سایت استاتیک ممکن است از حالت browser استفاده کند، زیرا به هیچ ویژگی خاص شبیه به اپلیکیشن نیاز ندارد.
تنظیم حالت نمایش جایگزین (Fallback)
مهم است در نظر داشته باشید که همه مرورگرها به طور کامل از همه حالت‌های نمایش پشتیبانی نمی‌کنند. برای اطمینان از یک تجربه ثابت در پلتفرم‌های مختلف، می‌توانید با استفاده از خاصیت display_override در مانیفست، یک حالت نمایش جایگزین مشخص کنید.
خاصیت display_override آرایه‌ای از حالت‌های نمایش است که بر اساس اولویت مرتب شده‌اند. مرورگر سعی می‌کند از اولین حالت نمایشی در آرایه که از آن پشتیبانی می‌کند، استفاده کند. اگر هیچ یک از حالت‌های مشخص شده پشتیبانی نشوند، مرورگر به حالت نمایش پیش‌فرض خود (معمولاً browser) بازمی‌گردد.
به عنوان مثال، برای ترجیح دادن حالت standalone اما بازگشت به minimal-ui و سپس browser، مانیفست را به صورت زیر پیکربندی می‌کنید:
{
"name": "My PWA with Fallback",
"display": "standalone",
"display_override": ["standalone", "minimal-ui", "browser"],
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
فراتر از حالت‌های نمایش پایه: مدیریت موارد خاص و تفاوت‌های پلتفرم
در حالی که حالت‌های نمایش اصلی درجه بالایی از کنترل را ارائه می‌دهند، درک نحوه تعامل آنها با پلتفرم‌های مختلف و موارد خاص برای ایجاد تجربیات کاربری قوی و ثابت بسیار مهم است. در اینجا برخی ملاحظات پیشرفته آورده شده است:
۱. مانیفست‌های مخصوص پلتفرم
در سناریوهای خاص، ممکن است به پیکربندی‌های کمی متفاوت بر اساس سیستم‌عامل (OS) کاربر نیاز داشته باشید. به عنوان مثال، ممکن است بخواهید اندازه آیکون برای iOS در مقایسه با اندروید متمایز باشد. در حالی که یک مانیفست واحد اغلب کافی است، برای تجربیات بسیار سفارشی، می‌توان از بارگذاری شرطی مانیفست استفاده کرد.
این کار را می‌توان با استفاده از منطق سمت سرور یا جاوا اسکریپت برای تشخیص سیستم‌عامل کاربر و ارائه فایل مانیفست مناسب انجام داد. مراقب پیچیدگی بیشتری که این رویکرد ایجاد می‌کند باشید.
۲. مدیریت جهت‌گیری صفحه (Screen Orientation)
PWAs این گزینه را دارند که جهت‌گیری صفحه ترجیحی خود را با استفاده از خاصیت orientation در مانیفست تعریف کنند. به عنوان مثال، قفل کردن یک اپلیکیشن در حالت افقی (landscape) می‌تواند تجربیات بازی یا مصرف رسانه را بهبود بخشد.
با این حال، به یاد داشته باشید که کاربران در نهایت کنترل جهت‌گیری دستگاه خود را در دست دارند. PWA خود را طوری طراحی کنید که تغییرات جهت‌گیری را به خوبی مدیریت کند و اطمینان حاصل کنید که محتوا بدون توجه به موقعیت دستگاه، خوانا و کاربردی باقی می‌ماند.
۳. سفارشی‌سازی صفحه اسپلش (Splash Screen)
صفحه اسپلش، که به طور خلاصه هنگام بارگیری PWA نمایش داده می‌شود، فرصتی برای ایجاد یک تأثیر اولیه مثبت فراهم می‌کند. رنگ پس‌زمینه (background_color) و رنگ تم (theme_color) صفحه اسپلش را برای هماهنگی با هویت برند خود سفارشی کنید.
اطمینان حاصل کنید که رنگ‌های انتخاب شده کنتراست کافی با آیکون اپلیکیشن دارند تا دید و خوانایی را به حداکثر برسانند. آزمایش بر روی دستگاه‌های مختلف را برای تأیید اینکه صفحه اسپلش به درستی رندر می‌شود، در نظر بگیرید.
۴. ملاحظات امنیتی
PWAs، مانند وب‌سایت‌های سنتی، همیشه باید از طریق HTTPS ارائه شوند. این کار اتصال بین مرورگر کاربر و سرور را ایمن می‌کند و از داده‌های حساس در برابر شنود محافظت می‌کند. علاوه بر این، استفاده از یک زمینه امن (secure context) پیش‌نیازی برای فعال کردن سرویس ورکرها، یک فناوری اصلی زیربنای عملکرد PWA است.
تأیید کنید که گواهی SSL/TLS سرور شما معتبر و به درستی پیکربندی شده است. پروتکل‌های امنیتی خود را به طور منظم به‌روزرسانی کنید تا آسیب‌پذیری‌های بالقوه را کاهش دهید.
۵. آزمایش در دستگاه‌ها و مرورگرهای مختلف
با توجه به تنوع دستگاه‌ها و مرورگرهای مورد استفاده در سطح جهان، آزمایش کامل برای اطمینان از عملکرد صحیح PWA شما در تمام پلتفرم‌های هدف، بسیار مهم است. از ابزارهای توسعه‌دهنده مرورگر برای شبیه‌سازی اندازه‌های مختلف صفحه و شرایط شبکه استفاده کنید.
از سرویس‌های تست بین مرورگری برای خودکارسازی آزمایش بر روی طیف گسترده‌ای از مرورگرها و سیستم‌عامل‌ها استفاده کنید. بازخورد کاربران در دستگاه‌های مختلف را جمع‌آوری کنید تا هرگونه مشکل سازگاری را شناسایی و برطرف کنید.
۶. بهترین شیوه‌های دسترسی‌پذیری
دسترسی‌پذیری باید یک ملاحظه اصلی در هنگام توسعه هر اپلیکیشن وب، از جمله PWAs باشد. از دستورالعمل‌های دسترسی‌پذیری وب (WCAG) پیروی کنید تا اطمینان حاصل کنید که PWA شما برای افراد دارای معلولیت قابل استفاده است. متن جایگزین برای تصاویر ارائه دهید، از عناصر HTML معنایی استفاده کنید و از کنتراست رنگ کافی اطمینان حاصل کنید.
PWA خود را با فناوری‌های کمکی، مانند صفحه‌خوان‌ها، آزمایش کنید تا هرگونه مانع دسترسی‌پذیری را شناسایی و برطرف کنید. در حالت تمام‌صفحه، اطمینان حاصل کنید که روش‌های ناوبری جایگزین ارائه شده است.
نمونه‌های عملی از سراسر جهان
بیایید چند نمونه واقعی از چگونگی استفاده شرکت‌های مختلف از حالت‌های نمایش PWA برای بهبود تجربیات کاربری را بررسی کنیم:
- استارباکس (جهانی): PWA استارباکس از حالت
standaloneبرای ارائه یک تجربه سفارش‌دهی ساده، شبیه به اپلیکیشن موبایل بومی خود، استفاده می‌کند. این به کاربران در سراسر جهان اجازه می‌دهد تا به سرعت سفارش دهند و امتیازات وفاداری خود را پیگیری کنند. - توییتر لایت (جهانی): توییتر لایت، که برای کاربران در مناطق با حساسیت به داده طراحی شده است، از حالت
standaloneبرای ارائه یک تجربه رسانه اجتماعی کارآمد و سبک استفاده می‌کند. این به کاربران در مناطقی با پهنای باند محدود اجازه می‌دهد تا متصل بمانند. - فلیپ‌کارت لایت (هند): فلیپ‌کارت لایت، یک PWA تجارت الکترونیک، از حالت
standaloneبرای ارائه یک تجربه خرید موبایل-اول برای کاربران در هند بهره می‌برد. این به کاربران با دستگاه‌های قدیمی‌تر و اتصالات اینترنت کندتر اجازه می‌دهد تا به راحتی محصولات را مرور و خریداری کنند. - علی‌اکسپرس (چین، جهانی): PWA علی‌اکسپرس در پلتفرم‌های مختلف در دسترس است و از سرویس ورکرها برای ارائه تجربه‌ای سریع‌تر در سراسر جهان بهره می‌برد.
بینش‌های عملی و بهترین شیوه‌ها
برای بهره‌برداری مؤثر از حالت‌های نمایش مانیفست PWA، بینش‌های عملی و بهترین شیوه‌های زیر را در نظر بگیرید:
- تجربه کاربری را در اولویت قرار دهید: حالت نمایشی را انتخاب کنید که به بهترین وجه با هدف و مخاطبان هدف PWA شما هماهنگ باشد.
- ناوبری واضح فراهم کنید: از ناوبری شهودی در PWA خود، به ویژه در حالت
fullscreenاطمینان حاصل کنید. - به طور کامل آزمایش کنید: PWA خود را در مرورگرها، دستگاه‌ها و سیستم‌عامل‌های مختلف آزمایش کنید.
- مکانیسم‌های جایگزین را پیاده‌سازی کنید: از
display_overrideبرای اطمینان از یک تجربه ثابت در پلتفرم‌های مختلف استفاده کنید. - برای عملکرد بهینه‌سازی کنید: زمان بارگذاری را به حداقل برسانید و PWA خود را برای استفاده آفلاین بهینه‌سازی کنید.
- بنرهای نصب اپلیکیشن را در نظر بگیرید: با استفاده از بنرهای نصب اپلیکیشن، کاربران را ترغیب کنید تا PWA شما را روی صفحه اصلی خود نصب کنند. مانیفست خود را به درستی برای فعال شدن این ویژگی پیکربندی کنید.
- مانیفست خود را به طور منظم به‌روزرسانی کنید: فایل مانیفست خود را با آخرین مشخصات و بهترین شیوه‌ها به‌روز نگه دارید.
- رفتار کاربر را تجزیه و تحلیل کنید: نحوه تعامل کاربران با PWA شما در حالت‌های نمایش مختلف را پیگیری کنید تا زمینه‌های بهبود را شناسایی کنید.
نتیجه‌گیری
تسلط بر پیکربندی حالت‌های نمایش مانیفست PWA برای ارائه تجربیات کاربری استثنایی بسیار مهم است. با درک تفاوت‌های ظریف هر گزینه نمایش و در نظر گرفتن الزامات خاص پلتفرم، می‌توانید PWA خود را برای نیازهای متنوع کاربران بهینه‌سازی کنید و یک تجربه واقعاً جذاب و شبیه به اپلیکیشن ایجاد کنید. به یاد داشته باشید که تجربه کاربری را در اولویت قرار دهید، به طور کامل در پلتفرم‌های مختلف آزمایش کنید و به طور مداوم PWA خود را بر اساس بازخورد کاربران و استانداردهای وب در حال تحول، اصلاح کنید. با پیروی از این بهترین شیوه‌ها، می‌توانید پتانسیل کامل PWAs را آزاد کنید و یک تجربه وب برتر را برای مخاطبان جهانی خود فراهم کنید.