آیا تا به حال اصطلاح Progressive Web Application (PWA) را شنیده‌اید و برایتان سوال شده که درمورد چه چیزی است؟ یا شاید هم بارها از آن استفاده کرده باشید؟ علیرغم اینکه در چه مرحله‌ای هستید، جالب است بدانید که این فناوری کجا بهتر کار می‌کند و چه زمانی آن را برای وبسایت‌های تلفن همراه و برنامه‌های بومی تلفن همراه انتخاب کنید.
به طور خلاصه وب اپلیکیشن پیش رونده (PWA) یک برنامه وب است که با استفاده از جدیدترین ویژگی‌های موجود در مرورگرهای تلفن همراه و وب، تجربه‌ای شبیه به برنامه بومی را فراهم می‌کند.
داستان موفقیت PWA
بسیاری از مردم می‌گویند PWA آینده وب است. بیایید به برخی از داستان‌های موفقیت PWA نگاهی بیندازیم تا از مزایای آنها مطلع شویم.
۱. Twitter Lite – افزایش ۷۵ درصدی توییت‌ها
طبق یک مطالعه گوگل، تویتر لایت پس از تغییر به PWA موارد زیر را تجربه کرده است.
- ۶۵ درصد افزایش صفحات در هر سشن
- ۷۵ درصد افزایش توییت‌های ارسالی
- ۲۰ درصد کاهش bounce rate
هدف اصلی آنها بهبود تجربه وب در موبایل به طور سریعتر و قابل اعتمادتری برای کاربر نهایی بود. با توجه به آمار فوق مشخص است که توییتر با PWA به هدف خود رسیده است.
۲. Pinterest – افزایش ۶۰ درصدی در جذب کاربر
بعد از اینکه بسیاری از کاربران کندی آن را تجربه کردند، پینترست تصمیم گرفت یک PWA را پیاده سازی کند. با این کار آنها موفق به دستیابی موارد زیر شدند.
- بازدیدکننده ۴۰ درصد بیشتر وقت خود را در پینترست صرف می‌کند
- ۴۴ درصد افزایش در نرخ درآمد آگهی
- افزایش ۶۰ درصدی در جذب کاربر
- کاهش میزان ذخیره سازی به ۱۵۰ کیلوبایت در مقایسه با برنامه اندروید بومی ۹.۶ مگابایتی و برنامه iOS ۵۶ مگابایتی
۳. Forbes – عمق پیمایش سه گانه
با چشم انداز تغییر نام تجاری تجربه تلفن همراه، فوربس به PWA تغییر جهت داد. نتیجه آن بسیار رضایت بخش بود. آنها موفق شدند:
- تعامل و شخصی‌سازی بیشتر کاربر را فراهم کنند
- ۴۳ درصد سشن بیشتر برای هر کاربر ثبت کنند
- قابلیت مشاهده آگهی را ۲۰ درصد افزایش دهند
- عمق پیمایش سه‌گانه را پیاده‌سازی کنند
۴. Starbucks – دو برابر شدن کاربران فعال روزانه
استارباکس PWA خود را در سال ۲۰۱۷ راه‌اندازی کرد. در زیر موارد مهمی است که آنها با استفاده از PWA به دست آورده‌اند.
- دسترسی آفلاین به منوها و قیمت آنها برای مشتریان فعال شده است
- تعداد کاربران فعال روزانه ۲ برابر افزایش یافت
- حافظه مورد نیاز را در مقابل برنامه تلفن همراه ۱۴۸ مگابایتی خود به ۲۳۳ کیلوبایت کاهش داد
به همین ترتیب یک لیست طولانی از مزایای آن وجود دارد. این نمونه‌ها شواهد محکمی را برای پیش بینی اینکه PWA فضای بی‌نظیری در صنعت پیدا کرده است، ارائه می‌دهند.
بنابراین چه چیزی در بین این برنامه‌ها منحصر به فرد است و چه کسی باید بهره‌گیری از PWA را مد نظر قرار دهد؟
اگر به دقت نگاه کنید، می‌بینید که هر برنامه داده محور بوده و کاربر به یک سیستم‌عامل متصل است. علاوه بر این می‌توانید برنامه‌هایی مانند تویتر لایت را پیدا کنید که نشان می‌دهد نسخه سبک‌تری از برنامه بومی تلفن همراه دارد.
بنابراین بیایید هم از نظر کاربر و هم توسعه دهنده از مزایای PWA مطلع شویم که به شما در تعیین زمان استفاده از آن کمک می‌کند.
مزایای استفاده برای کاربران نهایی
۱. نصب و دسترسی آسان
برخلاف یک برنامه بومی تلفن همراه، PWA یک مکانیزم نصب بدون دردسر دارد. هر وب اپلیکیشن پیش رونده دارای یک URL است که برای دسترسی به برنامه مورد استفاده قرار می‌گیرد و حتی می‌توان یک میانبر برای آن در صفحه اصلی خود ایجاد کرد. همچنین نوتیفیکیشن‌هایی را ارسال کرده و آنها را در تنظیمات سیستم شما ادغام می‌کند. اگر دامنه وب شما از قبل برای کاربران آشنا باشد، آنها در کمترین زمان PWA شما را پیدا می‌کنند.
۲. افزایش عملکرد شبکه
PWAها برای استفاده بعدی بسیار سریعتر از یک وبسایت مناسب برای موبایل بارگیری می‌شوند، حتی در وضعیت نامناسب شبکه. از آنجا که PWA برخی از ویژگی‌ها را در مرورگر تلفن همراه ذخیره می‌کند، این اتفاق می‌افتد. علاوه بر این ذخیره داده‌ها برای دسترسی آفلاین در دستگاه‌های تلفن همراه نیز امکان پذیر است.
از آنجا که امکان ذخیره داده‌ها برای استفاده آفلاین وجود دارد، PWA حتی در شرایط ضعیف شبکه عملکرد بهتری دارد.
۳. تعهد کلی کمتر
برنامه‌های بومی تلفن همراه برای کاربر نهایی با تعهد زیادی همراه هستند. کاربر ابتدا باید برنامه را حتی برای یک بار استفاده دانلود و نصب کند. سپس فضایی را بر روی دستگاه اشغال می‌کند. حتی در صورت کمبود فضای ذخیره سازی ممکن است برخی از افراد برنامه را از دستگاه حذف کنند.
اما PWA به چنین تعهدی احتیاج ندارد. هر زمان که کاربر نیاز به دسترسی به آن داشته باشد، آن را باز می‌کند و فضای کمتری هم به اندازه مشاهده یک وب سایت معمولی برای موبایل نیاز دارد. به علاوه این امکان را دارد که برای استفاده مکرر آن را به صفحه اصلی خود اضافه کنیم.
مزایای استفاده برای توسعه دهندگان وب
۱. هزینه پایین در توسعه
عمدتا به دلیل مشخصات سیستم‌عامل، ایجاد برنامه‌های بومی تلفن همراه دشوار است. تا زمانی که از فناوری‌های ترکیبی مانند React Native یا Swift استفاده نکنید، ممکن است لازم باشد دو پایگاه کد را برای iOS و Android نگهداری کنید. علاوه بر این اضافه کردن ویژگی‌های جدید به برنامه باید کل مراحل ساخت را طی کند و توسط مدیران فروشگاه برنامه تأیید شود.
در عوض PWAها می‌توانند از یک کد واحد برای سیستم‌عامل‌های مختلف استفاده کنند و در همه دستگاه‌ها یکسان به نظر می‌رسند. به روزرسانی PWAها به سادگی به روزرسانی پایگاه کد و استقرار آن است. بنابراین در حالی که تجربه مناسبی روی موبایل دارند، از توسعه و نگهداری کمتری نسبت به برنامه‌های بومی نیز برخوردار هستند.
علاوه بر این دیگر مجبور نیستید حق کمیسیون یا هزینه دیگری را به فروشگاه‌های برنامه پرداخت کنید. بلکه کل درآمد حاصل از طریق PWA به شما تعلق می‌گیرد.
۲. دیگر هیچ رقابتی در سیستم‌عامل‌های توزیع وجود ندارد
با افزایش روزافزون برنامه‌های تلفن همراه، کسب رتبه خوب در Play Store یا App Store در هر گروه دشوار است. همچنین به دست آوردن یک مجموعه عظیم کاربر و حفظ آنان به دلیل این رقابت کاملا مشکل است.
بنابراین آیا ارزش دارد که پس از صرف این همه وقت و هزینه برای توسعه برنامه خود در جایی در فروشگاه برنامه پنهان شوید؟
PWA این مسئله را برطرف می‌کند، زیرا کاربران می‌توانند برنامه شما را خارج از فروشگاه‌های برنامه حتی با جستجوی ساده در گوگل مشاهده کنند.
۳. رتبه بهتر در سئو
PWAها از مزیت اضافه شده در کسب رتبه‌های بهتر در موتورهای جستجو برخوردار هستند. براساس تلاش سئو شما، برنامه می‌تواند در نتایج جستجو رتبه بهتری کسب کند. همچنین به اشتراک گذاشتن وب اپلیکیشن‌های پیش رونده نیز بسیار آسان تر است، زیرا آنها URL دارند. بنابراین دسترسی و گسترش آنها بسیار گسترده‌تر از برنامه‌های بومی تلفن همراه است.
توجه: کامپوننت‌های قابل استفاده مجدد خود را با استفاده از Bit (Github) بین پروژه‌هایتان به اشتراک بگذارید.
Bit به اشتراک گذاری، مستند سازی و استفاده مجدد از کامپوننت‌های مستقل بین پروژه‌ها کمک می‌کند. همچنین می‌توانید از آن برای به حداکثر رساندن استفاده مجدد از کد، حفظ یک طراحی سازگار، همکاری تیمی، تحویل سریع و ساخت برنامه‌هایی با مقیاس بالا استفاده کنید.
بیت از Node ، TypeScript ، React ، Vue ، Angular و موارد دیگر نیز پشتیبانی به عمل می‌آورد.
بهترین شیوه‌های پیاده سازی PWA
چگونه می‌توان PWA خود را با ظرافت و عملکرد بیشتر نگهداری کرد؟ در اینجا چند تکنیک وجود دارد که می‌توانید در ساخت PWA استفاده کنید.
۱. تمرکز بر استفاده از تلفن همراه
در واقع می‌توانید با معرفی Service Workers و فایل‌های Manifest، برنامه وب کاملا برجسته خود را به یک برنامه PWA تبدیل کنید. با این حال بهتر است به استفاده واقعی وب سایت در دستگاه‌های تلفن همراه فکر کنید.
به عنوان مثال کاربران شما فقط به چند ویژگی اساسی در برنامه تلفن همراه نیاز دارند. بقیه ویژگی‌ها می‌تواند غیرضروری و پیچیده باشد. در این صورت می‌توانید ویژگی‌های مورد نیاز را در برنامه PWA بهینه سازی شده برای استفاده در تلفن همراه اولویت بندی کنید.
۲. رندر سمت سرور
رندر برنامه‌های وب پیش رونده در سمت سرور توصیه می‌شود، زیرا باعث بهبود عملکرد و تجربه کاربر می‌گردد. همچنین به رتبه بندی بهتر سئو در بخش‌های قابل دسترسی عمومی (بدون نیاز به ورود به سیستم) برای موتورهای جستجو یا ربات‌ها برای ایندکس کردن مطالب کمک می‌کند.
۳. لود تنبل
نمایش به موقع اطلاعات به کاربران بسیار مهم است. هر چه بیشتر منتظر بارگذاری صفحه باشند، احتمال ترک وب سایت بیشتر می‌شود. این اصل برای PWA نیز صدق می کند. بنابراین مهم است که با استفاده از الگوهایی مانند (PRPL (Preload, Render, Pre-cache, Lazy load صفحات وب داخلی و فایل‌های غیر مهم را به صورت تنبل لود کنید.
جمع بندی
چندین شرکت معروف مانند Pinterest ، AliExpress ، Forbes ، Uber ، Instagram ، Twitter و Starbucks در حال حاضر از PWA استفاده می‌کنند. علاوه بر این اکثر آنها انواع برنامه‌های دیگر مانند بومی و وب با امکانات کامل در کنار PWA دارند. بنابراین به نظر می‌رسد PWA مخاطبانی را جذب می‌کند که با دیدن مزایای آن ویژگی‌های آن را تحسین می‌کنند. اگر برنامه شما در جایگاه خاصی قرار گرفت، علاوه بر برنامه‌های دیگر PWA را نیز در نظر بگیرید.
