mohammadsharifi.com
چرا وب اپ های پراگرسیو آینده وب سایت های ایرانی است؟
وب اپ های پراگرسیو Progressive Web Apps از قابلیت های وبِ مدرن استفاده می کند تا یک تجربه اپ(موبایل)مانندی را برای کاربر فراهم کند [1]. PWA ها آخرین ترند توسعه اپ موبایل با استفاده از تکنولوژی های وب است. که هم اکنون (در زمان نوشتن این نوشته) فقط روی دستگاه های اندرویدی پشتیبانی می شوند.
قابلیت پشتیبانی PWA ها در iOS 11.3 و سیستم عامل مک 10.13.4 به زودی اضافه خواهد شد.
وب اپ های پراگرسیو چه هستند؟
می توان گفت PWA، اپ هایی هستند که ویژگی هایی را باتوجه به اینکه دستگاه از آنها پشتیبانی کند برای ما فراهم می کنند. مثل قابلیت کار کردن به شکل آفلاین، ارسال نوتیفیکیشن (push notification)، سریع و بسیار مشابه برنامه بومی (native) و کشِ کردن منابع (assets) در مرورگر.
با این که استیو جابز درسال 2007 هنگام معرفی آیفن به این موضع اشاره کرد، ولی این روش به شکلی سازماندهی شده توسط گوگل در سال 2015 معرفی شد، و ادعا می کند که منافع زیادی را برای کاربران و توسعه دهندگان فراهم می کند.[2]
توسعه دهندگان به راحتی با استفاده از استک وب به راحتی می توانند وب اپ های پراگرسیو بسازند. توجه داشته باشید که این روش با روش ساخت برنامه موبایل به شکل Hybrid که در نهایت برای هر پلتفرم خروجی مربوط به آن را می گیریم کاملا متفاوت است و با افزودن دو فایل (Service-worker.js manifest.json که در پست بعد توضیح می دهیم) و چندین آیکن، وب اپ کنونی خود را می توانید تبدیل به وب اپ پراگرسیو کنید!
به علاوه نیازی به گذاشتن روی اپ استور های مختلف و دانلود اپ هم نیست چرا که این اپ با یک جستجو در گوگل پیدا شده و محتوای آنها توسط گوگل اندکس می شوند، که البته برای هر به روزرسانی کاربر مجبور نیست که مجدد آن را دانلود کند چرا که وب اپ هست و بلادرنگ به روزرسانی می شود و حجم کمتری هم نسبت به اپ بومی دارد! امن هم هستند، چرا که الزاما PWA ها باید روی https اپ بالا بیاید، در کل می توان گفت برای متور های جستجو بهتر بهینه شده اند.
می توان اپ را به Home Screen گوشی اضافه کرد و پس از آن توسط آیکن برنامه به آن مراجعه کند و البته خبری از URL bar هم نیست و همان طور که گفته شد در حالتی که سرعت اینترنت پایین باشد یا حتی آفلاین باشیم باز هم سریع کار می کند. توسط ارسال نوتیفیکیشن کاربر مجدد به اپ باز می گرداند و باعث درگیر شدن مجدد (re-engage) با برنامه می شود. [2,3, 4]
نمونه های موفق PWA
بدیهی است که بسیاری از پیشگامان وب از این روش برای بهبود تجربه کاربری وب سایت/وب اپلیکیشن خود از آن استفاده می کنند. مانند تلگرام، دیجی کالا، اسنپ، تویتر، پینترست، FlipBoard و...
حرکت ویندوز به سمت پشتیبانی از PWA ها
اخیرا ویندوز هم اخیر با آغوشی باز روی پراگرسیو وب ها سرمایه گذاری می کند و قرار است به زودی استور ویندوز 10 (که به شکل خودکار وب سایت های پراگرسیو را اندکس و به استور اضافه می کند) و مرورگر Edge شاهد وجود پشتیبانی از اپ های پراگرسیو باشیم. [5] این به معنی ورود پراگرسیو وب ها به دسکتاپ هم هست. هم اکنون می توانید آیکن وب اپ های پراگرسیو را در مرورگر گوگل کروم به دسکتاپ خود اضافه کنید!
پراگرسیو وب اپ ها در هر جایی که وب کار می کند، کار می کنند!
در مرورگر های غیر از کروم از جمله اپرا و فایر فاکس پراگرسیو وب اپ ها پشتیبانی می شوند. ویدیو زیر نمایشی از یک اپ پروگرسیو است در مرورگر فایرفاکس:
چرا استارت آپ ها باید از پراگرسیو وب ها استفاده کنند؟
یا چرا حرکت به سمت پراگرسیو وب اپ ها برای استارت اپ های ایرانی لازم است؟
همانطور که گفتیم بسیاری از وب سایت های تجاری به این سمت حرکت کرده اند چرا که وب سایتی را با HTML, CSS و JavaScript (یا فریم ورک های آن) ساخته اید به سادگی و با کمترین زحمت و دردسر قابل تبدیل به پراگرسیو وب است و این یعنی کاهش هزینه برای توسعه، نگه داری اپ های مختلف در پلت فرم های مختلف و عدم نیاز به نیروی انسانی برای این کارها است. و از طرفی موجب افزایش SEO سایت شده و منافع این امر نیز از کسی پوشیده نیست.
یک نمونه: وب سایت پینترست که تبدیل به پراگرسیو وب اپ شده را بررسی کنیم که از لحاظ تجاری هم کاملا روندی رو به رشد داشته است.
به نظر من بسیاری از وب سایت های ایرانی از جمله استارت اپ ها می توانند با استفاده از قابلیت هایی که وب الان دارد تبدیل به پراگرسیو وب اپ شوند. شما چه فکر می کنید؟ چرا با وجود این همه مزایا هنوز از اپ های هیبریدی و یا بومی استفده می شود در حالی که بیشتر این اپ ها می توانند پراگرسیو باشند؟
در قسمت بعدی که هفته بعد منتشر خواهد شد وارد جزییات فنی چگونگی ساخت یک وب اپ پراگرسیو در فریم ورک انگولار خواهیم شد.
? لینک قسمت دوم
اگر سوالی دارید، می توانید با استفاده از ایدی mmdsharifi در یاهو و یا تلگرام با من در تماس باشید :)
مطلبی دیگر از این انتشارات
جوری کد بنویس که بشه خوند...!
مطلبی دیگر از این انتشارات
ارتباط بین React JS و Flux JS
مطلبی دیگر از این انتشارات
آشنایی با تفاوت پراپرتی های METHODS,WATCHERS,COMPUTED در Vue