چه چیزی یک برنامه وب پیشرفته خوب را می سازد؟

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

چرا

سرعت برای ترغیب کاربران به استفاده از برنامه شما بسیار مهم است. در واقع، با افزایش زمان بارگذاری صفحه از یک ثانیه به ده ثانیه، احتمال بازگشت کاربر تا 123 درصد افزایش می یابد. عملکرد با رویداد load نیز متوقف نمی شود. کاربران هرگز نباید تعجب کنند که آیا تعامل آنها - برای مثال، کلیک کردن روی یک دکمه - ثبت شده است یا خیر. اسکرول و انیمیشن باید صاف باشد. عملکرد بر کل تجربه شما تأثیر می گذارد، هم در نحوه عملکرد برنامه و هم در درک کاربران از آن.

اگرچه همه برنامه‌ها نیازهای متفاوتی دارند، ممیزی‌های عملکرد در Lighthouse مبتنی بر Core Web Vitals هستند و امتیاز بالا در این ممیزی‌ها باعث می‌شود کاربران شما تجربه‌ای لذت‌بخش داشته باشند. همچنین می‌توانید از PageSpeed ​​Insights یا گزارش تجربه کاربر Chrome برای دریافت داده‌های عملکرد واقعی برای برنامه وب خود استفاده کنید.

چگونه

راهنمای ما در مورد زمان‌های بارگذاری سریع را دنبال کنید تا یاد بگیرید چگونه PWA خود را سریع شروع کنید و سریع بمانید.

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

چرا

برنامه های وب پیشرو ابتدا برنامه های وب هستند و این بدان معناست که باید در مرورگرها کار کنند.

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

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

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

چگونه

طراحی وب انعطاف‌پذیر جرمی کیت منبعی عالی است که نحوه تفکر در مورد طراحی وب را در این متدولوژی متقابل مرورگر و مترقی توضیح می‌دهد.

خواندن اضافی

• A List Apart's Understanding Progressive Enhancement مقدمه خوبی برای این موضوع است.
• تقویت پیشرونده مجله Smashing: چیست و چگونه از آن استفاده کنیم؟ مقدمه ای عملی می دهد و به موضوعات پیشرفته تر پیوند می دهد.
• مقاله تشخیص ویژگی پیاده سازی MDN در مورد چگونگی شناسایی یک ویژگی با پرس و جو مستقیم آن بحث می کند.

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

چرا

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

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

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

چگونه

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

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

چرا

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

چگونه

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

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

چرا

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

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

چگونه

راهنمای قابل نصب ما را دنبال کنید تا یاد بگیرید چگونه PWA خود را قابل نصب کنید.

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

چرا

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

چگونه

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

همه تعاملات کاربر الزامات دسترسی WCAG 2.0 را تأیید می کنند.

چرا

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

چگونه

مقدمه W3C برای دسترسی به وب مکان خوبی برای شروع است. اکثر تست های دسترسی باید به صورت دستی انجام شود. ابزارهایی مانند ممیزی دسترس‌پذیری در Lighthouse، ax و Accessibility Insights می‌توانند به شما در خودکارسازی برخی از آزمایش‌های دسترسی کمک کنند. همچنین مهم است که از عناصر درست معنایی به جای بازآفرینی آن عناصر به تنهایی استفاده کنید، به عنوان مثال، عناصر a و button . این تضمین می‌کند که وقتی نیاز به ساخت ویژگی‌های پیشرفته‌تری دارید، انتظارات دسترسی برآورده می‌شوند (مانند زمان استفاده از فلش‌ها در مقابل برگه‌ها). کارت تغذیه A11Y توصیه های بسیار خوبی در این مورد برای برخی از اجزای رایج دارد.

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

چرا

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

چگونه

با اطمینان از اینکه هر URL دارای عنوان و توضیحات متا منحصر به فرد و توصیفی است، شروع کنید. سپس می‌توانید از کنسول جستجوی Google و ممیزی‌های بهینه‌سازی موتور جستجو در Lighthouse برای اشکال‌زدایی و رفع مشکلات کشف‌پذیری PWA خود استفاده کنید. همچنین می توانید از ابزارهای مالک سایت Bing یا Yandex استفاده کنید و داده های ساختاریافته را با استفاده از طرحواره های Schema.org در PWA خود در نظر بگیرید.

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

چرا

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

چگونه

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

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

چرا

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

چگونه

مقاله Permission UX و UX Planet راههای صحیح درخواست مجوز از کاربران منابع خوبی برای درک نحوه طراحی درخواست‌های مجوز هستند که در عین تمرکز بر تلفن همراه، برای همه PWAها اعمال می‌شوند.

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

چرا

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

چگونه

تعدادی بررسی با اولویت بالا برای اطمینان از یک پایگاه کد سالم وجود دارد:

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