مولفه‌های یک برنامه وب پیشرو خوب
برنامه‌های وب پیشرو (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 هایی که باعث اعلان مجوز می‌شوند، مانند اعلان‌ها، موقعیت جغرافیایی و اطلاعات کاربری، برای کاربر ایجاد مزاحمت می‌کنند، زیرا به عملکرد قدرتمندی که نیاز به انتخاب دارد مربوط می‌شوند. راه‌اندازی این درخواست‌ها بدون ایجاد زمینه باعث می‌شود کاربران کمتر مجوزهای مورد نظر را بپذیرند و در آینده به آنها بی‌اعتماد شوند. درعوض، فقط پس از ارائه دلایل منطقی مناسب به کاربر برای اینکه چرا به آن مجوز احتیاج دارید، آن دستورات را فعال کنید.
بهترین روش‌ها را برای کد سالم انتخاب می‌کند
سالم نگه داشتن پایگاه کد، دستیابی به اهداف و ارائه ویژگی‌های جدید را آسان می‌کند.
چرا؟
موارد زیادی در ساخت یک برنامه وب مدرن وجود دارد. به روز نگه داشتن برنامه و پایگاه کد خود، ارائه ویژگی‌های جدید را که با اهداف دیگر ذکر شده در این چک لیست مطابقت دارند، برای شما آسان می‌کند.
منبع: