مقالات مایکروسافت در مورد PWA بیان می‌کنند که این اپلیکیشن‌ها همان سایت‌ها هستند. بله، PWA ها فقط وب‌سایت هستند، اما بسیار فراتر از این هم هستند. اگر به درستی اجرا شوند، اپلیکیشن های وب پیشرو (PWA) مانند یک وب‌سایت نخواهد بود، بلکه شبیه یک برنامه “واقعی” خواهد بود. حالا احساس یک برنامه نیتیو به چه معناست؟ در این نوشتار در مورد نزدیک کردن اپلیکیشن های وب پیشرو (PWA) به اپلیکیشن های مخصوص پلتفرم صحبت خواهیم کرد.

برای پاسخ به این سوال، اجازه دهید از برنامه Apple Podcasts به عنوان مثال استفاده کنم. این برنامه در macOS روی دسکتاپ و در iOS (و به ترتیب iPadOS) در تلفن همراه موجود است. در حالی که پادکست یک برنامه رسانه‌ای است، ایده‌های اصلی که من با کمک آن مساله را توضیح می‌دهم در مورد سایر دسته‌های برنامه نیز کاربرد دارند.

قابلیت اجرای آفلاین

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

محتوای آفلاین در دسترس و مدیای قابل پخش

در حالت آفلاین، از طریق کشوی سمت چپ، همچنان می‌توانم به بخش بارگیری شده رفته و از قسمت‌های پادکست بارگیری شده که آماده پخش هستند و با تمام داده‌های مکمل مانند آثار هنری و توضیحات نمایش داده می‌شوند، لذت ببرم.

بارگیری فعال در پس‌زمینه

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

اشتراک‌گذاری و تعامل با سایر برنامه‌ها

برنامه پادکست به طور طبیعی با سایر برنامه‌ها ادغام می‌شود. به عنوان مثال، وقتی روی قسمتی که دوست دارم راست کلیک می‌کنم، می‌توانم آن را در برنامه‌های دیگر دستگاه خود، مانند برنامه پیام‌ها، به اشتراک بگذارم. همچنین به طور طبیعی با کلیپ بورد سیستم ادغام می‌شود. می‌توانم روی هر قسمت راست کلیک کرده و پیوند آن را کپی کنم.

برنامه در پس زمینه داده‌های جدید را بارگیری می‌کند

در تنظیمات برنامه Podcasts، می‌توانم برنامه را برای بارگیری خودکار قسمت‌های جدید پیکربندی کنم. من حتی مجبور نیستم در مورد آن فکر کنم، محتوای به روز همیشه فقط در آنجا خواهد بود. شعبده بازي.

حالت همگام بر روی ابر

در عین حال، اشتراک‌های من در همه دستگاه‌هایی که من مالک آن هستم همگام‌سازی می‌شود. در دنیایی بی عیب و نقص، من نگران این نیستم که اشتراک‌های پادکست خود را به صورت دستی همگام کنم. به همین ترتیب، من نباید اضطراب داشته باشم که حافظه دستگاه تلفن همراه من توسط قسمت‌هایی که قبلاً در دسکتاپ گوش داده‌ام و بالعکس مصرف شود. حالت پخش هماهنگ می‌شود و قسمت‌های گوش داده شده به طور خودکار حذف می‌شوند. امروزه این ویژگی برای اپلیکیشن های وب پیشرو (PWA) اهمیت زیادی پیدا کرده است.

کنترل‌های کلید سخت‌افزاری مدیا

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

مولتی‌تسک و میانبر برنامه

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

اقدامات سریع در منو

متداول‌ترین اقدامات برنامه، جستجو برای محتوای جدید و بررسی قسمت‌های جدید، درست از منوی زمینه برنامه در Dock در دسترس است. از طریق منوی Options، می‌توانم تصمیم بگیرم که برنامه را در زمان ورود باز کنم.

ادغام فایل سیستم

ممکن است فوراً به آن فکر نکنید، اما برنامه Podcasts به طور طبیعی با فایل سیستم ادغام می‌شود. وقتی یک قسمت پادکست را بارگیری می‌کنم، روی لپ تاپ من در مسیری ذخیره می‌شود.

ظاهر و احساس یک اپ مخصوص پلتفرم

نکته ظریف‌تری وجود دارد که برای یک برنامه iOS مانند پادکست بدیهی است:

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

نوار عنوان سفارشی

وقتی به پنجره برنامه Podcasts نگاه می کنید، متوجه می‌شوید که دارای یک نوار عنوان و نوار ابزار کلاسیک یکپارچه نیست، مانند، به عنوان مثال، پنجره مرورگر Safari، اما یک تجربه سفارشی شبیه به نوار کناری متصل به پنجره پخش‌کننده اصلی است.

انیمیشن‌های روان

انیمیشن‌های درون برنامه در پادکست‌ها سریع و روان هستند. به عنوان مثال، وقتی کشوی Episode Notes را در سمت راست باز می‌کنم، به زیبایی وارد می‌شود. وقتی یک قسمت را از بارگیری‌های خود حذف می‌کنم، قسمت‌های باقی مانده شناور می‌شوند و از فضای آزاد شده استفاده می‌کنند.

نمایش محتوا خارج از برنامه

برنامه Podcasts در iOS می‌تواند محتوا را در مکان‌های دیگری غیر از برنامه واقعی، به عنوان مثال، در نمای ابزارک‌های سیستم یا در قالب پیشنهاد Siri، نشان دهد. داشتن فراخوان‌های فعال که فقط نیاز به ضربه زدن دارند تا بتوانید با آنها ارتباط برقرار کنید، می‌تواند میزان تعامل مجدد برنامه‌ای مانند پادکست را تا حد زیادی افزایش دهد.

ویجت کنترل قفل صفحه

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

پوش نوتیفیکیشن

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

نشان آیکون برنامه

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

پخش رسانه بر تنظیمات صرفه‌جویی در مصرف انرژی اولویت دارد

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

مشاهده برنامه از طریق فروشگاه برنامه

در حالی که برنامه Podcasts بخشی از تجربه دسکتاپ macOS است، در iOS باید از App Store نصب شود.

منبع:

https://web.dev/app-like-pwas/

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

شما از دو طریق می‌توانید این کار را انجام دهید:

• نصب از طریق مرورگر.
• نصب از اپ استور.

داشتن کانال‌های توزیع مختلف راهی قدرتمند برای دستیابی به تعداد زیادی از کاربران است، اما انتخاب استراتژی مناسب برای تبلیغ آنها می‌تواند چالش‌برانگیز باشد.

این راهنما بهترین روش‌ها را برای ترکیب پیشنهادات نصب مختلف برای افزایش نرخ نصب و جلوگیری از رقابت بررسی می‌کند. پیشنهادات، شامل PWAهای نصب‌شده از مرورگر و App Store و همچنین برنامه‌های مخصوص پلت‌فرم است.

چرا اپلیکیشن را قابل‌نصب کنیم؟

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

اما داشتن هر دو برنامه وب قابل‌نصب و برنامه مخصوص پلتفرم می‌تواند برای کاربران گیج‌کننده باشد. بنابراین داشتن استراتژی نصب اپلیکیشن وب پیشرو (PWA) اهمیت خود را نشان می‌دهد. برای برخی از کاربران ممکن است بهترین برنامه، برنامه مخصوص پلتفرم باشد، اما برای برخی دیگر می‌تواند دارای اشکالاتی باشد:

• محدودیت‌های ذخیره‌سازی: نصب یک برنامه جدید ممکن است به معنی حذف دیگر برنامه‌ها یا پاک کردن فضا با حذف محتوای ارزشمند باشد. این به خصوص برای کاربران با دستگاه‌های ضعیف‌تر نمود بیشتری دارد.
• پهنای باند موجود: بارگیری یک برنامه می‌تواند یک روند پرهزینه و کند باشد. این مساله برای کاربرانی که دارای اتصال کند و اینترنت گران هستند، بسیار آزاردهنده است.
• اصطکاک: ترک یک وب‌سایت و انتقال به اپ استور برای بارگیری یک برنامه باعث ایجاد اصطکاک اضافی می‌شود و عملکرد کاربر را که می‌تواند مستقیماً در وب انجام شود به تأخیر می‌اندازد.
• چرخه به روزرسانی: ایجاد تغییر در برنامه‌های مخصوص پلتفرم ممکن است نیاز به انجام یک فرآیند بررسی برنامه داشته باشد، که می‌تواند روند تغییرات و آزمایشات را آهسته کند (به عنوان مثال آزمایشات A / B).

در برخی موارد، ممکن است درصد کاربرانی که برنامه مخصوص پلتفرم شما را بارگیری نمی‌کنند، زیاد باشد. به عنوان مثال، کسانی که فکر می‌کنند زیاد از برنامه استفاده نمی‌کنند یا نمی‌توانند هزینه چند مگابایت فضای ذخیره‌سازی را توجیه کنند. شما می‌توانید درصد این بخش از کاربران را از چند طریق تعیین کنید، به عنوان مثال با استفاده از یک تجزیه و تحلیل برای ردیابی درصد کاربران “فقط وب همراه“. آنالیز این داده ها کمک شایانی برای انتخاب مناسب استراتژی نصب اپلیکیشن وب پیشرو (PWA) می‌باشد.

اگر اندازه این بخش قابل‌توجه باشد، این نشانگر خوبی است که شما باید روش‌های جایگزین نصب خود را ارائه دهید.

تبلیغ نصب PWA خود از طریق مرورگر

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

برای برخی از برنامه‌ها، نصب برنامه‌های مخصوص پلتفرم بخشی کلیدی از مدل کسب و کار است، در این صورت، نشان دادن تبلیغات نصب برنامه ویژه پلتفرم منطقی است. اما، برخی از کاربران ممکن است راحت‌تر در وب بمانند. اگر بتوان آن بخش را شناسایی کرد، PWA فقط برای آنها نشان داده می‌شود (آنچه ما “PWA به عنوان بازگشت” می‌نامیم).

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

PWA به عنوان تجربه قابل‌نصب اولیه

هنگامی که PWA معیارهای قابلیت نصب را برآورده می‌کند، بیشتر مرورگرها نشانه‌ای را برای نصب PWA نشان می‌دهند. به عنوان مثال، دسک‌تاپ کروم یک نماد قابل‌نصب در نوار آدرس و در تلفن همراه یک مینی نوار نشان می‌دهد:

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

مانع از این شوید که PWA میزان نصب برنامه ویژه پلتفرم شما را بکاهد

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

اولین قدم برای اجرای این استراتژی، تعریف ابتکاری برای زمانی است که تبلیغ نصب PWA را به کاربران نشان می‌دهید، به عنوان مثال:

“یک کاربر PWA کاربری است که برنامه مخصوص پلتفرم را مشاهده کرده است اما آن را نصب نکرده است. کاربرانی که حداقل پنج بار به سایت بازگشته‌اند یا روی بنر برنامه کلیک کرده‌اند اما همچنان از وب‌سایت استفاده کرده‌اند. “

بنابراین، روش ابتکاری را می‌توان به روش زیر پیاده‌سازی کرد:

بنر نصب برنامه مخصوص پلتفرم را نشان دهید.

1. اگر کاربری بنر را رد کرد، یک کوکی با آن اطلاعات تنظیم کنید (به عنوان مثال document.cookie= "app-install-banner=dismissed“).

2. از کوکی دیگری برای ردیابی تعداد بازدیدهای کاربران از سایت استفاده کنید (به عنوان مثال document.cookie= "user-visits=1").

3. تابعی بنویسید، مانند isPWAUser، که از اطلاعات ذخیره شده در کوکیها به همراه getInstalledRelatedApps () API برای تعیین اینکه آیا کاربر “کاربر PWA” محسوب می‌شود، استفاده کند.

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

تبلیغ نصب PWA خود از طریق فروشگاه برنامه

برنامه‌هایی که در App Store موجود هستند می‌توانند با فناوری‌های مختلف از جمله تکنیک‌های PWA ساخته شوند.

در این بخش ، برنامه ها را در فروشگاه در دو گروه طبقه بندی می کنیم:

• برنامه‌های مخصوص پلتفرم: این برنامه‌ها بیشتر با کد مخصوص پلتفرم ساخته می‌شوند. اندازه آنها بستگی به سیستم عامل دارد، اما در Android معمولاً بالای 10 مگابایت و در  iOS بالای 30 مگابایت است. اگر PWA ندارید یا اگر برنامه خاص پلتفرم، مجموعه ویژگی‌های کامل‌تری را ارائه می‌دهد، ممکن است بخواهید برنامه مخصوص پلتفرم خود را تبلیغ کنید.

• برنامه‌های سبک: این برنامه‌ها می‌توانند با کد اختصاصی سیستم عامل نیز ساخته شوند، اما معمولاً با فناوری وب ساخته می‌شوند و در یک پوشش مخصوص پلتفرم بسته‌بندی می‌شوند. PWA های کامل را می‌توان در فروشگاه‌ها نیز بارگذاری کرد. برخی از شرکت‌ها ارائه این موارد به عنوان تجربه “ساده” را انتخاب می‌کنند و برخی دیگر نیز از این روش برای برنامه‌های اصلی (هسته) خود استفاده کرده‌اند.

تبلیغ برنامه‌های سبک

طبق یک مطالعه Google Play، به ازای هر 6 MB افزایش اندازه APK، نرخ تبدیل نصب 1٪ کاهش می‌یابد. این بدان معنی است که میزان تکمیل بارگیری یک برنامه 10 مگابایتی می‌تواند تقریباً 30٪ بیشتر از برنامه 100 مگابایتی باشد!

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

ارائه یک تجربه وب سبک

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

در وب می‌توان سیگنال‌های دستگاه را به دست آورد و تقریباً آنها را بر اساس دسته‌بندی دستگاه ها طبقه‌بندی کرد (به عنوان مثال “بالا” ، “متوسط” یا “پایین“). می‌توانید این اطلاعات را به روش‌های مختلف مانند استفاده از API های JavaScript یا رفتار مشتری بدست آورید.

استفاده از API های JavaScript

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

• navigator.hardwareConcurrency

• navigator.deviceMemory

• navigator.connection

نتیجه‌گیری

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

منبع:

https://web.dev/define-install-strategy/

برنامه‌های وب پیشرو (PWA) با استفاده از API های مدرن ساخته شده و بهبود می‌یابند تا قابلیت‌ها، قابلیت‌اطمینان و قابلیت‌نصب بیشتر را در هنگام دسترسی به هر کسی، در هر مکانی، در هر دستگاهی با یک پایگاه کد، فراهم کنند. برای کمک به شما در ایجاد بهترین تجربه ممکن، ‌می‌توان از چک‌لیست‌های زیر که مولفه‌های یک برنامه وب پیشرو خوب را شرح می‌دهند، استفاده کرد:

چک‌لیست اصلی مولفه‌های یک برنامه وب پیشرو خوب  (PWA)

این فهرست آنچه برنامه را قابل‌نصب و قابل‌استفاده برای همه کاربران می‌کند، صرف‌نظر از اندازه یا نوع ورودی، توصیف می‌کند.

سریع آغاز شود و سریع ادامه بدهد

عملکرد، نقش بسزایی در موفقیت هر تجربه آنلاین دارد، زیرا سایت‌های با عملکرد بالا کاربران را بهتر از سایت‌های ضعیف جذب می‌کنند. سایت‌ها باید روی بهینه‌سازی برای معیارهای عملکرد کاربر محور متمرکز شوند.

چرا؟

سرعت برای استفاده کاربران از برنامه شما بسیار مهم است. در حقیقت، با افزایش زمان بارگیری صفحه از یک ثانیه به ده ثانیه، احتمال پرش کاربر 123٪ افزایش می‌یابد. عملکرد با بارگزاری متوقف نمی‌شود. کاربران هرگز نباید منتظر باشند که آیا تعامل آنها – مثلاً با کلیک روی یک دکمه – ثبت شده است یا خیر. اسکرول و انیمیشن باید روان باشد. عملکرد بر کل تجربه شما تأثیر می‌گذارد، از نحوه درک کاربران از برنامه شما تا نحوه عملکرد واقعی آن.

در هر مرورگری کار کند

کاربران باید بتوانند از هر مرورگری که برای دسترسی به برنامه وب شما انتخاب می‌کنند، استفاده کنند.

چرا؟

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

به گفته جرمی کیت در Resilient Web Design، یک روش موثر برای انجام این کار، شناسایی عملکرد اصلی، در دسترس قرار دادن این قابلیت با استفاده از ساده‌ترین فناوری ممکن و سپس افزایش تجربه در صورت امکان است. در بسیاری از موارد، این به معنای شروع فقط با HTML برای ایجاد عملکرد اصلی و افزایش تجربه کاربر با CSS و JavaScript برای ایجاد تجربه جذاب‌تر است.

ارسال فرم را به عنوان مثال در نظر بگیرید. ساده‌ترین راه برای پیاده‌سازی آن، فرم HTML است که درخواست POST را ارسال می‌کند. پس از ایجاد این فرم، می‌توانید با استفاده از JavaScript تجربه اعتبار سنجی فرم را افزایش داده و فرم را از طریق AJAX ارسال کنید و تجربه کاربرانی را که می‌خواهند از آن استفاده کنند را بهبود بخشید.

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

رسپانسیو بودن در هر سایزی

کاربران باید بتوانند از PWA شما در هر اندازه صفحه استفاده کنند و تمام مطالب با هر اندازه‌ای می‌بایست در دسترس باشند.

چرا؟

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

وظایفی که کاربران می‌خواهند تکمیل کنند و محتوایی که می‌خواهند به آن دسترسی پیدا کنند با اندازه نمای نمایش تغییر نمی‌کند. محتوا را می‌توان در اندازه‌های مختلف ویوپورت مرتب کرد. در واقع، همانطور که لوک وروبلوسکی در کتاب خود Mobile First بیان کرده است، شروع از سایز کوچک به بزرگ به جای عکس آن می‌تواند در واقع طراحی سایت را بهبود بخشد:

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

یک صفحه آفلاین آماده کنید

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

چرا؟

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

برنامه شما قابل‌نصب است

کاربرانی که برنامه‌هایی را به دستگاه خود نصب یا اضافه می‌کنند بیشتر تمایل دارند با آن برنامه‌ها ارتباط برقرار کنند.

چرا؟

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

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

چک لیست برنامه وب پیشرفته بهینه 

برای ایجاد یک برنامه وب پیشرفته واقعاً عالی، برنامه‌ای که احساس شود در کلاس خود بهترین است، به موارد دیگری بیش از چک لیست‌اصلی برای مولفه‌های یک برنامه وب پیشرو خوب نیاز دارید. بهترین چک لیست برنامه Progressive Web App این است که کاربر شما احساس کند برنامه بخشی از دستگاهی است که در حال کار با آن است در حالی که از آنچه قدرت وب ایجاد می‌کند نیز بهره می‌برد.

تجربه آفلاین ارائه دهد

در مواقعی که نیاز اساسی به اتصال به اینترنت وجود ندارد، برنامه شما در حالت آفلاین چنان باید کار کند که در صورت آنلاین کار می‌کند.

چرا؟

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

کاملاً قابل دسترسی است

همه تعاملات کاربر شرایط دسترسی WCAG 2.0 را پاس می‌کنند.

چرا؟

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

از طریق جستجو قابل یافتن است

برنامه شما می‌بایست به راحتی از طریق جستجو قابل یافتن باشد.

چرا؟

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

با هر نوع ورودی کار می‌کند

PWA شما باید با ماوس، صفحه کلید، قلم یا لمس به یک اندازه قابل استفاده باشد.

چرا؟

دستگاه‌ها روش‌های ورودی مختلفی را ارائه می‌دهند و کاربران باید بتوانند هنگام استفاده از برنامه شما، به طور یکپارچه بین آنها جابجا شوند. همچنین، روش‌های ورودی نباید به اندازه صفحه بستگی داشته باشند، به این معنی که ویوپورت‌های بزرگ نیاز به پشتیبانی از لمس و ویوپورت‌های کوچک باید از صفحه کلید و موش پشتیبانی کنند. در حد توانایی خود، اطمینان حاصل کنید که برنامه و همه ویژگی‌های آن از استفاده از هر روش ورودی که کاربر شما برای استفاده انتخاب کرده پشتیبانی می‌کند. در صورت لزوم، شما همچنین باید ویژگی‌های برنامه خود را افزایش دهید تا امکان کنترل‌های ورودی خاص را نیز فراهم کند (مانند کشیدن برای رفرش کردن صفحه).

برای کسب مجوز از کاربر زمینه منطقی لازم را ایجاد می‌کند

هنگام درخواست اجازه استفاده از API های قدرتمند، زمینه ایجاد کنید و دلایل منطقی ارائه دهید و فقط در صورت نیاز به API از کاربر درخواست کنید.

چرا؟

API هایی که باعث اعلان مجوز می‌شوند، مانند اعلان‌ها، موقعیت جغرافیایی و اطلاعات کاربری، برای کاربر ایجاد مزاحمت می‌کنند، زیرا به عملکرد قدرتمندی که نیاز به انتخاب دارد مربوط می‌شوند. راه‌اندازی این درخواست‌ها بدون ایجاد زمینه باعث می‌شود کاربران کمتر مجوزهای مورد نظر را بپذیرند و در آینده به آنها بی‌اعتماد شوند. درعوض، فقط پس از ارائه دلایل منطقی مناسب به کاربر برای اینکه چرا به آن مجوز احتیاج دارید، آن دستورات را فعال کنید.

بهترین روش‌ها را برای کد سالم انتخاب می‌کند

سالم نگه داشتن پایگاه کد، دستیابی به اهداف و ارائه ویژگی‌های جدید را آسان می‌کند.

چرا؟

موارد زیادی در ساخت یک برنامه وب مدرن وجود دارد. به روز نگه داشتن برنامه و پایگاه کد خود، ارائه ویژگی‌های جدید را که با اهداف دیگر ذکر شده در این چک لیست مطابقت دارند، برای شما آسان می‌کند.

منبع:

https://web.dev/pwa-checklist/

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

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

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

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

سه ستون اپلیکیشن

اپلیکیشن‌های پیشرو در وب (PWA) برنامه‌های تحت وب هستند که به گونه‌ای طراحی شده اند که قابلیت، قابلیت‌اطمینان و نصب دارند. این سه ستون آن‌ها را به تجربه‌ای تبدیل می‌کنند که احساس یک اپلیکیشن نیتیو به کاربر منتقل می‌شود.

قابلیت

وب امروزه کاملاً قادر به انجام هر کاری است. به عنوان مثال، می‌توانید با استفاده از WebRTC، موقعیت جغرافیایی، اعلان‌های فشرده و یک برنامه گفتگوی ویدیویی فرامحلی ایجاد کنید. می‌توانید آن برنامه را قابل نصب کنید و آن مکالمه‌ها را با WebGL و WebVR به صورت مجازی انجام دهید. با معرفی WebAssemble، توسعه‌دهندگان می‌توانند از اکوسیستم‌های دیگر مانند C ، C ++ و Rust استفاده کنند و دهه‌ها کار و قابلیت را به وب اضافه کنند. به عنوان مثال، Squoosh.app برای فشرده‌سازی تصویر پیشرفته از این قابلیت استفاده می‌کند.

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

بین APIهای مدرن، WebAssemble و API های جدید، اپلیکیشن‌های وب از هر زمان دیگری توانایی بیشتری دارند و این قابلیت‌ها در حال رشد هستند.

قابل اعتماد

یک اپلیکیشن‌ پیشرو در وب (PWA) قابل اعتماد بدون در نظر گرفتن شبکه، سریع و قابل اعتماد است.

سرعت برای کسب تجربه کاربری مناسب، بسیار مهم است. در حقیقت، با افزایش زمان بارگیری صفحه از 1 ثانیه به ده ثانیه، احتمال پرش کاربر 123٪ افزایش می‌یابد. عملکرد پس از رویداد بارگیری متوقف نمی‌شود. کاربران هرگز نباید دغدغه این را داشته باشند که آیا تعامل آنها – مثلاً با کلیک روی یک دکمه –اجرا شده است یا خیر. اسکرول و انیمیشن باید روان باشد. عملکرد بر کل تجربه کاربر تأثیر می‌گذارد، از نحوه درک کاربران از برنامه شما تا نحوه عملکرد واقعی آن.

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

کاربران عاشق برنامه‌هایی هستند که در یک چشم به هم زدن به تعامل پاسخ می‌دهند و تجربه‌ای هستند که می توان به آن اعتماد کرد.

قابلیت نصب

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

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

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

بهترین در هر دو عالم!

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

اعداد دروغ نمی گویند! شرکت‌هایی که اپلیکیشن‌‌های پیشرو در وب (PWA) را راه‌اندازی کرده‌اند، نتایج چشمگیری را به دست آورده‌اند. به عنوان مثال، توییتر شاهد افزایش 65 درصدی صفحات در هر جلسه، 75 درصد توییت‌های بیشتر و 20 درصد کاهش نرخ پرش بود، در حالی که حجم برنامه آنها بیش از 97 درصد کاهش یافته است. پس از استفاده، Nikkei شاهد 2.3 برابر ترافیک ارگانیک، 58٪ اشتراک بیشتر و 49٪ بیشتر کاربران فعال روزانه بود. Hulu تجربه دسکتاپ مخصوص پلتفرم خود را با یک اپلیکیشن‌ پیشرو در وب (PWA) جایگزین کرد و در آمار بازدیدهای برگشتی به 27٪ افزایش دست یافت.

برنامه پیشرو در وب (PWA) فرصتی منحصر به فرد برای ارائه تجربه‌ای تحت وب که کاربران شما آن را دوست دارند فراهم می‌کند. با استفاده از جدیدترین ویژگی‌های وب برای به وجود آوردن قابلیت‌ها و قابلیت اطمینان بیشتر، برنامه پیشرو در وب اجازه می‌دهند آنچه را که می‌سازید توسط هر کسی، در هر مکان، بر روی هر دستگاهی با یک پایگاه کد نصب شود.