طراحی وآموزش سایت

دسته بندی PWA

پراگرسیو وب اپ ها به دو دسته کلی تقسیم می شوند:

• سایت هایی که مانند اپلیکیشن رفتار می کنند.
• اپلیکیشن های تحت وب

​

تفاوت اپلیکیشن‌های بومی با اپلیکیشن‌های تحت وب

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

کاربران معمولا اپلیکیشن‌های بومی را از طریق فروشگاه‌های نرم‌افزاری آنلاین نظیر اپ استور اپل یا فروشگاه گوگل پلی و … دریافت می‌کنند.

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

از منظر رابط کاربری امروزه تقریبا هیچ تفاوتی بین اپلیکیشن‌های بومی و اپلیکیشن‌های تحت وب وجود ندارد و هر دوی آن‌ها امکانات مشابهی را با اختلافات اندکی در اختیار کاربر قرار می‌دهند.

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

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

​

برای مثال، آی‌اواس از Objective-C بهره می‌گیرد؛ در حالی که اندروید از جاوا و ویندوز موبایل از سی‌پلاس‌پلاس استفاده می‌کند.

در طرف مقابل اپلیکیشن‌های وب از زبان‌های دیگری نظیر جاوا اسکریپت، HTML5، CSS3 یا دیگر چارچوب‌های (فریم‌ورک) نرم‌افزاری وب بهره می‌گیرند.

علاوه بر این، هر پلتفرم موبایل، کیت توسعه‌ی افزاری (SDK)، ابزارهای توسعه و دیگر عناصر رابط کاربری اختصاصی خود را در اختیار توسعه‌دهندگان قرار می‌دهد.

توسعه‌دهندگان با بهره‌گیری از این مجموعه‌ی ابزارها به راحتی می‌توانند اپلیکیشن بومی خود را برای آن پلتفرم موبایل طراحی اپلیکیشن کنند.

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

چه نیازی به وجود وب اپلیکیشن‌های پیش رونده وجود دارد؟

نتایج یک تحقیق نشان می‌دهد که کاربران معمولی تقریبا ۸۰ درصد از زمان خود را صرف استفاده از تنها ۳ اپلیکیشن می‌کنند.

برای مثال، اکثر افراد معمولا از یک اپلیکیشن پیام‌رسان (تلگرام یا واتساپ)، یک مرورگر (کروم) و یک اپلیکیشن شبکه‌های اجتماعی (اینستاگرام، فیسبوک یا توییتر) بیش از دیگر اپ‌ها استفاده می‌کنند.

دیگر اپلیکیشن‌ها نیز اکثر اوقات بلااستفاده باقی می‌مانند و تنها حافظه‌ی رم و حافظه‌ی داخلی گوشی را بی‌جهت مصرف و اشغال می‌کنند. علاوه بر این، هزینه‌ی توسعه‌ی یک اپلیکیشن در مقایسه با ساخت یک وب‌سایت برای ارائه‌ی همان سرویس، معمولا ۱۰ برابر بیشتر است.

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

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

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

با این وجود، اپلیکیشن‌های بومی نیز مزایای غیرقابل انکاری دارند.

​

اپلیکیشن‌های موبایلی که مجهز به اعلان‌‌ها برای اطلاع‌رسانی به کاربر هستند، ۳ برابر بیش از دیگر همتایان غیربرخوردار از این ویژگی نگهداری می‌شوند و همچنین ۳ برابر احتمال بیشتری وجود دارد که کاربر به جای وب‌سایت، به یک اپلیکیشن مراجعه کند.

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

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

مزیت های PWA نسبت به اپلیکیشن های Native

اپلیکیشن های Native فقط مختص یک پلتفرم هستند و روی پلتفرم های دیگر قابل اجرا نیستند اما PWA ها تنها با یک مرورگر روی تمام پلت فرم ها قابل اجرا هستند.

کاربر برای کار با اپلیکیشن های Native باید ابتدا در Play Store ، App Store یا … اپلیکیشن مورد نظر خود را جستجو کند سپس آن را دانلود کند بعد اپلیکیشن را نصب کند و پس از همه ی این مراحل می تواند اپلیکیشن را اجرا کند.

اما برای PWA ها رفتن به یک URL کافی است و برای به اشتراک گذاری آن کافی است لینک دهیم بنابراین کاربران برای استفاده از PWA ها نیازی نیست که پروسه طولانی اپلیکیشن های Native را طی کنند.

در توسعه نرم افزار برای اپلیکشین های Native محدودیت استفاده از زبان و SDK را داریم.

به این صورت که برای مثال به منظور ساخت یک اپلیکیشن Native برای اندروید باید از زبان جاوا و یک سری SDK خاص استفاده کنیم.  اما برای ساخت یک PWA هیچ محدودیتی نداریم و می توانیم از هرچیزی استفاده کنیم.

هزینه ساخت یک اپلیکیشن Native نسبت به طراحی سایت حدودا 10 برابر بیشتر است و اگر بخواهیم اپلیکیشن ما روی تمام پلت فرم ها اجرا شود این هزینه طبیعتا بیشتر نیز خواهد بود.

از آنجایی که PWA ها در بستر HTTPS اجرا می شوند امن هستند.

اهداف PWA از نظر گوگل

طبق توضیح گوگل، پراگرسیو وب اپ ها دارای چهار هدف اصلی هستند:

قابل اطمینان (Reliable) : چون کاربر با پیغام لود نشدن صفحه در اثر کندی یا قطعی اینترنت مواجه نخواهد شد.

سریع : علت سریع بودن آنها در کش شدن برخی فایلهای مورد نیاز در دستگاه کاربر است.

جذاب : جذاب بودن PWAها به دلیل تشابه آنها به اپلیکیشن های مرسوم روی گوشی های موبایل است و به همین دلیل کاربران از PWA بیشتر از یک سایت ساده استقبال می کنند.

افزایش نرخ تبدیل (Conversion Rate).: به عنوان مثال سایت AliExpress پس از افزودن قابلیت پراگرسیو وب اپ به سایتش با افزایش نرخ تبدیل به میزان 102% در همه مرورگرها و به میزان 82% در سیستم عامل iOS مواجه شد.

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

نمونه سایت PWA

از زمان معرفی Progressive Web App، شرکت های زیادی شروع به طراحی پراگرسیو وب اپ نمودند. در زیر می توانید برخی از سایت ها و اپلیکیشن هایی که به صورت PWA طراحی شده اند را ملاحظه بفرمایید. برخی از نمونه ها فقط بر روی موبایل به صورت PWA کار می کنند و برخی مانند دو نمونه آخر، قابلیت کار به صورت آفلاین در دسکتاپ را نیز دارند.

1. سایت همایش توسعه دهندگان گوگل Google I/O که در آن حتی می توانید به صورت آفلاین اقدام به نوشتن کامنت نیز بکنید.
2. سایت فروشگاه بزرگ اینترنتی AliExpress
3. سایت شبکه اجتماعی اینستاگرام
4. سایت تلگرام تحت وب
5. سایت UBER
6. سایت cnet
7. سایت توییتر
8. اپلیکیشن ادیت عکس SVGOMG که می توانید در آن به صورت آفلاین به ادیت عکس های با فرمت SVG کنید.
9. اپلیکیشن کاهش سایز فایل عکس Smaller Pictures برای کاهش filesize عکس به میزان دلخواه

خصوصیات یک وب اپلیکیشن PWA چیست ؟

​

وب اپلیکیشن‌های پیش رونده واجد ویژگی‌ها زیر هستند:

پیش رونده (قابل استفاده در هر دستگاه و سیستم‌عامل): یک وب اپلیکیشن پیش رونده فارغ از نوع مرورگر و نوع دستگاه، برای تمام کاربران قابل استفاده است.

قابلیت اطمینان: با استفاده از PWA، وب اپلیکیشن به سرعت بارگذاری می شود حتی اگر از اینترنتی نسبتا کم سرعت اسفاده می کنید. اهمیت این مساله آنجا مشخص می شود که طبق گزارشی از گوگل، ۵۳ درصد کاربران تنها ۳ ثانیه برای بارگذاری سایت صبر می کنند و در غیر این صورت آن را ترک خواهند کرد. امکان باز شدن برنامه بدون اینترنت هم از دیگر مواردی است که موجب افزایش استقبال از این فناوری می شود.

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

قابل پیونددهی (لینک‌دهی): وب اپلیکیشن‌های پیش رونده برخلاف اپلیکیشن‌های بومی نیازی به طی کردن مراحل پیچیده‌ی دانلود و نصب ندارند و اشتراک‌گذاری آن‌ها از طریق یک نشانی وب (URL) به راحتی امکان‌پذیر است.

انعطاف‌پذیر: رابط کاربری وب اپلیکیشن‌های پیش رونده خود را با هر نوع فرم فکتور اعم از موبایل و دسکتاپ و هر نوع اندازه‌ی نمایشگر تطبیق می‌دهد.

ظاهر اپلیکیشن‌وار: یک اپلیکیشن پیش رونده شباهت بی‌بدیلی به اپلیکیشن‌های بومی دارد، از رابط کاربری مشابه آن‌ها استفاده می‌کند و مسیریابی در آن‌ها تفاوتی با اپلیکیشن‌های معمولی ندارد.

بی‌نیاز از اتصال اینترنت: وب اپلیکیشن‌های پیش رونده در صورت ضعف اتصال اینترنت یا حتی به صورت آفلاین نیز قابل استفاده هستند.

درگیر کردن کاربر: احتمال آنکه کاربران اپلیکیشن‌های موبایل مجددا از اپلیکیشن‌های خود استفاده کنند بیشتر از احتمال مراجعه‌ی مجدد به یک‌ وب‌سایت است. وب اپلیکیشن‌های پیش رونده با استفاده از ویژگی‌هایی نظیر اعلان‌های سمت سرور (Push Notification)، این ضعف را جبران کرده‌اند.

قابل نصب: وب اپلیکیشن‌های پیش رونده را می‌توان همانند اپلیکیشن‌های بومی نصب و آیکون آ‌ن‌ها را به صفحه‌ی خانگی و حتی کشوی اپلیکیشن‌ها اضافه کرد؛ با این تفاوت که دسترسی به آن‌ها بی‌نیاز از دردسرهای جستجو در فروشگاه‌های اپلیکیشن است. این ویژگی استفاده از آن‌ها را به شدت آسان می‌کند.  اگر می خواهیم وب اپلیکیشن ها را مانند یک نرم افزار بومی گوشی همراه مورد استفاده قرار دهیم پس باید قادر به نصب و دسترسی به آن از طریق صفحه اصلی گوشی خود باشیم. خوشبختانه این امکان توسط PWA فراهم شده است.

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

ایمن: از آنجایی که وب اپلیکیشن‌های پیش رونده در بستر HTTPS قرار دارند، از مخاطرات امنیتی در امان هستند.

​

مزایای PWA برای کاربران :

• سرعت بسیار بالای آنها ( انجام عملیات در کسری از ثانیه)
• در صفحه خانگی (Home Screen) موبایل قابل دسترسی هستند.
• بسیار دقیق با صفحات موبایل و حتی دستگاه های دیگر نظیر تبلت، ساعت های هوشمند و کامپیوتر تطبیق پذیر و رسپانسیو هستند.
• قابلیت اعلان نوتیفیکیشن (Push Notification) دارند.
• به دلیل پشتیبانی Service Worker ها قابلیت دسترسی در شرایط آفلاین را دارند.
• تجربه کاربری (UX) بسیار لذت بخشی را برای شما به ارمغان می آورند.
• اشتراک گذاری آنها بسیار آسان بوده به طوری که از طریق کپی کردن لینک نیز قادر به انجام این کار می باشد.

مزایای PWA برای برنامه نویسان :

• کدنویسی بسیار آسان
• پشتیبانی از HTML، CSS و JavaScript
• یک بنای کدینگ برای تمامی پلتفرم ها
• بدون نیاز به App Store یا Google Play
• قابلیت نمونه سازی، طبقه بندی، پایلوتینگ (Piloting) و انتشار سریع
• ارزان بودن

معایب استفاده از PWA

۱- عدم سازگاری با نسخه های قدیمی IOS : امکان اجرای PWA روی دستگاه های آیفون از نسخه IOS 11.3 امکان پذیر شده است و احتمالا اجرای آن در نسخه های قدیمی تر با مشکلاتی مواجه خواهد بود. علاوه بر این آیفون متاسفانه دسترسی به ویژگی های مهمی مثل شناسایی اثر انگشت، شناسایی چهره، ARkit، بلوتوث، سریال، Beacons، حسگر ارتفاع و حتی اطلاعات مربوط به باطری را نمی دهد که می تواند توسعه دهندگان را کمی به فکر بیشتر وادار کند.

۲- عدم هماهنگی با موبایل های قدیمی : از آنجایی که PWA یک تکنولوژی جدید می باشد بنابراین نمی توان انتظار داشت که موبایل های قدیمی با مرورگرهای قدیمی خود بتوانند بدون مشکل آنها را باز کنند.

۳– به اندازه اپلیکیشن های بومی کاربردی نیستند : PWA ها در واقع قادر به انجام تمامی کارهایی که اپلیکیشن های بومی می توانند انجام دهند نیستند چرا که آنها با Javascript نوشته شده اند و نمی توانند به اندازه اپلیکیشن هایی که با زبان هایی مثل Swift و Kotlin نوشته شده اند کارآمد و کاربردی باشند.

​

نتیجه‌گیری

اپ‌های پیشرفته وب مساله مهمی هستند. آنها تکنولوژی مرور وب موبایل را با قابلیت‌ها و مزایای یک اپ ترکیب می‌کنند تا تجربه کاربری را بهبود دهند.

پیاده‌سازی یک PWA مزایای خیلی زیادی دارد. فقط کافیست به کمپانی‌هایی رجوع کنید که پس از راه‌اندازی آن به موفقیت رسیده‌اند.

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

اما تصمیم‌تان هر چه باشد، باید بدانید این تکنولوژی جدید به آینده توسعه اپ‌ها ربط بسیاری پیدا می‌کند.

برای اطلاعات بیشتر میتوانید سایت developer.google را ببینید.

امیدواریم در این مقاله PWA چیست به شما کمک کرده باشیم. لطفا سوالات و نظرات خود را برای ما کامنت کنید.

PWA چیست