طراحی PWA

طراحی وب اپلیکیشن PWA در چتر نیلی

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

فرآیند طراحی PWA در چتر نیلی

  • 01

    بررسی ایده

    چتر نیلی در اولین مرحله برای طراحی PWA ایده اولیه را دریافت می‌کند و اقداماتی در جهت کشف همه جانبه محصول انجام می‌دهد.

  • 02

    طراحی تجربه کاربری و واسط کاربری

    در مرحله دوم از فرایند طراحی وب اپلیکیشن پیشرونده، طراحی تجربه کاربری و واسطه کاربری (Prototyping) انجام خواهد شد.

  • 03

    طراحی و پیاده‌سازی فنی پروژه

    مرحله سوم برای طراحی PWA مرحله طراحی و پیاده سازی فنی پروژه، تست فنی و تحویل روی ساختار تست است.

  • 04

    تست و بهینه سازی

    در مرحله چهارم نوبت به آماده سازی زیرساخت پیاده سازی سرور و بهینه سازی محصول خواهد رسید.

  • 05

    پشتیبانی فنی

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

تکنولوژی های ما در طراحی وب

        

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

        

CSS زبان برنامه نویسی ظاهری که به منظور ارائه زیباتر و قابل مفهوم‌تر بودن یک سند از آن استفاده می‌شود. به طور کلی این زبان برنامه نویسی در کنار زبان برنامه نویسی HTML مورد استفاده قرار می‌گیرد و در واقع مسئولیت ایجاد ظاهر پروژه بر عهده CSS است که رنگ، اندازه و محل قرارگیری متن و دیگر تگ‌های HTML را تعیین می‌کند. CSS 3 آخرین نسخه از CSS است که ویژگی‌ها و قابلیت‌های بیشتری نسبت به نسخه‌های قبلی دارد. CSS3 با توجه به ساختار ماژولاری که دارد به توسعه‎ دهندگان وب این امکان را می‌دهد تا صفحات وب با محتوای غنی که نیازمند کد سبک‎تری هستند را ایجاد کند و در عین زیبایی ظاهری سرعت بالا را به همراه خواهد داشت.

        

HTML زبان استاندارد و پایه‌ای است که از آن برای طراحی صفحات وب استفاده می‌شود. این زبان نشانه گذاری در نسخه‌های مختلفی ارائه شده که آخرین ورژن آن HTML5 است. استفاده از HTML5 طراحی کاربر پسند و انعطاف پذیری را به همراه دارد که به همین دلیل بسیاری از توسعه دهندگان علاقه زیادی به این زبان برنامه نویسی دارند. این زبان نشانه گذاری همچون اسکلت اصلی یک پروژه است که در کنار CSS 3 ظاهر اصلی آن شکل می‌گیرد. استفاده از این زبان امکان طراحی و توسعه یک اپلیکیشن پیشرونده پیشرفته و کاربردی را فراهم می‌آورد.

        

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

        

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

        

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

شیوه های همکاری

سفارش خدمت
            

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

            

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

            

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

            

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

#

PWA چیست؟

طراحی وب اپلیکیشن PWA که کوتاه شده عبارت Progressive Web Apps است، به اپلیکیشن‌هایی گفته می‌شود که بر خلاف طراحی اپلیکیشن و منحصر به کد نویسی و سیستم عامل‌های خاص مانند ios و android هستند. وب اپلیکیشن پیشرونده از نسخه وب سایت به صورت یک اپلیکیشن در صفحه گوشی همراه استفاده می‌کند و مخاطب را وادار به نصب اپلیکیشن نمی‌کند. این فناوری در ابتدا در سال ۲۰۱۵ توسط گوگل معرفی شد و با توجه به توسعه آسان مورد توجه کاربران بسیاری قرار گرفت.

مزیت‌های PWA چیست؟

  1. آپدیت خودکار PWA در وردپرس و نیاز نداشتن به آپدیت با کدنویسی
  2. واکنش‌گرا بودن PWA یعنی این فناوری روی تمام دستگاه‌ها مانند موبایل،‌ سایت، کامپیوتر و … به خوبی نمایش داده می‌شود.
  3. امکان سرویس دهی PWA با کمک Service Worker ها در صورت ضعیف بودن اینترنت
  4. خدمات PWA ها همواره با استفاده از HTTPS ارائه می‌شود تا با بکارگیری رمز گذاری، هیچ شخصی بدون مجوز مناسب قادر به ایجاد اختلال نباشد.
  5. وجود ویژگی Push Notifications در PWA
  6. امکان به اشتراک گذاری PWA از طریق URL و جستجوی آن در موتورهای جستجو
  7. سازگاری با دستگاه‌ها مختلف و برخورداری از ظاهری مانند اپلیکیشن‌های بومی
  8. قابلیت نصب PWA روی تلفن‌های همراه مانند سایر اپلیکیشن‌های Native

تفاوت طراحی اپلیکیشن‌های معمولی و طراحی وب اپلیکیشن PWA

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

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

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

فناوری‌های استفاده شده در PWA

به منظور توسعه PWA از فناوری‌های مختلفی استفاده شده است که عبارتند از:

اعلان‌های سمت سرور (Push Notification)

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

سرویس ورکرها

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

معماری پوسته اپلیکیشن

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

سرویس‌های شناخته شده‌ای که PWA استفاده می‌کنند

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

 مرورگرهایی که از PWA پشتیبانی می‌کنند

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

  1. مرورگرهای دسکتاپ با پشتیبانی کامل: کروم، اپرا، فایرفاکس، QQ Browser و ۳۶۰ Browser
  2. مرورگرهای دسکتاپ با پشتیبانی کمتر: مایکروسافت اج و سفری
  3. مرورگرهای موبایل همراه با پشتیبانی کامل: شیائومی، بایدو، کروم، فایرفاکس، وی چت، UC Browser، Sogou، مرورگر ۳۶۰ Browser و Quark
  4. مرورگرهای موبایل با پشتیبانی کم: سامسونگ و QQ Browser

آیا PWA جایگزین اپلیکیشن‌های بومی می‌شود؟

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

نمونه کار ها

مشتریان ما

سوالات متداول

آیا توسعه ی PWA از توسعه اپلیکیشن موبایل بومی شبیه آن ارزان تر است؟

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

آیا PWA میتواند جایگزین اپلیکیشن موبایلی باشد؟

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

آیا PWA بروی موبایل اشخاص نصب میشود و قابلیت ارسال نوتیفیکیشن خواهد داشت؟

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

هزینه طراحی وب اپلیکیشن PWA

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

طراحی وب اپلیکیشن PWA چه مدت زمان می‌برد؟

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