برنامه‌های پیش‌رونده وب (PWA) با APIهای مدرن پیشرفته شدند تا توانایی، اعتماد و قابلیت نصبی را فراهم کنند که هر کسی، هر جایی به روی هر دستگاهی بتواند به آن دسترسی داشته باشد. برای اینکه به شما کمک کنیم بهترین تجربه ممکن را داشته باشید، چک لیستی از توصیه‌هایی که می‌توانند به بهبود PWA شما کمک کنند تهیه کردیم.
چک لیست هسته اصلی برنامه وب پیش‌رونده (PWA)
چک لیست برنامه وب پیش‌رونده توضیح می‌دهد چه چیزی یک اپلیکیشن را، بدون توجه به سایز یا نوع ورودی، قابل نصب و قابل استفاده برای تمامی کاربران می‌سازد.
سریع باشد و سریع بماند
عملکرد نقش چشمگیری در موفقیت هر تجربه آنلاینی ایفا می‌کند. سایت‌هایی که عملکرد سریعی دارند بهتر می‌توانند با کاربران خود تعامل کنند. سایت‌ها باید به روی بهینه‌سازی عملکرد بر اساس معیارهای کاربران تمرکز داشته باشند.
چرا؟
سرعت یکی از اصلی‌ترین فاکتورهاییست که موجب می‌شود یک کاربر از یک اپلیکیشن استفاده کند. در حقیقت، اگر زمان بارگذاری یک صفحه از یک ثانیه به ده ثانیه برسد، احتمال اینکه کاربر آن صفحه را ترک کند ۱۲۳% افزایش می‌یابد. عملکرد با رویداد load متوقف نمی‌شود. کاربران نباید به این فکر کنند آیا حرکتی که انجام داده‌اند، مثلاً کلیک کردن به روی یک دکمه، ثبت شده است یا خیر. اسکرول کردن و گشتن در صفحه باید بدون دردسر انجام شود. عملکرد سایتتان به روی تجربه کلی شما تاثیرگذار است، از نحوه درک کاربران از اپلیکیشن گرفته تا نحوه عملکرد آن در واقعیت.
در حالیکه تمامی اپلیکیشن‌ها نیازهای متفاوتی دارند، ممیزی عملکردشان در Lighthouse بر اساس مدل عملکرد کاربر محور RAIL است، و امتیاز بالا گرفتن در این ممیزی‌ها این احتمال را که کاربرتان تجربه لذت‌بخشی از کار کردن با اپلیکیشن شما داشته است بیشتر می‌کند. شما همچنین می‌توانید از PageSpeed Insights یا Chrome User Experience Report استفاده کنید تا به طور واقعی عملکرد اطلاعات و اپلیکیشن وبتان را مشاهده کنید.
به روی هر مرورگری کار کند
کاربران از مرورگرهای متفاوتی برای دسترسی به اپلیکیشن وب شما تا زمانی که نصب شود استفاده می‌کنند؛ بنابراین برنامه پیش‌رونده وب باید به روی هر مرورگری کار کند.
چرا؟
برنامه‌های پیش‌رونده وب، پیش از هر چیزی برنامه وب هستند، این یعنی باید ابتدا روی مرورگرهای مختلف قابل استفاده باشند نه فقط یکی از آن‌ها. یک روش موثر برای انجام این کار، به گفته جرمی کیت (Jeremy Keith) از طریق طراحی وب انعطاف‌پذیر است که به واسطه آن ابتدا عملکرد و قابلیت‌های اصلی شناسایی می‌شود، با استفاده از ساده‌ترین تکنولوژی ممکن آن قابلیت ایجاد می‌شود، و سپس تجربه استفاده از آن در هر کجا که ممکن باشد ارتقا پیدا می‌کند. در بیشتر موارد، این به معنای شروع کار با HTML و ایجاد هسته اصلی عملکرد است، و سپس تجربه کاربری با استفاده از CSS و جاوا اسکریپت بهبود پیدا می‌کند تا استفاده از این وب اپ برای کاربر جذاب‌تر شود.
به‌عنوان مثال فرم‌های ارسال را در نظر بگیرید. ساده‌ترین روش برای ساخت آن استفاده از HTML برای ساخت یک فرم ساده با درخواست «ارسال» است. پس از ساخت آن، می‌توانید به کمک جاوا اسکریپت اعتبار اطلاعات فرم را بسنجید و فرم نهایی را با کمک AJAX ارسال کنید. با این کار تجربه کاربرها بهبود پیدا می‌کند.
تصور کنید کاربران شما سایتتان را با دستگاه‌ها و مرورگرهای مختلفی می‌بینند. شما نمی‌توانید بدانید این تنوع تا چه اندازه زیاد است. با استفاده از ردیابی و تشخیص ویژگی، شما می‌توانید یک تجربه قابل استفاده برای طیف گستردهتری از کاربران فراهم کنید، که حتی شامل مرورگرها و دستگاه‌هایی که امروزه هنوز وجود ندارند نیز می‌شود.
ریسپانسیو و قابل نمایش به روی صفحه نمایش‌های مختلف باشد
کاربران، PWA شما را به روی صفحه نمایش‌های مختلفی خواهند دید؛ بنابراین محتوای آن باید قابل مشاهده به روی صفحه نمایش‌هایی با سایزهای مختلف باشد.
چرا؟
دستگاه‌های مختلف در سایزهای متنوعی عرضه می‌شوند، کاربران نیز ممکن است از اپلیکیشن شما به روی صفحه نمایش‌های مختلف با سایزهای متفاوت استفاده کنند؛ بنابراین، بسیار مهم است که مطمئن شوید محتوای شما نه تنها در تمامی صفحه نمایش‌ها قابل مشاهده است، بلکه تمامی ویژگی‌های آن نیز در تمامی آن‌ها قابل استفاده است.
کارهایی که کاربر می‌خواهد انجام دهد و محتوایی که می‌خواهد به آن دسترسی داشته باشد نباید در سایزهای مختلف تغییر کند. محتوا می‌تواند برای سایزهای مختلف بازچینی شود، اما چیزی که مهم است این است که محتوا در سایزهای مختلف یکی باشد. لوک روبلووسکی (Luke Wroblewski) در کتاب «اول موبایل» خود به این مساله اینگونه اشاره می‌کند:
«تلفن‌های همراه به تیم توسعه نرم‌افزاری نیاز دارند که به روی مهم‌ترین داده‌ها و عملکردها در اپلیکیشن تمرکز کنند. دیگر در صفحه نمایش ۳۲۰ در ۴۸۰ پیکسل جا برای المان‌های غیرضروری نیست. باید اولویت‌بندی کنید.»
یک صفحه آفلاین سفارشی داشته باشد
وقتی کاربران آفلاین هستند، نگه داشتن آن‌ها به روی PWA برایشان تجربه بهتری به همراه خواهد داشت تا همان صفحه آفلاین همیشگی مرورگر را ببینند.
چرا؟
کاربران انتظار دارند اپلیکیشن‌هایی که نصب کرده‌اند بدون توجه به وضعیت اتصال آن‌ها به اینترنت کار کند. یک اپلیکیشن اصلی در صورت آفلاین بودن، هیچ‌گاه یک صفحه خالی به کاربر نشان نمی‌دهد، و برنامه پیش‌رونده وب نیز نباید صفحه پیش‌فرض آفلاین مرورگر را نمایش دهد. ایجاد یک صفحه آفلاین سفارشی، چه در زمانی که کاربر به روی URL که کَش نشده می‌گردد یا سعی می‌کند از قابلیتی که نیاز به اتصال به اینترنت دارد استفاده کند، کمک می‌کند فرد احساس بهتری از ماندن روی سایت داشته باشد و احساس کمبود اپلیکیشن اصلی وب برطرف شود.
قابل نصب باشد
کاربرانی که به روی دستگاهشان اپلیکیشن‌هایی را نصب می‌کنند با آن اپلیکیشن‌ها ارتباط بهتری برقرار می‌کنند.
چرا؟
نصب برنامه پیش‌رونده وب (PWA) این امکان را فراهم می‌کند که کاربر احساس کند با یک برنامه همانند سایر اپلیکیشن‌هایی که نصب کرده است کار می‌کند. PWA دقیقاً از همانجایی که سایر اپلیکیشن‌ها اجرا می‌شوند اجرا شده و در پنجره مربوط به خودش، جدا از مرورگر، دیده می‌شود. درست همانند سایر اپلیکیشن‌ها.
چرا می‌خواهید یک کاربر PWA شما را نصب کند؟ به همان دلیلی که می‌خواهید یک کاربر اپلیکیشن اصلی شما را نصب کند. کاربرانی که اپلیکیشن‌ها را نصب می‌کنند مخاطبینی هستند که بیشترین تعامل را با شما خواهند داشت. آن‌ها به طور مکرر به سایت شما باز خواهند گشت و زمان بیشتری را روی سایت شما خواهند گذراند که به موجب آن نرخ تبادل بالاتر می‌رود.
چک لیست بهینه برنامه پیش‌رونده وب (PWA)
برای اینکه یک PWA خوب ساخته شود و همانند یک اپ عملکرد خوبی داشته باشد، به چیزی بیش از چک لیستی که اشاره شد نیاز دارید. چک لیست بهینه برنامه پیش‌رونده وب برای این است که کاری کنید PWA شما در عین حال که از قدرت وب بهره می‌برد بتواند همانند یک برنامه اصلی ظاهر شود.
یک تجربه آفلاین ارائه کند
زمانی که نیاز به اتصال به اینترنت است باید اپلیکیشن شما همانند زمانی که آنلاین است عمل کند.
چرا؟
علاوه بر اینکه یک صفحه آفلاین سفارشی برای کاربرانتان ایجاد می‌کنید باید کاری کنید آن‌ها بتوانند به صورت آفلاین برخی از صفحات شما را ببینند. به عنوان مثال، اپلیکیشن‌های خرید بلیت یا ارائه کارت پرواز باید بتوانند این امکانات را به صورت آفلاین در اختیار مشتریانشان قرار دهند. همچنین اپلیکیشن‌هایی که ویدیو، موزیک یا پادکست ارائه میدهند نیز باید امکان پخش مجدد فایلی که قبلاً پخش شده را در هنگام آفلاین بودن داشته باشد. اپلیکیشن‌های خبری و اجتماعی نیز باید محتوای اخیرشان را کَش کنند تا کاربر بتواند زمانی که آفلاین است به آن‌ها دسترسی داشته باشد.
کاملاً قابل دسترسی باشد
PWA شما باید طبق دستورالعمل‌های دسترسی به محتوای وب (WCAG ٢.٠) طراحی شود تا هر کاربری بتواند با توجه به نیازش به آن دسترسی داشته باشد و از آن استفاده کند.
از طریق جستجو پیدا شود
یکی از بزرگ‌ترین مزایای وب قابلیت کشف شدن و پیدا شدن اپلیکیشن‌ها و وب سایت‌ها از طریق جستجو است. در حقیقت بیش از نیمی از ترافیک وب‌ها از طریق جستجوی اورگانیک ایجاد می‌شود؛ بنابراین باید PWA شما نیز از طریق جستجو به راحتی قابل یافت باشد.
با هر ورودی کار کند
PWA باید بتواند ورودی‌های ماوس، قلم، کیبورد یا لمس را به طور یکسان قبول کند. چرا که دستگاه‌های مختلف روش‌های ورودی مختلفی دارند؛ بنابراین با توجه به اینکه هر شخص ممکن است از چه وسیله یا روشی برای کار کردن با دستگاه همراه خود استفاده کند، PWA باید همه ورودی‌ها را قبول کند تا بهترین عملکرد را روی تمامی دستگاه‌ها داشته باشد.
هنگام اجازه گرفتن پیام مرتبطی نشان دهد
وقتی از کاربر درباره استفاده از APIها یا دسترسی‌های مختلف می‌خواهید اجازه بگیرید باید پیام مرتبط و واضحی را برای او نمایش دهید. اینکه بدون پیام و اجازه گرفتن به امکاناتی روی دستگاه دسترسی پیدا کنید موجب می‌شود کاربر کمتر تمایل به استفاده از PWA شما داشته باشد.
کدهای برنامه را بررسی کنید
اینکه از کدهای سالم و صحیح استفاده کنید شما را در رسیدن به هدفتان کمک می‌کند و بهتر می‌توانید ویژگی‌های جدید به برنامه خود اضافه کنید. اینکه بتوانید اپلیکیشن خود را همیشه به روز نگه دارید مستلزم این است که کدهای آن را بررسی کرده و از سلامت و صحیح بودنشان اطمینان حاصل کنید و هر جا لازم بود کدهای جدید اضافه کنید.
