PWA چیست و چرا باید به آن توجه کنیم؟

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

در سال 2016، برای اولین بار، تعداد کاربران موبایل از تعداد کسانی که از طریق کامپیوتر به وب دسترسی داشتند، پیشی گرفت. از آن زمان تا به امروز، هیچ نشانه‌ای از اینکه این روند کند شده باشد دیده نمی‌شود.

همه افراد به دنبال چگونگی طراحی سایت یا یک وب اَپ هستند که بیشترین سازگاری را با تلفن‌های همراه داشته باشد. Progressive Web App یا وب اپلیکیشن پیشرو این امکان را به شما می‌دهد. در این مقاله به بررسی این موضوع می‌پردازیم که PWA چیست، چه تفاوتی با تکنولوژی‌های دیگری مانند AMP دارد و چطوری می‌توان از آن استفاده کرد. با ما همراه باشید و با این تکنولوژی جدید آشناشوید.

استفاده از زیاد تلفن همراه و اپلیکیشن های موبایل

مطالعات و تحقیقات انجام شده نشان می‌دهد، اختلافی که بین استفاده از وب سایت‌ها یا وب اَپ ها و موبایل وجود دارد روز به روز بیشتر می‌شود و هر سال نسبت به سال قبل افزایش پیدا می‌کند. برای اینکه بهتر این موضوع را متوجه شوید، در اینجا روند این تغییرات را از سال 2016 تا 2017 و تنها در ایالت متحده آورده‌ایم.

این‌طور که بررسی‌ها نشان می‌دهد، موبایل در بین کل کاربران جهان محبوب‌تر از وب است.

با این توصیفات، باید از خودمان بپرسیم که چطور می‌توانیم تجربه استفاده از تلفن همراه را بهبود دهیم؟ آیا وقتش رسیده که رابطه دوستانه‌ای با موبایل داشته باشیم؟

گوگل با معرفی برنامه وب اپلیکیشن پیشرو در سال 2015 به این سوال‌های کاربران پاسخ داد. بیایید ببینیم که آینده وب موبایل با progressive web app چطور به نظر می‌رسد و چرا باید به این تکنولوژی نوین توجه داشته باشیم.

PWA یا وب اپلیکیشن پیشرو چیست؟

وب اپلیکیشن پیشرو پلی بین وب سایت‌های موبایل و اَپ های موبایل است. در توصیف آسان می‌توان PWA را یک وب سایت موبایل پیچیده که درون یک پوسته اَپ قرار دارد در نظر گرفت؛ اما در حقیقت، چیزهای بیشتری از این توصیف درباره PWA وجود دارد.در حقیقت، PWA تجربه‌هایی که کاربران موبایل می‌خواهند داشته باشند را با تمام چیزهای خوبی که از یک برنامه موبایل که به صورت native دارند ارائه می‌کند.شما می‌توانید از یک وب اپلیکیشن پیشرو انتظار داشته باشید که از این موارد تبعیت کند.

UI شبیه به اَپلیکیشن و ناوبری مناسب سرعت بالای صفحات قابل اطمینان بودن صفحه home screen فعال قابلیت استفاده آفلاین تمام ویژگی‌های تلفن همراه (مانند نوتیفیکیشن های فعال و موقعیت جغرافیایی)

وب سایت‌های زیادی هستند که می‌توانند از قابلیت وب اپلیکیشن پیشرو استفاده کنند. جالب است بدانید که شبکه‌های اجتماعی مانند توییتر قبلاً خودشان را به این حالت تغییر داده‌اند.شرکت‌های رسانه‌ای مانند فوربس، سایت‌های املاک مانند Housing.com و سایت‌هایی که خدمات hospitality سرویس ارائه می‌کنند مانند Ele.me نیز در استفاده از PWA موفق بوده‌اند.تجربه هر وب سایت در استفاده از PWA متفاوت بوده، اما نتیجه‌ای که همه آن‌ها گرفته‌اند یکسان است. زمان بارگذاری سریع‌تر، رابط کاربری پیشرفته، استفاده راحت و دسترس پذیری خوب PWA، چیزی است که منجر به جذب کاربران بیشتر می‌شود.

چطور می‌توانیم یک وب اپلیکیشن پیشرو بسازیم؟

برخلاف Native App یا برنامه‌های موبایل که برای ساخت آن‌ها نیاز به توسعه دهنده موبایل دارید تا روند انجام کار را مدیریت کنند و سرمایه زیادی برای انجام این کار لازم است. وب اپلیکیشن پیشرو ساده‌تر است و با هزینه کمتری می‌توانید آن را بسازید.

یک وب اپلیکیشن پیشرو از دو بخش تشکیل شده است: یک مانیفست (Manifest) وservice worker ، در ادامه بیشتر توضیح دهم تا متوجه شوید.

1-مانیفست (Manifest)

مانیفست (Manifest) ، یک ایل JSON است که عناصر برنامه PWA را تعریف می‌کند. این فایل شامل موارد زیر است:

نام برنامه آیکون برنامه طراحی ناوبری و عناصری برای هدر یا فوتر طراحی splash screen متادیتاهای دیگر

2-Service Workers

می‌خواهید بدانید که Service Workers چه نقشی دارند؟ در حقیقت این Service Workers به وب اپلیکیشن پیشرونده قدرتی بیشتر از تجربه وب استاندارد را می دهند.

Service Workers از طریق فایل‌های JavaScript پیکره‌بندی می‌شوند. آن‌ها این امکان را فراهم می‌کنند که اجرای برنامه شما سریع و کارآمد باشد.همچنین، تفاوتی نمی‌کند که کاربران شما آنلاین یا آفلاین باشد، آن‌ها همیشه می‌توانند به مطلبتان دسترسی داشته باشند. چرا که Service Workers دقیقاً مانند پروکسی‌های حافظه پنهان عمل می‌کنند.برای ساخت وب اپلیکیشن پیشرو گزینه‌های مختلفی دارید. اولین گزینه این است که از اسناد توسعه‌داده شده توسط گوگل استفاده کنید و PWA خودتان را بنویسید.

اگر آمادگی لازم برای انجام این کار را ندارید و ترجیح می‌دهد انرژی‌تان را صرف انجام کارهای مهم‌تر کنید، می‌توانید از ابزارهایی مانند پلتفرم طراحی وب Duda استفاده کرده و به آسانی وب سایت خودتان را به progressive web app تبدیل کنید.

 

 

تنها با یک کلیک می‌توانید فیچرها یا ویژگی‌ها را فعال کرده و با مقداری تغییر آن‌ها را به نحوی که دوست دارید پیکره‌بندی کنید. تفاوت Progressive Web App با یک وب سایت در چیست؟

در گزارش دیجیتال موبایل اَپ comScore در سال 2017 می‌بینید که کاربران موبایل بیشتر زمانشان را با اَپ هایی که در موبایلشان دارند سپری می‌کنند نه با وب سایت‌های مبتنی بر مرورگر.

 

دلایل خوب و موجهی وجود دارد که چرا کاربران تلفن همراه، تجربه اَپ را نسبت به استفاده از مرورگرهای اصلی ترجیح می‌دهند.وب اپلیکیشن پیشرو این امکان را برای کاربران فراهم می‌کند که بدون نیاز به دانلود برنامه از app store بتوانند از آن استفاده کنند. در حقیقت PWA الزام کاربران را به دانلود و نصب برنامه‌ها برای استفاده برطرف می‌کند.

وب اپلیکیشن های پیشرونده انتخاب بهتری نسبت به وب موبایل‌ها هستند چون:

وب اپلیکیشن پیشرو طراحی جذاب‌تری دارد و ابزارها و عناصر را راحت‌تر می‌توان در آن پیدا کرد. کاربران آیکون برنامه شما را به Home Screen خودشان اضافه می‌کنند. این باعث می‌شود که آیکونی که دارید بیشتر دیده شود و کاربران بیشتر با برنامه درگیر شوند و از آن استفاده کنند. مرورگرهای اندروید به صورت اتوماتیک کاربران را وادار به نصب PWA در صفحه Home Screen خودشان می‌کنند؛ که این فاکتور راحتی نصب و استفاده را افزایش می‌دهد. PWA ها بارگذاری را به طرز باورنکردنی سرعت می‌بخشند. Service workers قابلیت اطمینان دسترسی به وب اپلیکیشن پیشرو را افزایش می‌دهند. چرا که مستقل از هر نوع اتصالی هستند. PWA ها ویژگی‌های یکپارچه‌ای با تلفن‌های همراه کاربران خواهند داشت. از مهم‌ترین آن‌ها می‌توان به اعلان‌ها یا نوتیفیکیشن¬ها، تماس با یک کلیک و سرویس موقعیت جغرافیایی اشاره کرد. HTTPS برای تمام PWA ها الزامی است. این موضوع باعث می‌شود که PWA ها ذاتاً از وب مطمئن‌تر باشند.

یکی از شرکت‌هایی که تفاوت جدی بین تجربه استفاده از وب موبایل و موبایل اَپ را مورد توجه قرار داد، شرکت Mynet بود.

در بررسی‌های انجام شده توسط این شرکت مشخص شد، در حالی که 85% از ترافیک دریافتی مربوط به وب موبایل است، کاربران بیشتر زمانشان را در موبایل اَپ ها سپری می‌کنند. موقعی که این شرکت نسخه وب اپلیکیشن پیشرو را (با کمک محتوای AMP) راه اندازی کرد، مشاهده شد که بازدید صفحات و زمانی که کاربران در سایت سپری می‌کنند بهبود قابل توجهی داشته است.

تفاوت Progressive Web App و Accelerated Mobile Pages چیست؟

کاربران موبایل چه می‌خواهند؟ سرعت، راحتی و رابط کاربری مناسب. این همان چیزی است که وب اپلیکیشن پیشرو و محتوای AMP به خوبی از پس آن بر می‌آیند. گفته می‌شود که تفاوت واضحی بین دو پلتفرم دوستانه موبایل ایجاد شده توسط گوگل وجود دارد.

AMP (Accelerated Mobile Pages) ، کاربران را درون صفحه مرورگر موبایل نگه می‌دارد. در AMP، افزایش سرعت لود یا بارگیری صفحه با حذف یا بهینه سازی عناصری انجام می‌شود که مایل هستند سرعت لود صفحه را کند کنند. از جمله این موارد می‌توان به این گزینه‌ها اشاره کرد:

Render-blocking JavaScript Bloated CSS فایل‌های سنگین و حجیم اسکریپت‌های خارجی انیمیشن‌های با منابع سنگین

در اصل، AMP تمام عناصر را از Back-end یا سمت سرور برنامه را می‌گیرد و آن را به Front-end چیزی که کاربر می‌بیند تبدیل می‌کند. با این کار عناصر به چیزی تبدیل می‌شوند که سبک¬تر بوده و مدیریت آن ساده‌تر است.بخش‌هایی از تجربه موبایل هستند که سازگاری بیشتری با این موضوع دارند. در حقیقت، AMP برای وب سایت‌های پرمحتوا که خوانایی اهمیت بیشتری نسبت به عملکرد دارد مناسب است.

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

مورد دیگری که می‌خواهیم در اینجا بررسی کنیم، Wego است. در اینجا، AMP با service workers وب اپلیکیشن پیشرو ترکیب شده تا سرعت بارگذاری فوق سریع شود (کمتر از یک ثانیه). این موضوع منجر به افزایش بازدیدهای واقعی کاربران (بیشتر از 12%) و تبدیل کل آن به بیشتر از 95% شد.

Wego با این کار متوجه شد که بارگذاری سریع‌تر صفحات به منزله تعامل (بیشتر از سه برابر) با عناصر کسب درآمد در برنامه است. چه چیزهای یک Progressive Web App با یک برنامه موبایل متفاوت است؟

یک مطالعه محلی در سال 2016 نشان داد که چقدر مشکل است که یک برنامه موبایل ادعا کند که می‌تواند یک موقعیت خاص روی موبایل کاربران داشته باشد.

تفاوت Progressive Web App و Accelerated Mobile Pages چیست

البته بعضی از برنامه‌ها توانسته‌اند ارزش خودشان را به کاربران ثابت کنند و آن‌ها را وادار کرده‌اند که بارها و بارها وارد اَپ شده و با آن سر و کله بزنند.با این گفته ها، نرخ حفظ کاربران توسط اَپ ها به نظر خوب می‌رسد؛ اما این همه ماجرا نیست. به نظرتان چرا کاربران عاشق اَپ های موبایل هستند اما نمی‌توانند به آن‌ها متعهد بمانند؟وقتی یک برنامه موبایل را با یک وب اپلیکیشن پیشرونده مقایسه می‌کنید، می‌توانید تفاوت آشکاری ببینید که چرا وب موبایل‌ها بیشتر و بیشتر به طرف PWA تغییر پیدا می‌کنند. علت این تغییرات را در ادامه آورده‌ایم.

1- هزینه

هزینه طراحی، توسعه و نگهداری یک اپلیکیشن موبایل مهم است. هزینه‌ای که برای ساخت یک PWA نیاز است به مراتب کمتر از اَپ های محلی است. همین موضوع باعث شده که PWA برای تمام شرکت‌ها دسترس پذیرتر باشد.

2- قابلیت جستجو

PWA ها مانند وب سایت‌های معمولی می‌توانند در رتبه بندی جستجو قرار بگیرند. این بدین معنی است که یک شانس بزرگ برای مواجه شدن کاربران با آن‌ها وجود دارد.البته این شانس نسبت به این موضوع سنجیده شده که کاربران مجبور باشند به app store اختصاصی دستگاه¬شان مراجعه کنند و برنامه مد نظرشان را بگیرند.

3- منابع

وب اپلیکیشن پیشرو به لطف service workers ساختارش را انعطاف پذیر نگه می‌دارد و برنامه‌های موبایل به واسطه نیازشان به پهنای باند و فضای ذخیره سازی نمی‌توانند با آن رقابت کنند. گزارش comScore نشان می‌دهد، یکی از دلایلی که کاربران را وادار به حذف یک برنامه می‌کند، فضای مصرفی آن است.

گزارش comScore نشان می‌دهد، یکی از دلایلی که کاربران را وادار به حذف یک برنامه می‌کند، فضای مصرفی آن است.

4- انعطاف پذیری

به طور کلی، برنامه‌های موبایل برای یک دستگاه که روی دستگاه دیگری است ساخته شده‌اند: iOS یا Android؛ بنابراین برای نگهداری یک برنامه باید حداقل دو برابر آنچه تصور می‌کنید کار کنید.اما این موضوع برای PWA ها که هنوز هم در مرورگر زندگی می‌کنند و می‌توانند در فضای خارج از آن‌ها هم وجود داشته باشند، صدق نمی‌کند. در حقیقت، PWA ها با تمام دستگاه‌ها و مرورگرها سازگار هستند.

5- قابلیت به اشتراک گذاری

PWA ها URL هایی دارند که به راحتی می‌توانید آن‌ها را با دیگران به اشتراک بگذارید. در صورتی که برنامه‌های موبایل این امکان را ندارند.

قابلیت به اشتراک گذاری

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

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

همچنین می‌توانید بسیاری از بازی‌های جذاب و برنامه¬های کاربردی را با این روش بسازید. از طرف دیگر، PWAs چنین محدودیت‌های سخت‌گیرانه‌ای را نسبت به مشاغل گوناگون ندارد و به راحتی می‌توانید با آن کار کنید.

سخن آخر

در پایان، شاید این سوال برایتان پیش آمده که کدام یک از این موارد مهم است؟ اگر به دنبال راه بهتری برای تعامل بیشتر با کاربران موبایلتان هستید، گزینه هایی هستند که نباید از دستشان بدهید.

وب موبایل محدودیت زیادی دارد و خارج از مرزهای مرورگر کار نمی‌کند. AMP هم گزینه خوبی برای سایت‌های محتوا محور است، اما چیزی بیشتر از این نیست. برنامه‌های موبایل یک راه حل مناسب برای مدل‌های تجاری خاص هستند، اما هزینه ساخت آن‌ها زیاد است، مدیریت آن‌ها دشوار بوده و راضی کردن کاربران این برنامه ها هم سخت است. progressive web app ، نقاط قوت هر کی از این پلتفرم‌ها را می‌گیرد و از ترکیب آن‌ها، چیزی را می‌سازد که کاربران موبایل می‌خواهند و به آن نیاز دارند. این آینده وب موبایل است.