معرفی و بررسی PWA (Progressive Web App)

/ software / از
PWA(Progressive Web App) logo

چکیده

بسیاری از ما نام PWA  به گوشمان خورده است و تقریبا همه ی ما از آنها استفاده کرده ایم. اما PWA  واقعا چیست و چه توانایی ها و مزایا و معایبی دارد؟

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

در این مقاله سعی بر این است تا از طریق چند منبع معتبر، شما با PWA   ها آشنا شوید و  ساختار آنها را به خوبی متوجه شوید.

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

لغتنامه

وب اپلیکیشن (Webapp)

تشخیص تفاوت بین یک وب اپ و یک وب سایت برای یک کاربر نهایی معمولا دشوار است.  آنها فقط  URL  را تایپ می کنند و نتیجه را مشاهده میکنند.  وب اپ نوعی نرم افزار است که توسط مرورگر قابل دسترسی است. به عبارت دیگر ، می توان  گفت وب اپ ها، وب سایت هایی با عملکرد و عناصر قابل تعامل (interactive) هستند.
از وب اپ های مشهور میتوان به google docs و مشتقات آن و حتی gmail،  اپلیکیشن های دیزاین Figma یا Canva ، اسنپ فود ، سایت توییتر و بسیاری موارد دیگر اشاره کرد. [1]

ویژگی های یک وب اپ

–  چند پلتفرمی هستند(multi platform) – به این معنی که باید بتوانند روی هر سیستم عامل  کار کنند.

– به صورت ابری میزبانی میشوند و سپس کاربر قابلیت نصب کردن آن را بصورت آفلاین دارد.

– به راحتی با تست های خودکار آزمایش می شوند . از همان تکنولوژی هایی که برای تست وبسایت ها استفاده میکنیم میتوانیم برای تست PWA ها استفاده کنیم.

API

API(رابط برنامه نویسی برنامه) مجموعه ای از ویژگی ها و قوانینی است که در داخل یک  برنامه نرم افزاری وجود دارد و امکان تعامل با آن از طریق نرم افزار را فراهم می کند  – برخلاف رابط کاربری انسانی.  API  را می توان به عنوان یک قرارداد ساده (رابط) بین برنامه  ارائه دهنده آن و سایر موارد ، مانند نرم افزار یا سخت افزار شخص ثالث ، مشاهده کرد.
در توسعه وب ،  API  به طور کلی مجموعه ای از ویژگی های کد (به عنوان مثال متد ها ،  خصوصیات ، رویدادها و  URL  ها) است که یک توسعه دهنده می تواند در برنامه های خود  برای تعامل با اجزای مرورگر کاربر، یا سایر نرم افزارها / سخت افزارهای روی کامپیو تر کاربر استفاده کند. یا وبسایت ها و سرویس های شخص ثالث.
برای مثال:
از  API  جغرافیایی می توان برای بازیابی اطلاعات مکان از هر سرویسی که کاربر در دستگاه  خود در دسترس دارد استفاده کرد (به عنوان مثال  GPS)  ، سپس می تواند همراه با  API  های  Google Maps  مورد استفاده قرار گیرد تا به عنوان مثال مکان کاربر را روی نقشه سفارشی  ترسیم کرده و نشان دهد آنها چه جاذبه های گردشگری در منطقه خود دارند.
Twitter API می تواند برای بازیابی اطلاعات از حساب های توییتر کاربر استفاده شوند ،  به عنوان مثال ، آخرین توییت های آنها را در یک صفحه وب نمایش دهید.[2]
 

برنامه های بومی (Native)

یک برنامه ی قابل اجرا و کد شده به زبان ماشین از بستر سخت افزاری که در آن در حال اجرا  است. برنامه های بومی به زبان ماشین آن پردازنده وارد می شوند. به عنوان مثال ، برنامه های  اجرایی پردازنده های فعلی اینتل (مثلا core i9 11th gen) به زبان ماشین  x86  هستند ، در حالی که برنامه های تلفن های همراه و چیپ های سری M اپل مبتنی بر  ARM  هستند (به  x86   و ARM  مراجعه کنید).[3]
 

Cross Platform

اپلیکیشن هایی که قابلیت اجرا روی چندین محیط اجرایی قابلیت اجرا دارد.  برای مثال اپلیکیشنی که هم روی ویندوز،هم لینوکس، هم مک و هم اندروید اجرا شود. چه با پردازنده های x86 و چه ARM و غیره.
 

Service Worker

سرویس ورکر ها اساسا به عنوان سرورهای پراکسی (رابط هایی) عمل می کنند که بین برنامه های وب ،  مرورگر و شبکه قرار دارند. هدف آنها ، از جمله موارد دیگر ، ایجاد  تجربه های آفلاین موثر ، رهگیری درخواست های شبکه و اقدامات مناسب بر اساس موجود بودن  شبکه و به روزرسانی دارایی های موجود در سرور است. همچنین امکان دسترسی به اعلان های  فشرده و  API  همگام سازی پس زمینه(background sync ) و بسیاری امکانات دیگر بومی مانند را فراهم می کند.[5]
 

مقدمه

قرار است از کلمه ها و اصطلاحات فنی زیادی در این مقاله ی تخصصی استفاده شود. اما وحشت نکنید! تا حد توان موضوعی را بی توضیح نمیگذارم و سعی میکنم به تمام آنها بپردازم . اگر هم چیزی از قلم افتاد، سرچ کردن در اینترنت همیشه دوست شماست!
در این مقاله سعی بر این است که از اندک تجربه ی خود به عنوان یک توسعه دهنده ی وب با تمرکز تخصصی به PWA ها، استفاده کنم و به ساده ترین و قابل فهم ترین حالت توضیحات و مفاهیم را ارائه دهم.
 
در بین پیشگامان تکنولوژی PWA، میشود به Google و Mozilla به عنوان اصلی ترین آنها اشاره کرد. هر دوی این ارگان ها مقالات و مستندات بسیار دقیق  و خوبی بر این موضوع دارند؛ سعی میکنم تا چکیده ای از چندین مقاله ی معتبر را به زبان ساده و قابل فهم تر بازگو کنم.
 
وب یک بستر باورنکردنی است. ترکیبی از همه گیر بودن آن در بین دستگاهها و سیستم عامل ها، مدل امنیتی کاربر محور آن و این که نه مشخصات آن و نه اجرای آن توسط یک شرکت کنترل  نمی شود (البته که به مرور دارد به دست منوپولی Google میافتد که فاجعه بار است)، وب را به یک بستر منحصر به فرد برای توسعه نرم افزار تبدیل می کند. همراه با امکان جستجوی آن و به اشتراک گذاشتن آنچه پیدا کرده اید با هر کسی و  در هر مکان که است. هر زمان که به وب سایتی می روید ، به روز است و تجربه شما با آن سایت  می تواند به همان اندازه که دوست دارید زودگذر یا ماندگار باشد. برنامه های وب می توانند توسط  هر کسی ، در هر مکانی ، در هر دستگاهی مورد دسترسی قرار گیرند.[4]
 
برنامه های خاص بستر های نرم افزاری یا برنامه های بومی، به غنی بودن و قابل اعتماد بودن مشهور هستند. آنها بدون توجه به اتصال به شبکه کار می کنند. آنها در تجربه مستقل خود راه اندازی میشوند(stand alone). آنها می  توانند از سیستم فایل محلی بخوانند و به آن بنویسند، به سخت افزارهای متصل شده از طریق USB، سریال یا بلوتوث دسترسی پیدا کنند و حتی با داده های ذخیره شده در دستگاه شما مانند مخاطبین و  رویدادهای تقویم ارتباط برقرار کنند. در این برنامه ها می توانید کارهایی مانند عکس گرفتن ،  دیدن پخش آهنگ های ذکر شده در صفحه اصلی یا کنترل پخش آهنگ هنگام حضور در برنامه دیگری را انجام دهید. برنامه های خاص بستر های نرم افزاری مانند بخشی از دستگاهی هستند  که روی آن کار می کنند. [4]
 
اگر از نظر قابلیت ها و قابلیت دسترسی به برنامه های بومی و برنامه های وب فکر میکنید ، برنامه های بومی بهترین عملکرد را نشان می دهند در حالی که  برنامه های وب بهترین امکانات و سهولت دسترسی را نشان می دهند. بنابراین برنامه های وب پیشرو در کجا قرار  می گیرند؟
برنامه های وب پیشرو PWA با استفاده از  API  های مدرن ساخته شدند تا قابلیت ها ، اطمینان  و قابلیت نصب بهبود یافته را در اختیار قرار دهند، آن هم در حالی که در دسترس هرکس، هر کجا و روی هر دستگاهی هستند . فقط با یک مبنای ُکد!
 
برنامه های وب پیشرو(PWA) برنامه های وبی هستند که  از  API  ها و ویژگی های در حال ظهور مرورگر وب استفاده می کنند تا یک تجربه کاربری مانند برنامه بومی را برای برنامه های وب بصورت cross-platform ایجاد کنند.  برنامه های وب پیشرو یک الگوی طراحی مفید  هستند ، اگرچه استاندارد رسمی نیستند. می توان  PWA  را شبیه  AJAX  یا سایر الگوهای مشابه  دانست که مجموعه ای از ویژگی های برنامه را شامل می شود ، از جمله استفاده از فن آوری ها  و تکنیک های خاص وب. این مقاله هرچه الزم است راجب آنها بدانید را به شما میگوید.[7]
به طور خلاصه، ما وب اپلیکیشن خود را میتوانیم به یک PWA تبدیل کنیم و تنها کافیست که یک مانیفست و یک سرویس ورکر به آن اضافه کنیم. (البته اینها نیاز های حداقلی هستند)
 

سه رکن برنامه

 Progressive Web Apps  برنامه های تحت وب هستند که به گونه ای طراحی شده اند که  توانا ، قابل اطمینان و قابل نصب باشند. این سه رکن آنها را به تجربه ای تبدیل می کند که احساس  می شود یک برنامه ی بومی است.[8]
 ماده اصلی مورد نیاز  PWA  ها پشتیبانی ا ز service worker  است. خوشبختانه  service  worker  ها اکنون در همه مرورگرهای اصلی در دسکتاپ و موبایل پشتیبانی می شوند.[6]

مزایای PWA

یک برنامه وب پیشرو با قابلیت کامل باید تمام مزایای زیر را در اختیار کاربر قرار دهد.
 
 قابل پیدا کردن
 
هدف نهایی این است که برنامه های وب باید نمایندگی بهتری در موتورهای جستجو  داشته باشند ، در معرض نمایش قرار گرفتن ، فهرست بندی(indexing) و رتبه بندی آنها آسان تر باشد و  دارای فراداده هایی(metadata) باشند که توسط مرورگرها قابل استفاده است و به آنها قابلیت  های ویژه ای می بخشد.
استاندارد وب مرتبط در اینجا  web app manifest  است ، که ویژگی های برنامه ای مانند نام  ، نماد ، صفحه ی شروع و رنگ زمینه را در یک فایل مانیفست با قالب  JSON  تعریف می کند.  این برای استفاده در زمینه هایی مانند لیست برنامه ها و صفحه های اصلی دستگاه است.
 
قابل نصب
یک قسمت اصلی از تجربه PWA این است که کاربران نمادهای برنامه را در صفحه  اصلی خود داشته باشند و بتوانند برای باز کردن برنامه ها در محیط بومی خود که به خوبی با  سیستم عامل اصلی سازگار است استفاده کنند.
برنامه های وب مدرن می توانند از طریق ویژگی های تنظیم شده در  web app manifet و  از طریق ویژگی موجود در مرورگرهای مدرن به نام web app  installation ، این احساس برنامه بومی را داشته باشند.
این امر استفاده ی کاربر را نیز به طور چشمگیری افزایش میدهد چراکه بجای اینکه ابتدا مرورگر خود را باز کند و سپس آدرس سایت را وارد کند، فقط با یک کلیک و بدون شلوغی های مرورگر اپلیکیشن باز میشود.
 
استقلال نسبی از شبکه
برنامه های وب مدرن می توانند در زمانی کار کنند که شبکه غیرقابل اعتماد باشد ، یا حتی وجود نداشته باشد. ایده های اساسی در پشت استقلال از شبکه این است که بتوانید:
– از یک سایت بازدید کرده و محتوای ثابت و ذخیره شده ی آن را دریافت کنید حتی اگر شبکه ای در دسترس  نباشد.

– هر نوع محتوایی را که کاربر قاب لا حداقل یک بار بازدید کرده است ، حتی در شرایط  اتصال ضعیف یا نبود اینترنت، مرور کنید.

– آنچه را که به کاربر نشان داده می شود در شرایطی که هیچ ارتباطی وجود ندارد کنترل  کنید.(حالت آفلاین/ حالت آنلاین)

به روز بودن

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

برنامه های وب پیشرو هم اکنون می توانند این کار را انجام دهند ، با  استفاده از فن آوری های جدید مانند  Service Workers  برای کنترل صفحات ،  Web Push  API  برای ارسال به روزرسانی مستقیم از سرور به برنامه از طریق کارگر سرویس و  API  Notifications  برای تولید اعلان های سیستم به کاربران کمک میکنند به روز باشند بدون اینکه از مرورگر خود استفاده ی فعال کنند. به روز رسانی PWA ها به مراتب از اپ های بومی ساده تر است.

واکنش گرایی ابعاد(responsiveness)

برنامه های وب پاسخگو از فناوری هایی مانند نمایش داده های رسانه ای و  viewport استفاده می کنند تا اطمینان حاصل کنند که رابط کاربری آنها با هر فرمی: دسک تاپ، موبایل، رایانه لوحی و… متناسب باشد.

امنیت

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

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

چطور PWA ها موجب موفقیت بسیاری از کسب و کار ها شدند؟

گوگل میگوید:
 

هنگام انجام تحقیقات به روی کاربر ، برخی از الگوهای جالب را پیدا می کنیم:
کاربران از تأخیر و عدم اطمینان در تلفن همراه متنفر هستند: میزان استرس ناشی از تاخیر تلفن همراه با تماشای یک فیلم ترسناک  قابل مقایسه است.
پنجاه درصد از کاربران تلفن های هوشمند به دلیل اینکه نمی خواهند برنامه ای را بارگیری کنند ، بیشتر از سایت تلفن همراه یک  شرکت هنگام مرور یا خرید استفاده می کنند.  یکی از مهمترین دلایل حذف برنامه های بومی ، فضای ذخیره سازی محدود است( در حالی که PWA نصب شده معمولا  کمتر از 1  مگابایت فضا میگیرند.)  کاربران تلفن های هوشمند به احتمال زیاد از سایت های تلفن همراه که توصیه های مربوط به محصولات را ارائه می دهند خرید  می کنند و 58٪ از کاربران تلفن های هوشمند می گویند اعلان های تلفن همراه مفید هستند.  با توجه به این مشاهدات ، ما متوجه شدیم که مشتریان تجربیات سریع ، قابل نصب ، قابل اعتماد و جذاب را ترجیح می دهند [9]

 PWA ها از توانایی های مدرن وب به خوبی استفاده میکنند

PWA ها مجموعه ای از بهترین شیوه ها و  API  های وب مدرن را ارائه می دهد که با ایجاد  سریع ، نصب ، قابل اعتماد و جذاب سایت ، در برآوردن نیازهای مشتریان شما قرار دارند.  به عنوان مثال ، استفاده از یک سرویس ورکر برای ذخیره منابع شما و انجام د ریافت پیش بینی شده، باعث سریعتر و قابل اعتمادتر شدن سایت شما می شود. نصب سایت شما راهی آسان برای  دسترسی مستقیم مشتریان از صفحه اصلی یا راه انداز برنامه به مشتریان می دهد. و  API  های  جدید مانند  Web Push Notifications  باعث سهولت در جذب مجدد کاربران با محتوای  شخصی شده برای ایجاد وفاداری می شود.
 
Ebay  سرعت را به عنوان یک هدف برای سال 2019 در نظر گرفت. آنها از تکنیک هایی مانند  بودجه عملکرد ، بهینه سازی مسیر حیاتی و د ریافت پیش بینی شده(predictive  prefetching ) استفاده کردند. آنها نتیجه گرفتند که به ازای هر 100 میلی ثانیه بهبود زمان  بارگذاری صفحه جستجو ، تعداد افزودنی به سبد خرید 0.5% افزایش می یابد. [9]
 
چرا می خواهید یک کاربر PWA شما را نصب کند؟ برای بازگشت آسان تر به سایت خود. در  مواردی که با نصب برنامه اندروید حداقل سه مرحله اضافه می شود (تغییر مسیر به  Play  Store  ، بارگیری ، راه اندازی مجدد برنامه  Android) ، نصب  PWA  با یک  کلیک به صورت یکپارچه انجام می شود و کاربر از مسیر شما خارج نمیشود.
PWA  علاوه بر قابل دسترسی بودن از روی سطوح آشنا، دقیقا مانند یک برنامه مخصوص پلتفرم راه اندازی می شود: در یک تجربه مستقل ، جدا از مرورگر. علاوه  بر این ، از خدمات دستگاه در سطح سیستم عامل مانند برنامه تعویض برنامه و تنظیمات بهره مند  می شود.
 
کاربرانی که  PWA  شما را نصب می کنند ، با معیارهای تعامل بهتر نسبت به بازدیدکنندگان گاه  به گاه ، از جمله بازدیدهای مکرر بیشتر ، زمان طولانی تر در سایت و نرخ تبدیل بالاتر ، اغلب  در برابری با کاربران برنامه های بومی در دستگاه های تلفن همراه ، بیشترین تعامل  کاربران را دارند.
اعلان های وب(push notifications) به کاربران اجازه میدهند تا همیشه به موقع با اپلیکیشن شما به روز باشند و  محتوای مرتبط داشته باشند.

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

ویژگی های یک PWA خوب

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

 چک لیست اصلی PWA

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

– واکنش گرا با هر سایز صفحه ای
کاربران می توانند از  PWA  شما در هر اندازه صفحه استفاده کنند و تمام مطالب با هر  اندازه نمایشگری (یا حداقل اندازه های مرسوم) در دسترس هستند.
 
– کارکرد مخصوص حالت آفلاین در آنها تعبیه شده
وقتی کاربران آفلاین هستند ، نگه داشتن آنها در  PWA  شما تجربه یکپارچه تری نسبت  به بازگشت به صفحه پیش فرض آفلاین مرورگر را فراهم می کند.
 
– قابل نصب است
کاربرانی که برنامه هایی را به دستگاه خود نصب یا اضافه می کنند تمایل بیشتری به  تعامل با آن برنامه ها دارند.
 

چگونه PWA خود را قابل نصب کنیم؟

اکثر کاربران با نصب برنامه ها و مزایای یک برنامه نصبی آشنا هستند. برنامه های نصب شده در سطوح راه اندازی سیستم عامل مانند پوشه Applications   در MacOS   ،  منوی Start در Windows و  صفحه اصلی در Android و iOS ظاهر می شوند. برنامه های نصب شده همچنین در activity switcher،  موتورهای جستجوی دستگاه مانند Spotlight  و در صفحات  اشتراک محتوا نشان داده می شوند.

بیشتر مرورگرها وقتی که PWA  معیار های خاصی را داشته باشد (manifest و service worker) به شما نشان میدهند که PWA شما قابل نصب میباشد. شاخص های نمونه شامل یک دکمه Install  در نوار آدرس  یا یک آیتم Install در منوی overflow است.

معیار های نصب

  • برنامه قبلا نصب نشده
  • از طریق HTTPS باید ارائه شود (و اگر سروری در کار هست سرور هم باید HTTPS باشد). البته برای محیط توسعه localhost یا 127.0.0.1 هم مقبول است.
  • شامل یک مانیفست برنامه وب است که حداقل موارد زیر را داراست(در قالب JSON):
  •       name یا short_name
  •        icons – باید شامل یک نماد 192px و 512px باشد
  •        start_url – آدرسی که در حین شروع اپلیکیشن بارگذاری میشود
  •     display – باید یکی از انواع fullscreen , standalone , minimal-ui باشد
  • ثبت یک سرویس ورکر ساده

مرورگرهای متفاوت معیارهای مشابهی برای نصب دارند ، اگرچه ممکن است تفاوت های جزئی  وجود داشته باشد.

نمونه ی روش قابل نصب کردن

مانیفست را بصورت یک <link> به HTML اضافه خواهیم کرد:
 
 <!doctype html>
<html lang="en">
  <head>
    <link rel="manifest" href="manifest.json" />
    <!-- ... -->
  </head>
  <body></body>
</html>

اگر PWA ما بیشتر از یک صفحه(html) داشته باشد باید در هر صفحه به این روش مانیفست را لینک کنیم.

مانیفست یک فایل JSON است که در آن برخی مشخصات ظاهری و رفتاری PWA تعریف میشود.

یک نمونه از مانیفست حداقلی

{
  "name": "My PWA",
  "icons": [
    {
      "src": "icons/512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

 تبریک میگویم! حالا شما یک PWA قابل نصب دارید.

چگونه استراتژی نصب خود را تعریف کنیم

در گذشته ، نصب برنامه فقط در متن برنامه های خاص پلت فرم امکان پذیر بود. امروزه ، برنامه های وب مدرن تجربه های قابل نصب را ارائه می دهند که همان سطح یکپارچگی و قابلیت اطمینان برنامه های خاص پلت فرم را فراهم می کنند.
  به روش های مختلف می توان به این هدف رسید: 

  • نصب از طریق مرورگر
  • نصب از طریق فروشگاه برنامه(App store)

چرا برنامه وب خود را قابل نصب می کنید؟

برنامه های وب پیشرفته نصب شده به جای صفحه ی مرورگر ، در یک پنجره مستقل اجرا می شوند.
 آنها از صفحه اصلی ، داک ، نوار وظیفه یا قفسه کاربر قابل راه اندازی هستند. با جستجوی برنامه می توان آنها را جستجو کرد و از بین آنها جست و خیز کرد و باعث می شود احساس کنند بخشی از دستگاهی هستند که روی آن نصب شده اند.  اما داشتن هم یک برنامه وب قابل نصب و هم یک برنامه مخصوص پلتفرم می تواند برای کاربران گیج کننده باشد. برای برخی از کاربران ممکن است بهترین راهکار برنامه های بومی باشند ، اما برای برخی دیگر می توانند اشکالاتی را ارائه دهند:
  محدودیت های ذخیره سازی: نصب یک برنامه جدید ممکن است به معنی حذف دیگران یا پاک  سازی فضا با حذف محتوای ارزشمند باشد. این به خصوص برای کاربران در دستگاه های سطح پایین ضرر دارد.  
پهنای باند موجود: بارگیری یک برنامه می تواند یک روند پرهزینه و کند باشد ،و برای کاربران دارای اتصال کند و برنامه های گران قیمت داده ها ، حتی بیشتر.  
اصطکاک: ترک یک وب سایت و انتقال به فروشگاه برای بارگیری برنامه ، اصطکاک بیشتری  ایجاد کرده و عملکرد کاربر را که می تواند مستقیما در وب انجام شود ، به تأخیر می اندازد. 
 چرخه به روزرسانی: ایجاد تغییر در برنامه های خاص پلتفرم ممکن است نیاز به انجام یک فرآیند بررسی برنامه داشته باشد ، که می تواند تغییرات و آزمایشات را کُند کند (به عنوان مثال آزمایشات A/B).
در برخی موارد ، ممکن است درصد کاربرانی که برنامه مخصوص پلتفرم شما را بارگیری نمی کنند ، زیاد باشد ، به عنوان مثال: کسانی که فکر می کنند زیاد از برنامه استفاده نمی کنند یا نمی توانند هزینه چند مگابایت فضای ذخیره سازی را توجیه کنند. شما می توانید اندازه این بخش را از چند طریق تعیین کنید ، برای مثال با استفاده از یک تنظیم تجزیه و تحلیل  برای ردیابی درصد کاربران “فقط وب همراه”.  اگر اندازه این بخش قابل توجه باشد ، این نشانگر خوبی است که شما باید روش های جا یگزین نصب تجربیات خود را ارائه دهید.
 

تبلیغ برنامه های سبُک 

طبق یک مطالعه در Google Play، به ازای هر 6  MB افزایش اندازه APK، نرخ تبدیل نصب  1٪ کاهش می یابد. این بدان معنی است که میزان تکمیل بارگیری یک برنامه 10 مگابایتی  می تواند تقریبا 30% بیشتر از برنامه ی 100 مگابایتی باشد! 
 برای حل این مسئله ، برخی از شرکتها از PWA  خود استفاده می کنند تا نسخه سبک برنامه خود ر ا با استفاده از فعالیتهای معتمد وب در فروشگاه هایی مثل google play ارائه دهند. فعالیتهای معتمد وب امکان ارائه PWA ما را در فروشگاه Play  امکان پذیر می کند و چون با استفاده از وب ساخته شده است ، اندازه برنامه معمولا فقط چند مگابایت است. 
 Oyo ،  یکی از بزرگترین شرکتهای مهمان نوازی هند ، نسخه Lite   برنامه خود را ساخت و با استفاده از TWA(Trusted Web Application) آن را در فروشگاه Play   در دسترس قرار داد. این اپ جدید فقط 850 کیلوبایت است ، فقط 7٪  اندازه برنامه اندرویدی آنها. و پس از نصب ، از برنامه Android   آنها قابل تشخیص نیست:  اویو نسخه های پرچمدار و lite را در فروشگاه نگه داشت و تصمیم نهایی را به کاربران واگذار کرد.
 

مطالعات موردی

 

سرمایه گذاری  RAKUTEN 24   در PWA  باعث افزایش 450% حفظ  کاربر می شود[11]

قابل نصب شدن برنامه ی وب آنها منجر به افزایش بازدید ، حفظ بازدید کننده ، فروش به ازای  هر مشتری و تبدیل شد.  Rakuten 24  یک فروشگاه آنلاین است که توسط  Rakuten  ، یکی از بزرگترین شرکت های  تجارت الکترونیکی در ژاپن ارائه می شود. این مجموعه انتخاب گسترده ای از اقلام روزمره از  جمله مواد غذایی ، دارو ، مراقبت های بهداشتی ، ظروف آشپزخانه و موارد دیگر را فراهم می  کند. هدف اصلی این تیم در سال گذشته بهبود حفظ مشتری تلفن همراه و تعامل مجدد آن بود. با  نصب برنامه وب خود ، آنها شاهد افزایش 450 درصدی میزان ماندگاری بازدید کننده در مقایسه  با جریان وب تلفن همراه قبلی در بازه زمانی 1 ماهه بودند. 
 

موقعیت های پیشرفت

Rakuten 24  در تلاش های خود برای به دست آوردن سهم بازار و بهبود تجربه کاربر ، زمینه  های زیر را از فرصت ها شناسایی کرد:
  • به عنوان یک سرویس نسبتا جدید ، راکوتن در موقعیتی نبود که بتواند زمان و هزینه  خود را برای توسعه یک برنامه مخصوص پلتفرم برای  iOS   و Android  سرمایه  گذاری کند و به دنبال راهی کارآمد و جایگزین برای پر کردن این خلأ بود.
  •   راکوتن نیاز داشت تا خود را از سایر رقبا متمایز کند و برای کاربر انگیزه ی بیشتر برای استفاده از خدمات آنها ایجاد کند.

کاری که کردند

قابل نصب بودن

برای به دست آوردن دو فرصت مشخص شده در بالا ،  Rakuten 24  تصمیم گرفت ویژگی های  Progressive Web App (PWA)  را به صورت افزایشی و با قابلیت نصب ، ایجاد کند.  اجرای قابلیت نصب منجر به افزایش بازدید ، حفظ بازدید کننده ، فروش به ازای هر مشتری و  تبدیل افراد می شود. 

استفاده از workbox برای سرویس ورکر ها

تیم  Rakuten 24   از Workbox  برای اطمینان از عملکرد خوب  PWA  آنها حتی در زمان  آفلاین بودن کاربر یا در شبکه ی بد استفاده کرد.  API  های  Workbox  برای کنترل حافظه پنهان  به طور قابل توجهی بهتر از اسکریپت داخلی  Rakuten 24  بهتر عمل کردند. علاوه بر این ، با workbox-webpack-plugin و Babel، قادر به خودکار کردن روند پشتیبانی از طیف  وسیع تری از مرورگرها بود. برای ایجاد انعطاف پذیری بیشتر در شبکه ، آنها اولین استراتژی  حافظه پنهان را برای دارایی های  CSS   و JS  خود پیاده سازی کردند و برای تصاویر خود که به  دفعات تغییر نمی کنند ، از اعتبار سنجی-در حالی که تجدید اعتبار می کنند استفاده کردند.

نتایج کلی

با اجرای قابلیت نصب ،  Rakuten 24  توانست فرکانس بازدید را برای هر کاربر 130% در  مقایسه با بقیه کاربران وب خود افزایش دهد. همچنین شاهد افزایش 450 درصدی حفظ بازدید  کننده (در مقایسه با جریان وب قبلی تلفن همراه) ، 150٪ افزایش فروش به ازای هر مشتری و  ٪200 افزایش نرخ تبدیل بود. همه این پیشرفت ها در بازه زمانی 1 ماهه مشاهده شده است.
 

نتیجه گیری و جمع بندی

در حال حاضر سه گزینه برای ساختن یک اپلیکیشن داریم؛ اپ بومی، وب اپ، و pwa 
دریافتیم که pwa  ها، تمام مزیت های وب اپ ها را دارند،مانند سبک بودن و در دسترس بودن و چند پلتفرمی بودن. اما علاوه بر آنها مزایایی از اپ های بومی را نیز دارند. مانند  قابل نصب بودن و اضافه شدن به لیست اپلیکیشن های شما، کار کردن آفالین، و جلوه ی stand alone   که تجربه ی کاربری بسیار بهتری از صفحه ی مرورگر دارد.  
Pwa  ها نسبت به اپ های بومی زمان و هزینه ی بسیار کمتری برای تولید و نگهداری میگیرند، و نسبت به وب اپ ها توانایی های بسیار بیشتری دارند.  همچنین دیدیم که بسیاری از تجارت های مشهور سود های بسیار بینظیری از استفاده از این تکنولوژی برده اند، و درس خودش را پس داده و ثابت شده است.
ا ما ساختن یک pwa   الزاما همیشه بهترین گزینه نیست. هر کدام این سه گزینه ی اپلیکیشن، جای خود را دارند. برای مثال ما هنوز برای اپلیکیشن هایی که نیاز به دسترسی سطح پایین  به سخت افزار دارند و یا اپلیکیشن هایی که منابع بسیار زیادی میخواهند، باید از اپ های بومی استفاده کنیم. یا خیلی وقت ها برای یک بیزنس صرف نمیکند تا هزینه و زمان خود را بگذارد تا  وب اپ خود را pwa کند.
 
اما قطعا pwa   یکی از محبوب ترین و پر رونق ترین تکنولوژی های جدید هستند. هر روز شرکت های بیشتری به آن رو میاورند و از آنجایی که بسیار نوظهور است، روز به روز در حال پیشرفت و قدرتمند تر شدن است.
 

منابع

[1]  freeCodeCamp, “What is the difference betweem website and  webapp,” [Online]. Available:  https://www.freecodecamp.org/news/difference-between-awebsite-and-a-web-application/.
[2]  mozilla. [Online]. Available: https://developer.mozilla.org/.
[3]  pcmag. [Online]. Available: www.pcmag.com. 
[4]  mozilla, “json,” [Online]. Available:  https://developer.mozilla.org/en-US/docs/Glossary/JSON.  
[5]  mozilla, “service worker API,” [Online]. Available:  https://developer.mozilla.org/enUS/docs/Web/API/Service_Worker_API. 
[6]  S. R. /. P. LaPage, “What are pwas,” [Online]. Available:  https://web.dev/what-are-pwas/. 
[7]  J. Archibald. [Online]. Available:  https://jakearchibald.github.io/isserviceworkerready/. 
[8]  mozilla, “Progressive web apps(PWA),” [Online]. Available:  https://developer.mozilla.org/enUS/docs/Web/Progressive_web_apps. 
[9]  S. Fourault, “pwa in business success,” [Online]. Available:  https://web.dev/drive-business-success/.  
[10] I nsider, “carrefor conversion with push notification,” [Online].  Available: https://useinsider.com/case-studies/carrefour/.
[11]  google, “pwa case study on rakuten24,” [Online]. Available:  https://web.dev/rakuten-24/.   
 
 
 
پیمایش به بالا