نیما عارفی
نیما عارفی
خواندن ۵ دقیقه·۶ سال پیش

اپکلیشین های پیش رونده (PWA) نقطه پایان برای برنامه نویسان Native

برای خودم همیشه سوال بوده چرا شرکت‌ها و سازمان‌ها از کوچیک تا بزرگ همیشه سعی داشتند همه چیز رو پیچیده تر کنن :)
برای مثال سایت دیجیکالا که تا اون جایی که من اطلاع دارم ۴ تا اپلیکیشن مختلف ساختن

  1. برنامه موبایل دیجیکالا برای سیستم عامل IOS
  2. برنامه موبایل دیجیکالا برای سیستم عامل Android
  3. وب سایت برای دستگاه های دسکتاپ
  4. وب سایت برای دستگاه های موبایل

(در اصل با UserAgent چک می کنن اگر دستگاهی که درخواست داده به سرور "موبایل" باشه وبسایت مخصوص صفحه های کوچیک و تاچ رو به عنوان Response ارسال می کنند در غیر اینصورت نسخه دسکتاپ)

اگر برای هر یک از این اپلیکشین‌ها یک تیم برنامه نویسی ۳ نفره هم در نظر بگیریم در کل ۱۲ نفر باید استخدام کنیم به علاوه یک مدیر برای هر تیم و هزینه های مدیریتی و حقوق این کارمندان.
علاوه بر این سرعت برنامه نویسی برای پلتفرم های مختلف متفاوت هستش، ممکن هستش امروز تصمیم گرفته بشه که ویژگی های فلان و بیسار به برنامه اضافه بشه تیم اندروید ۴ روز زمان می خواهد، تیم آی او اس ۱ روز تیم وب ۱۰ ساعت که این ویژگی‌هارو به سیستم اضافه کنه. (همینطوری ۴ تا عدد گفتم ولی اندروید واقعا خیلی دردسر داره -.- )

همه اینها به کنار شما یه روز از خواب بیدار میشید می بینید برنامه IOS که ۶ ماه زحمت کشیدید ساخته بشه از App Store حذف شده. آخه چرا ؟
- چون آقای وزیر به تحت فشار بودن افتخار می کنن (نکننمون تو گونی سر یه جمله)

از سمت دیگه به راه حل ملی وطنی رجوع مثل سیب اپ می کنید، اونم به دلیل اینکه زور اپل زیاده بسته میشه :)

الان چه میشه کرد ؟
- هیچی‌، ‌دور IOS رو یه خط قرمز بکشید. البته یه راه حل دیگه ام هستش!
نظرتون چیه اون وب اپلیکشین مخصوص موبایل رو یکم تغییرش بدیم که تو حالت آفلاین کار کنه از کاربر بخوایم با ۴ تا کلیک برنامه رو به صفحه اصلی گوشی اضافه کنه و بوم ! ما اپلیکیشن موبایل داریم
وبا این راه حل میشه بیخیال تیم اندروید و آی او اس شد پس هزینه ها کمتر میشه

فکر کنم شروع جالبی بود برای این مقاله.


قبل از اینکه شروع کنم به توضیح بیشتر PWA اپلیکیشن اسنپ رو از لینک نصب کنید و ۲ دقیقه باهاش کار کنید

https://app.snapp.taxi/


چند ثانیه طول کشید که صفحه باز بشه و بتونید با برنامه کار کنید ؟
- برای بار اول بیشتر از ۵ ثانیه نمیشه معمولا

چقدر طول کشید نصبش کنید ؟
- در حد ۴ تا کلیک ساده

چقدر فضا روی گوشی اشغال کرد‌؟
- کمتر از ۳ مگابایت

با نسخه قبلی که داخل App Store بود تفاوتی داره ؟
- فقط راه نصب کردنش متفاوت بود

بعد از اینکه نصب شد بدون اینترنت کار کرد ؟
- بله

تازه روی دسکتاپ هم کار میکنه روی پلتفرم اندروید هم همینطور، کلا هرجا که مروگر باشه اجرا میشه از Smart TV داخل منزل تا اون کامپیوتر داخل ماشینتون که مرورگر وب داره

بیاید به سناریو یه جور دیگه نگاه کنیم (فرض بر این هستش که کلا اسنپ نصب نشده)
آقای X می خواد از میدان آزادی بره سعادت آباد، قفل گوشی آیفون رو باز میکنه میره داخل App Store دنبال Snapp میگرده ولی چیزی پیدا نمی کنه، مرورگر وب رو باز میکنه داخل گوگل سرچ می کنه اسنپ روی لینک اول کلیک میکنه نوشته نصب از SibApp روی اون دکمه کلیک می کنه بعد از کلی دنگ و فنگ SibApp نصب میشه، حالا سیب اپ رو باز می کنه دنبال اسنپ می گرده، ۴۰، ۵۰ مگابایت دانلود می کنه. برنامه اسنپ باز میشه ثبت نام میکنه درخواست ماشین میده ...

اگر آقای X گوشی اندروید هم داشتند همین سناریو بود با این تفاوت که به جای SibApp کافه بازار نصب می کردند

حالا اگر سایت اسنپ PWA بود چی ؟
آقای X می خواد از میدان آزادی بره سعادت آباد، قفل گوشی آیفون رو باز میکنه میره داخل App Store دنبال Snapp میگرده ولی چیزی پیدا نمی کنه، مرورگر وب رو باز میکنه داخل گوگل سرچ می کنه اسنپ روی لینک اول کلیک میکنه و از ایشون می خواهد که یک حساب کاربری داخل اسنپ بسازند و بعدش نقشه باز میشه و درخواست خودشونو ثبت می کنن.

دیگه خبری از سیب اپ و کافه بازار و ۴۰، ۵۰ مگابایت دانلود برنامه نیست

حالت هوشمندانه این میشه که زمانی که آقای X درخواست خودشونو ثبت می کنن و منتظر قبول شدن درخواست توسط راننده میشن برنامه شروع کنه به دانلود تمام فایل های اپلیکیشن و بعدش از کاربر بخواهد که با ۴ تا کلیک برنامه رو نصب بکنه !
ساده نیست ؟



از اینجا به بعد یکم فنی تر صحبت می کنیم

چه طور میشه وب سایت رو آفلاین ساپورت کرد ؟
- با استفاده از API Cache مروگر و Service Worker

چه طور میشه اپلیکشین رو آپدیت کرد ؟
- خیلی راحت فقط کافی هستش Cache قبلی پاک بشه و فایل های جدید جایگزین بشن

چه طور میشه با سیستم عامل ارتباط برقرار کرد، مثلا برای باز شدن برنامه از حسگر اثر انگشت استفاده کنیم ؟
- خیلی ساده هستش از Web Authentication API که داخل مرورگر قرار داره استفاده کنید یا برای دریافت موقعیت کاربر از Geolocation API و ... . برای همه چیز یک API موجود هستش.

اپلیکیشن ما نیاز داره پردازش تصویر انجام بده و جاوااسکریپت چون مفسر هستش از swift یا Objective C که کامپایلری هستند کندتر عمل می کنه پس PWA خوب نیست !
- شما داخل وب می تونید از WebAssembly استفاده کنید که مستقیم با سخت افزار ارتباط برقرار میکنه و سرعتش فوق العاده زیاد هستش

یعنی PWA هیج محدودیتی نداره ؟
محدودیت هم وجود داره، برای مثال ارتباط با برنامه Contacts گوشی های موبایل هنوز ممکن نشده و شما نمی‌تونید مخاطبین رو بخونید
یا پلتفرم اپل هنوز Push Notifications رو برای PWA ها فعال نکرده ولی این محدودیت‌ها خیلی کم هستند و با شرایط کنونی شما چاره دیگه‌ایی ندارید. نکته مهم اینجاست که PWA در حال پیشرفت هستش و این API ها ساخته شده و به مروگرها اضافه میشن.

اینکه اپلیکیشن آفلاین اجرا بشه یعنی ما PWA داریم ؟
- خیر شما باید برنامه وب رو شبیه برنامه‌های نیتیو کنید تا کاربر تفاوتی احساس نکند. برای مثال نوشته‌ها نباید انتخاب شوند. که البته با ۴ خط CSS قابل پیاده سازی هستش.

کار با Service Worker یکم متفاوت هستش با تمام API هایی که داخل وب باهاشون کار کردیم واسه همین گوگل یک کتابخونه برای راحتتر شدن کار معرفی کرده به نام Workbox که خیلی راحت برنامه شمارو Offline Support میکنه.

و در آخر Service Worker ها نیاز دارن به اینکه وب سایت شما گواهی نامه SSL داشته باشه و از پروتکل HTTPS استفاده کنه.


خوشحال میشم نظرتون رو درباره PWA بدونم و اگر برنامه نویس Native هستید بدونم برای آینده چه برنامه ریزی دارید؟ و به این نکته توجه کنید که اگر PWA جایگزی برنامه‌های نیتیو شود سرنوشت پلتفرم‌هایی مثل کافه بازار و سیب اپ چی میشه‌!

اگر مقاله فنی تر برای پیاده سازی یک PWA کامل با استفاده از تکنولوژی‌های که داخل مقاله بهشون اشاره شد و البته React نیاز داشتید داخل نظرات اعلام کنید.

pwaandroidiosswiftapple
برنامه نویس وب و فرانت‌اند و ری‌اکت و وب سایت https://react.ir
شاید از این پست‌ها خوشتان بیاید