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

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

چرا

سرعت برای ترغیب کاربران به استفاده از برنامه شما بسیار مهم است. در واقع، با افزایش زمان بارگذاری صفحه از یک ثانیه به ده ثانیه، احتمال بازگشت کاربر تا 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 قابل استفاده هستند.

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

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

چگونه

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

وقتی کاربران آفلاین هستند، نگه داشتن آنها در 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 شما خراب نمی شود. نیاز به تجزیه و تحلیل کد ایستا، مانند لینتینگ، و همچنین آزمایش خودکار، در چندین مرورگر و کانال انتشار را در نظر بگیرید. این تکنیک‌ها می‌توانند به شناسایی خطاها قبل از شروع تولید کمک کنند.