PWA mobile app development

تولید اپلیکیشن های موبایل با روش PWA

سلام. وقتتون بخیر

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

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

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

به عبارتی بدنبال روشهای cross platform و غیر وابسته به سیستم عامل بودن.

موفقیت هایی هم کسب کردن. اکثر این تلاشها به این صورت بوده که از تکنولوژی های وب استفاده کردن، چرا که تکنولوژی های وب در تمامی سیستم عامل ها به یک صورت پشتیبانی میشن، یا حداقل باید بشن.

 

  1. شروع راه: در ابتدای مسیر پروژه هایی مثل phonegap، cordova و … سعی کردن برای هر پلتفرم موبایل یک نرم افزار به شما بدن که در اصل کارکرد یک مرورگر رو بدون آدرس بار و دکمه بازگشت و … رو داشت. در اصل شما یک وبسایت طراحی میکردین و کدهاش توی پکیج اون اپلیکیشن گنچونده میشد و وظیفه اون نرم افزار این بود وبسایت شما رو به کاربر نشون بده. یه کار دیگه ام میکرد و اون اینکه از طریق جاوا اسکریپت به وبسایت شما اجازه دسترسی به یه سری نیازمندیها مثل دریافت تصویر دوربین، لیست مخاطب ها و … رو میداد. این روش بد نبود و برای اپ هایی که میخواست سریع طراحی بشه مناسب بود، اما خوب مشکلاتی هم از لحاظ ظاهری و عملکردی داشت.
  2. سعی در کامپایل: بعضی از افزاد سعی کردن با همون پلتفرمهای cordova و … با react.js اپلیکیشن طراحی کنن. فیسبوک هم یک پلتفرم با کدهای مشابه react.js ساخت که شما با همون تکنولوژی های وبسایتی اپ تون رو طراحی میکنین اما در نهایت بخشی از اون اپ به کدهای native اپ مخوبایل کامپایل میشه. خوب این روش راندمان بهتری داد، تا جایی که اینستاگرام کلا با همین روش توسعه داده شده

 

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

 

تعریف PWA: روش Progressive Web Apps یا PWA، به روشی گفته میشه که شما اپلیکیشن موبایلتون رو از طریق تکنولوژی های موبایل طراحی میکنین (تا اینجا شبیه روشهای قبلیه)، از طریق وب هم ارائه اش میدین. به عبارتی شما در اصل یک وبسایت طراحی میکنین، صرفا با خاصیت cache شدن بدنه وبسایت، فایلها و حتی نتیجه API call ها، تمام مواردی که میدونین بعدا بهش مجددا نیاز دارید.

از طرفی امکانی به نام Add to Home Screen در اختیار شما قرار میگیره که باعث میشه یک shortcut از نرم افزار توی Home گوشی کاربر یا دسکتاپ کامپیوترش قرار بگیره و از این به بعد با فشردن این icon نرم افزار عین یک نرم افزار موبایل یا حتی دسکتاپ باز شه.

 

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

آموزش برنامه نویسی PWA در وبسایت گوگل

 

مزایای این روش

  • Progressive: این روش غیر وابسته به سیستم عامله و هر ابزاری که بتونه وبسایت رو نشون بده عملا این نرم افزار رو اجرا می کنه. به عبارتی این روش Cross Platform عمل میکنه
  • Responsive: دقیقا مشابه یک وبسایت عادی. شما میتونید طراحی وبسایت رو به راحتی responsive انجام بدین و در کامپیوتر و تبلیت و موبایل به خوبی ازش استفاده کنین.
  • سرعت بالای اجرا پس از لود اولیه: از اونجایی که عناصر و فایلهای مورد نیاز نرم افزار cache میشن، سرعت اجرای نرم افزار بعد از لود اولیه بالا میره.
  • بی نیاز به store: برای پابلیش کردن نرم افزاری دردسرهای قراردادن اپ توی استورهای google play و app store و … رو نخواهید داشت.
  • ایمن (https): دسترسی به نرم افزار از طریق پروتکل HTTPS انجام میشه و امنیت نرم افزار بالاتر خواهد رفت.
  • بروز رسانی راحت، در کنترل توسعه دهنده: عین یک وبسایت عادی، شما هر زمان بخواید نرم افزارتون رو بروز میکنید و مثل اپهای معمول موبایل کاربرتون مجبور نیست نسخه جدیدی دانلود کنه تا امکانات جدید رو داشته باشه.
  • شبیه اپلیکیشن: خوب شما میتونید ظاهر نرم افزار رو عین اپهای مرسوم طراحی کنید. امکانات پوش نوتیفیکشن، دوربین و … رو هم دارید.
  • re-engageable: بر خلاف اپلیکیشن های مرسوم که اگر پاک بشن، شما دیگه نمیتونید برای کاربرتون پوش نوتفیکیشن بفرستید، اینجا کاربر از طریق مرورگر دستگاهش در پوش نوتیفیکشن شما عضو میشه و شما بازم میتونید با پوش نوتیفیکشن ترغیبش به برگشت به اپلیکیشن کنید.
  • دسترسی موتور جستجو به محتوای اپ: بواسطه ماهیت وبسایتی بودن این روش، موتورهای جستجو محتوای اپ تون رو میتونن جستجو کنن.
  • نصبی: همونطور که گفتیم ساختار نصبی رو اپ شما خواهد داشت.
  • linkable: بطور معمول بخشهای مختلف یک اپلیکیشن مرسوم قابل لینک دهی نیستند مگر با دردسر فراوان. اما اینجا شما اپلیکیشنی دارید که ذاتا url محوره و میتونید با ارائه یک url خاص کاربرتون رو مستقیما به یک صفحه خاص از اپلیکیشنتون ببرید.

 

معایب این روش

  • آرشیو نشدن توسط موتور آرشیو وب: سایت archive.org که مسئول آرشیو کردن صفحات وب هست به خوبی نمیتونه اپ شما رو آرشیو کنه، که البته به نظر موضوع مهمی نمیرسه.
  • لود اولیه کند تر: نسبت به وبسایتها و اپلیکیشن های مرسوم، لود اولیه نرم افزار یه مقدار کند خواهد بود.
  • عدم تطابق با سیستم های قدیمی: بواسطه جدید بودن این تکنولوژی و ساپورت نشدن اون توسط مرورگرهای قدیمی، سیستم های قدیمی با این روش تطابق خوبی ندارند.

 

نحوه عملکرد

در این روش شما یک وبسایت عادی طراحی میکنید، صرفا چند مورد رو در اون لحاظ می کنید:

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

فایل Service Worker: این فایل که از نوع جاوا اسکریپتی هست، به عنوان یک proxy بین کلاینت و سرور وبسایت عمل می کنه و تمامی درخواستها ابتدا به اون داده میشه، اون هم اگر کد، فایل یا نتیجه API call رو cache کرده باشه که خودش اونو بی نیاز به اینترنت به مرورگر ارائه میده، در غیر اینصورت به سراغ سرور وبسایت میره و محتوای مورد نظر رو دریافت می کنه، نمایش میده و برای بار بعدی نمایش cache می کنه.

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

 

طراحی SPA: در نهایت هم شما بایستی با استفاده فریمورک های Angular، React.js، Vue.js یا هر روش دیگه ای، بدنه ظاهری نرم افزارتون رو از محتوای اون جدا کنید تا بتونید بدنه نرم افزار رو به راحتی cache کنید.

 

به این صورت شما یک وبسایت با خاصیت PWA دارید.

 

نقشه راه این روش: به نظر من، اکثر اپهای موبایل به سرویس برای کار کردن در پس زمینه گوشی ندارند، پردازش های سنگین و خاصی هم ندارند. در عوض بیشترین نیازشون ارسال درخواستهای API call هست، چیزی که تکنولوژی های وب درش قوی هستند. از طرفی توسعه دهنده های وب مثل خود من، به دلایل مختلفی تمایل دارند نرم افزارهای مختلف رو با تکنولوژی های وب توسعه بدن. پس اپ های PWA در کارکرد عموم اپهای موبایل مناسب هستند. مخصوصا که مزایایی هم نسبت به اپ های موبایل مرسوم دارن. پس انتظار میره در چند سال آینده که مشکلات جزئی این روش مرتفع بشه، تعداد اپ های موبایلی که با این روش توسعه داده میشه بسیار بیشتر بشه.

 

امیدوارم این پست دید خوبی بهتون داده باشه.

لطفا اون رو با دوستانتون به اشتراک بزارید.

سپاس

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *