برنامه‌های وب پیش‌رونده (PWA) با APIهای مدرن ساخته و بهبود یافته‌اند تا قابلیت‌ها، قابلیت اطمینان و قابلیت نصب پیشرفته‌ای را ارائه دهند و در عین حال با یک کدبیس واحد به هر کسی، در هر مکانی و روی هر دستگاهی دسترسی داشته باشند. برای کمک به شما در ایجاد بهترین تجربه ممکن، از چک‌لیست‌ها و توصیه‌های اصلی و بهینه برای راهنمایی خود استفاده کنید.
چک لیست اصلی برنامه وب پیش‌رونده
چک لیست اپلیکیشن‌های وب پیش‌رونده، توضیح می‌دهد که چه چیزی یک اپلیکیشن را صرف نظر از اندازه یا نوع ورودی، قابل نصب و استفاده برای همه کاربران می‌کند.
سریع شروع می‌شود، سریع می‌ماند
عملکرد نقش مهمی در موفقیت هر تجربه آنلاینی ایفا می‌کند، زیرا سایت‌های با عملکرد بالا، کاربران را بهتر از سایت‌های با عملکرد ضعیف، جذب و حفظ می‌کنند. بر بهینه‌سازی معیارهای عملکرد کاربر محور تمرکز کنید.
چرا
سرعت برای ترغیب کاربران به استفاده از برنامه شما بسیار مهم است. در واقع، با افزایش زمان بارگذاری صفحه از یک ثانیه به ده ثانیه، احتمال پرش کاربر ۱۲۳٪ افزایش می‌یابد. عملکرد نیز با رویداد load متوقف نمی‌شود. کاربران هرگز نباید از خود بپرسند که آیا تعامل آنها، مانند کلیک بر روی یک دکمه، ثبت شده است یا خیر. پیمایش و انیمیشن باید روان به نظر برسد. عملکرد بر کل تجربه شما، چه در نحوه رفتار برنامه شما و چه در نحوه درک کاربران از آن، تأثیر می‌گذارد.
اگرچه همه برنامه‌ها نیازهای متفاوتی دارند، اما ممیزی‌های عملکرد در Lighthouse بر اساس Core Web Vitals انجام می‌شود و کسب امتیاز بالا در این ممیزی‌ها باعث می‌شود کاربران شما تجربه لذت‌بخش‌تری داشته باشند. همچنین می‌توانید از PageSpeed Insights یا Chrome User Experience Report برای دریافت داده‌های عملکرد در دنیای واقعی برای برنامه وب خود استفاده کنید.
چگونه
برای یادگیری نحوه‌ی شروع سریع و حفظ سرعت PWA خود، راهنمای ما در مورد زمان بارگذاری سریع را دنبال کنید.
در هر مرورگری کار می‌کند
کاربران می‌توانند قبل از نصب، از هر مرورگری که انتخاب می‌کنند برای دسترسی به برنامه وب شما استفاده کنند.
چرا
برنامه‌های وب پیش‌رونده در درجه اول برنامه‌های وب هستند و این بدان معناست که باید در مرورگرها کار کنند.
طبق گفته جرمی کیت در کتاب «طراحی وب انعطاف‌پذیر» ، یک راه مؤثر برای انجام این کار، شناسایی ویژگی‌های اصلی، در دسترس قرار دادن این ویژگی‌ها با استفاده از ساده‌ترین فناوری ممکن و سپس بهبود تجربه کاربری در صورت امکان است. در بسیاری از موارد، این به معنای شروع با HTML برای ایجاد ویژگی‌های اصلی و بهبود تجربه کاربری با CSS و جاوا اسکریپت برای ایجاد یک تجربه جذاب‌تر است.
برای مثال، ارسال فرم را در نظر بگیرید. ساده‌ترین راه برای پیاده‌سازی آن، یک فرم HTML است که یک درخواست POST ارسال می‌کند. پس از ساخت آن، می‌توانید تجربه خود را با جاوا اسکریپت برای انجام اعتبارسنجی فرم و ارسال فرم از طریق AJAX بهبود بخشید و تجربه کاربرانی را که می‌توانند از آن پشتیبانی کنند، بهبود بخشید.
کاربران شما سایت شما را در طیف وسیعی از دستگاه‌ها و مرورگرها تجربه می‌کنند. شما نمی‌توانید فقط کاربران برتر آن طیف را هدف قرار دهید. از تشخیص ویژگی‌ها برای ارائه یک تجربه قابل استفاده برای وسیع‌ترین طیف ممکن از کاربران بالقوه، از جمله کسانی که از مرورگرها و دستگاه‌هایی استفاده می‌کنند که هنوز وجود ندارند، استفاده کنید.
چگونه
کتاب «طراحی وب انعطاف‌پذیر» نوشته جرمی کیت، منبعی عالی است که نحوه تفکر در مورد طراحی وب را با این روش‌شناسی مترقی و قابل اجرا در مرورگرهای مختلف شرح می‌دهد.
مطالعه اضافی
- مقاله «درک بهبود پیش‌رونده» از مجله A List Apart مقدمه خوبی برای این موضوع است.
- «بهبود تدریجی: چیست و چگونه از آن استفاده کنیم؟» از مجله اسمشینگ، مقدمه‌ای کاربردی ارائه می‌دهد و به مباحث پیشرفته‌تر پیوند می‌دهد.
- مقاله «پیاده‌سازی تشخیص ویژگی» از MDN، نحوه تشخیص یک ویژگی را با پرس‌وجوی مستقیم از آن مورد بحث قرار می‌دهد.
واکنش‌گرا (ریسپانسیو) با هر اندازه صفحه نمایش
کاربران می‌توانند از PWA شما در هر اندازه صفحه نمایشی استفاده کنند و تمام محتوای آن در هر اندازه نمایشگری در دسترس است.
چرا
دستگاه‌ها در اندازه‌های مختلفی عرضه می‌شوند و کاربران ممکن است از برنامه شما در اندازه‌های مختلفی، حتی در یک دستگاه، استفاده کنند. بنابراین، بسیار مهم است که مطمئن شوید محتوای شما در محدوده‌ی دید (viewport) قرار می‌گیرد و تمام ویژگی‌ها و محتوای سایت شما در تمام اندازه‌های دید قابل استفاده است.
کارهایی که کاربران می‌خواهند انجام دهند و محتوایی که می‌خواهند به آن دسترسی داشته باشند، با اندازه‌ی نمایشگر تغییر نمی‌کنند. شما می‌توانید محتوای خود را برای اندازه‌های مختلف نمایشگر تنظیم مجدد کنید، و همه چیز باید به نحوی در آنجا باشد. در واقع، همانطور که لوک وروبلوسکی در کتاب خود «اول موبایل» بیان می‌کند، شروع از اندازه‌های کوچک و تغییر طراحی برای صفحات نمایش بزرگتر می‌تواند طراحی سایت را بهبود بخشد:
«دستگاه‌های تلفن همراه مستلزم آن هستند که تیم‌های توسعه نرم‌افزار فقط روی مهم‌ترین داده‌ها و اقدامات در یک برنامه تمرکز کنند. در یک صفحه نمایش ۳۲۰ در ۴۸۰ پیکسلی جایی برای عناصر غیرضروری و نامربوط وجود ندارد. شما باید اولویت‌بندی کنید.»
چگونه
منابع زیادی در مورد طراحی واکنش‌گرا وجود دارد، از جمله: مقاله اصلی نوشته Ethan Marcotte و مجموعه‌ای از مفاهیم مهم مرتبط با آن، و همچنین کتاب‌ها و سخنرانی‌های فراوان.
برای محدود کردن این بحث به جنبه‌های محتوایی طراحی واکنش‌گرا، به موارد زیر مراجعه کنید:
- طراحی محتوا محور
- طرح‌بندی‌های واکنش‌گرا با قابلیت خروج محتوا .
- هفت افسانه مرگبار در مورد موبایل ، که به همان اندازه که به سایت‌های واکنش‌گرا در اندازه‌های کوچک مربوط می‌شود، به تمام سایت‌های موبایل نیز مربوط می‌شود.
یک صفحه آفلاین سفارشی ارائه می‌دهد
وقتی کاربران آفلاین هستند، نگه داشتن آنها در PWA شما، تجربه‌ای روان‌تر از بازگشت به صفحه پیش‌فرض مرورگر آفلاین فراهم می‌کند.
چرا
کاربران انتظار دارند برنامه‌های نصب‌شده صرف‌نظر از وضعیت اتصالشان کار کنند. یک برنامه‌ی مختص پلتفرم هرگز هنگام آفلاین بودن صفحه‌ی خالی نشان نمی‌دهد و یک PWA هرگز نباید صفحه‌ی آفلاین پیش‌فرض مرورگر را نشان دهد. ارائه‌ی یک تجربه‌ی آفلاین سفارشی، چه زمانی که کاربر به آدرسی هدایت می‌شود که ذخیره نشده است و چه زمانی که کاربر سعی می‌کند از ویژگی‌ای استفاده کند که نیاز به اتصال دارد، به تجربه‌ی وب شما کمک می‌کند تا مانند بخشی از دستگاهی که روی آن اجرا می‌شود، به نظر برسد.
چگونه
در طول رویداد install یک سرویس ورکر، می‌توانید یک صفحه آفلاین سفارشی را از قبل ذخیره کنید تا هنگام آفلاین شدن کاربر نمایش داده شود. برای یادگیری نحوه پیاده‌سازی آن ، بخش «ایجاد یک صفحه جایگزین آفلاین» را مطالعه کنید. اگر هیچ صفحه آفلاینی ارائه نشود، کروم همچنان یک صفحه آفلاین ساده را نشان می‌دهد.
قابل نصب است
کاربرانی که برنامه‌هایی را نصب یا به دستگاه خود اضافه می‌کنند، تمایل دارند بیشتر با آن برنامه‌ها تعامل داشته باشند.
چرا
نصب یک برنامه وب پیش‌رونده باعث می‌شود که ظاهر، حس و رفتار آن مانند سایر برنامه‌های نصب شده باشد. این برنامه از همان جایی که کاربران سایر برنامه‌های خود را اجرا می‌کنند، اجرا می‌شود. این برنامه در پنجره برنامه خود، جدا از مرورگر، اجرا می‌شود و درست مانند سایر برنامه‌ها در لیست وظایف ظاهر می‌شود.
همانند برنامه‌های مخصوص دستگاه، کاربرانی که برنامه‌های شما را نصب می‌کنند، بیشترین تعامل را با مخاطبان شما دارند و اغلب معیارهای تعامل آنها با کاربران برنامه در دستگاه‌های تلفن همراه برابر است. این معیارها شامل بازدیدهای مکرر بیشتر، زمان طولانی‌تر در سایت شما و نرخ تبدیل بالاتر نسبت به بازدیدکنندگان معمولی است.
چگونه
راهنمای نصب ما را دنبال کنید.
چک لیست بهینه برای اپلیکیشن وب پیش‌رونده
برای ایجاد یک PWA واقعاً عالی، برنامه‌ای که مانند یک برنامه‌ی درجه یک به نظر برسد، به چیزی بیش از چک لیست اصلی نیاز دارید. چک لیست بهینه‌ی PWA در مورد این است که PWA شما طوری باشد که انگار بخشی از دستگاهی است که روی آن اجرا می‌شود، در عین حال از آنچه وب را قدرتمند می‌کند، بهره ببرد.
یک تجربه آفلاین ارائه می‌دهد
در جایی که اتصال به اینترنت کاملاً ضروری نیست، برنامه شما به صورت آفلاین نیز مانند آنلاین کار می‌کند.
چرا
کاربران علاوه بر ارائه یک صفحه آفلاین سفارشی، انتظار دارند که PWAها به صورت آفلاین نیز قابل استفاده باشند. به عنوان مثال، برنامه‌های مسافرتی و هواپیمایی باید جزئیات سفر و کارت‌های پرواز را به راحتی در حالت آفلاین در دسترس داشته باشند. برنامه‌های موسیقی، ویدئو و پادکست باید امکان پخش آفلاین را فراهم کنند. برنامه‌های اجتماعی و خبری باید محتوای اخیر را ذخیره کنند تا کاربران بتوانند آن را به صورت آفلاین بخوانند. کاربران همچنین انتظار دارند که در حالت آفلاین نیز احراز هویت شوند، بنابراین برای احراز هویت آفلاین طراحی کنید.
یک PWA آفلاین، تجربه‌ای کاملاً شبیه به یک اپلیکیشن را برای کاربران فراهم می‌کند.
چگونه
پس از تعیین اینکه کاربران شما انتظار دارند کدام ویژگی‌ها به صورت آفلاین کار کنند، باید محتوای خود را در دسترس و قابل انطباق با زمینه‌های آفلاین قرار دهید. می‌توانید از IndexedDB ، یک سیستم ذخیره‌سازی NoSQL درون مرورگر، برای ذخیره و بازیابی داده‌ها و همگام‌سازی پس‌زمینه استفاده کنید تا به کاربران اجازه دهید در حالت آفلاین اقداماتی انجام دهند و ارتباطات سرور را تا زمانی که کاربر دوباره اتصال پایدار داشته باشد، به تعویق بیندازید. می‌توانید از سرویس ورکرها برای ذخیره انواع دیگر محتوا، مانند تصاویر، فایل‌های ویدیویی و فایل‌های صوتی، برای استفاده آفلاین و پیاده‌سازی جلسات امن و طولانی مدت برای احراز هویت کاربران استفاده کنید.
از دیدگاه تجربه کاربری، می‌توانید از صفحات اسکلتی استفاده کنید که به کاربران درکی از سرعت و محتوا در حین بارگذاری می‌دهد که می‌تواند در صورت نیاز به محتوای ذخیره شده یا یک نشانگر آفلاین بازگردد.
کاملاً قابل دسترسی
تمام تعاملات کاربر مطابق با جدیدترین استاندارد بین‌المللی دستورالعمل‌های دسترسی به محتوای وب (WCAG) است.
چرا
اکثر کاربران، در برهه‌ای از زندگی خود، می‌خواهند از PWA شما به روشی که تحت پوشش WCAG است، استفاده کنند. توانایی انسان‌ها برای تعامل و درک PWA شما در یک طیف قرار دارد و نیازها می‌توانند موقت یا دائمی باشند. با قابل دسترس کردن PWA خود، آن را برای همه قابل استفاده می‌کنید.
چگونه
مقدمه‌ای بر دسترسی‌پذیری وب از W3C نقطه شروع خوبی است. اکثر تست‌های دسترسی‌پذیری باید به صورت دستی انجام شوند. حسابرسی دسترسی‌پذیری در Lighthouse ، axe و Accessibility Insights می‌تواند به شما در خودکارسازی برخی از تست‌های دسترسی‌پذیری کمک کند. همچنین استفاده از عناصری که از نظر معنایی صحیح هستند به جای بازسازی آن عناصر به تنهایی، مانند عناصر <a> و <button> ، بسیار مهم است. این تضمین می‌کند که وقتی نیاز به ساخت ویژگی‌های پیشرفته‌تر دارید، انتظارات دسترسی‌پذیری برآورده می‌شوند، مانند زمان استفاده از فلش‌ها به جای تب‌ها.
کارت‌های تغذیه A11Y در این مورد برای برخی از اجزای رایج، توصیه‌های بسیار خوبی دارند.
قابل کشف در جستجو
PWA شما به راحتی از طریق جستجو قابل کشف است.
چرا
یکی از بزرگترین مزایای وب، امکان کشف سایت‌ها و برنامه‌ها از طریق جستجو است. در واقع، بیش از نیمی از کل ترافیک وب‌سایت از جستجوی ارگانیک ناشی می‌شود. اطمینان از وجود URLهای متعارف برای محتوا و اینکه موتورهای جستجو می‌توانند سایت شما را ایندکس کنند، برای اینکه کاربران بالقوه بتوانند PWA شما را پیدا کنند، بسیار مهم است. این امر به ویژه هنگام اتخاذ رندر سمت کلاینت صادق است.
چگونه
با اطمینان از اینکه هر URL یک عنوان و توضیحات متای منحصر به فرد و توصیفی دارد، شروع کنید. سپس می‌توانید از کنسول جستجوی گوگل و ممیزی‌های بهینه‌سازی موتور جستجو در Lighthouse برای اشکال‌زدایی و رفع مشکلات قابلیت کشف PWA خود استفاده کنید.
همچنین می‌توانید از ابزارهای مالک سایت بینگ یا یاندکس استفاده کنید و گنجاندن داده‌های ساختاریافته با استفاده از طرحواره‌های Schema.org را در PWA خود در نظر بگیرید.
با هر نوع ورودی کار می‌کند
PWA شما به طور یکسان با ماوس، صفحه کلید، قلم یا لمس قابل استفاده است.
چرا
دستگاه‌ها روش‌های ورودی متنوعی را ارائه می‌دهند و کاربران باید بتوانند هنگام استفاده از برنامه شما، به طور یکپارچه بین آنها جابجا شوند. به همان اندازه مهم، روش‌های ورودی نباید به اندازه صفحه نمایش وابسته باشند، به این معنی که نماهای بزرگ باید از لمس پشتیبانی کنند و نماهای کوچک باید از صفحه کلید و ماوس پشتیبانی کنند. تا حد امکان، مطمئن شوید که برنامه شما و تمام ویژگی‌های آن از استفاده از هر روش ورودی که کاربر ممکن است انتخاب کند، پشتیبانی می‌کنند. در صورت لزوم، تجربیات را بهبود بخشید تا امکان کنترل‌های خاص ورودی (مانند کشیدن برای تازه کردن) نیز فراهم شود.
چگونه
رابط برنامه‌نویسی کاربردی Pointer Events یک رابط کاربری یکپارچه برای کار با گزینه‌های ورودی مختلف ارائه می‌دهد و به ویژه برای افزودن پشتیبانی از قلم مناسب است. برای پشتیبانی از هر دو حالت لمسی و صفحه‌کلید، مطمئن شوید که از عناصر معنایی صحیح (لنگرها، دکمه‌ها، کنترل‌های فرم و غیره) استفاده می‌کنید و آنها را با HTML غیرمعنایی بازسازی نمی‌کنید. هنگام افزودن تعاملاتی که با رفتن ماوس فعال می‌شوند، مطمئن شوید که با کلیک یا ضربه نیز فعال می‌شوند.
زمینه را برای درخواست‌های مجوز فراهم می‌کند
هنگام درخواست اجازه برای استفاده از APIهای قدرتمند، زمینه را فراهم کنید و فقط زمانی که به API نیاز است، درخواست کنید.
چرا
رابط‌های برنامه‌نویسی کاربردی (API) که درخواست مجوز، مانند اعلان‌ها، موقعیت مکانی و اعتبارنامه‌ها را فعال می‌کنند، عمداً طوری طراحی شده‌اند که برای کاربر آزاردهنده باشند، زیرا معمولاً به ویژگی‌های قدرتمندی مربوط می‌شوند که نیاز به انتخاب دارند. فعال کردن این درخواست‌ها بدون زمینه اضافی، مانند بارگذاری صفحه، باعث می‌شود کاربران کمتر این مجوزها را بپذیرند و در آینده به آنها بی‌اعتماد شوند.
در عوض، آن درخواست‌ها را تنها پس از ارائه یک دلیل منطقی در متن به کاربر مبنی بر اینکه چرا به آن مجوز نیاز دارید، فعال کنید.
چگونه
مقاله Permission UX و «روش‌های صحیح درخواست مجوز از کاربران» از UX Planet منابع خوبی برای درک چگونگی طراحی درخواست‌های مجوز هستند که ضمن تمرکز بر موبایل، برای همه PWAها نیز قابل اجرا باشند.
بهترین شیوه‌ها را برای کد سالم دنبال می‌کند
سالم نگه داشتن کدبیس، رسیدن به اهداف و ارائه ویژگی‌های جدید را آسان‌تر می‌کند.
چرا
نکات زیادی در ساخت یک برنامه وب مدرن وجود دارد. به‌روز نگه داشتن برنامه و سالم نگه داشتن کدبیس، ارائه ویژگی‌های جدیدی را که سایر اهداف ذکر شده در این چک لیست را برآورده می‌کنند، برای شما آسان‌تر می‌کند.
چگونه
تعدادی بررسی با اولویت بالا برای اطمینان از سلامت کدبیس وجود دارد:
- از استفاده از کتابخانه‌هایی که آسیب‌پذیری‌های شناخته‌شده‌ای دارند، خودداری کنید.
- مطمئن شوید که از API های منسوخ شده استفاده نمی‌کنید.
- شیوه‌های کدنویسی ناامن، مانند
document.write()یا داشتن شنونده‌های رویداد scroll غیر غیرفعال را از کدبیس خود حذف کنید. - شما حتی می‌توانید به صورت تدافعی کدنویسی کنید تا مطمئن شوید که PWA شما در صورت عدم بارگیری آنالیتیکس یا سایر کتابخانه‌های شخص ثالث، از کار نمی‌افتد.
- نیاز به تحلیل استاتیک کد، مانند linting، و همچنین تست خودکار در مرورگرها و کانال‌های انتشار متعدد را در نظر بگیرید. این تکنیک‌ها می‌توانند به شناسایی خطاها قبل از ورود به مرحله تولید کمک کنند.