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

اولین سردرگمی در اولین قدم های یادگیری برنامه نویسی، هدفی است که آموزنده دنبال آن می گردد؛ او از خود می پرسد که در سال 2019، اپلیکیشن چیست و دسترسی به آن چگونه اتفاق می افتد؟ او نمی داند برای یادگیری برنامه نویسی پلتفرم های موبایل یا کامپیوتر چه زبان برنامه نویسی را بیاموزد و سپس چگونه آن را عرضه کند و همین سوالات فراوان که تنها گوشه ای از آن را بیان کردیم، باعث سردرگمی حین یادگیری، اجرا و در نهایت عرضه و بازاریابی مناسب می شود. در این پست قصد داریم تا نسل نوینی از اپلیکیشن ها با قابلیت کاربری در هر پلتفرم را معرفی کنیم تا اگر در ابتدای راه یادگیری برنامه نویسی هستید، انتخابی متناسب با بازار روز این صنعت را داشته باشید.

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

وب اپلیکیشن پیشرو که نام اصلی اش Progressive Web Apps می باشد، در اصل خدمات نرم افزاری مبتنی بر پلتفرم وب است. به شکل دیگر می توان گفت پیش از این بسیاری از نیاز های روزمره ی کاربران به واسطه ی نصب اپلیکیشن های سنگین در موبایل و کامپیوتر برطرف می شد و امروز به سادگی با ورود به یک وب سایت می توانید همان سرویس نرم افزاری را بدون نیاز به دانلود فایل های لازم برای اجرا و نصب با همان کیفیت مورد استفاده قرار دهید.

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

ضمنا PWA ها صاحب میراث نسل های پیشین وب سایت ها هستند و از رابط کاربری واکنش گرا و عیناً اپلیکیشن های بومی هر سیستم عامل پشتیبانی می کنند.

https://tilesoft.ir/2019/09/23/pwa-%db%8c%d8%a7-%d9%88%d8%a8-%d8%a7%d9%be%d9%84%db%8c%da%a9%db%8c%d8%b4%d9%86-%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%88-%da%86%db%8c%d8%b3%d8%aa%d8%9f/
pwhttps://tilesoft.ir/2019/09/23/pwa-%db%8c%d8%a7-%d9%88%d8%a8-%d8%a7%d9%be%d9%84%db%8c%da%a9%db%8c%d8%b4%d9%86-%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%88-%da%86%db%8c%d8%b3%d8%aa%d8%9f/


نحوه ی دسترسی و کاربری وب اپلیکیشن پیشرو

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

همچنین در مرورگر های موبایل نیز (اندروید و iOS) گزینه ی Add to home screen نمایش داده خواهد شد که با فشردن کلید Add، دسترسی به وب اپلیکیشن پیشرو در موبایل نیز مانند دیگر اپلیکیشن ها خواهد بود.

ویژگی ها و مزایای Progressive Web Apps

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

سرعت اجرای بالا: با توجه به عدم نیاز به منابع نرم افزاری و سخت افزاری کامپیوتر یا موبایل کاربر و پیاده سازی PWA بر روی هاست و یا سرور های مجازی، سرعت اجرای اولیه و عملی سازی فرامین کاربر در کمترین زمان اجرا می شود که البته پارامتر سرعت اینترنت کاربر را نباید فراموش کرد.

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

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

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

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

ایمن بودن: یکی از پارامتر های مهم وب اپلیکیشن های پیشرو، داشتن مجوز SSL است؛ بنابراین کاربران با خیال راحت می توانند از وب اپلیکیشن های پیشرو استفاده نمایند.

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

PWA در مقایسه با اپلیکیشن های بومی اندروید، iOS و ویندوز

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

علاوه براین اپلیکیشن های بومی که برای هر سیستم عامل طراحی می شود، بسته به منابع نرم افراری به کارگرفته شده، ممکن است تنها کاربران آخرین نسخه از آن سیستم عامل مانند اندروید، iOS و ویندوز را شامل شود و برروی نسخه های قدیمی تر آن ها مورد استفاده نباشد. موارد گفته شده تنها گوشه ای از ویژگی های ذاتی یک اپلیکیشن بومی یا سنتی است.

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

PWA در مقابل UWP

UWP یا اپلیکیشن های یونیورسال، پلتفرم اختصاصی مایکروسافت برای ویندوز های مدرن خود است که این رویه از ویندوز 8 شروع شد در ویندوز 10 به بلوغ خود رسید. در پلتفرم UWP، اپلیکیشن ها از ویژگی های مشابه وب اپلیکیشن های پیشرو برخوردار هستند یعنی از رابط کاربری واکنش گرا یا رسپانسیو، استفاده ی مولتی پلتفرم، دسترسی از طریق یک فروشگاه نرم افزاری واحد، سرعت اجرای بالا و… بهره می برند. برای درک بهتر و شناخت بیشتر از این پلتفرم، باید گفت که اگر شما هم اکنون بر روی ویندوز 10 پیاده هستید، مرورگر اج، موزیک پلیر، ماشین حساب و دیگر اپلیکیشن های پیشفرض این سیستم عامل دقیقا بر روی این پلتفرم اجرا می شوند و با تغییر ابعاد پنجره شان شاهد تغییر چیدمان عناصر نرم افزاری خواهید شد.

با تلاش های بی وقفه ی مایکروسافت برای فراگیر تر کردن توسعه ی اپلیکیشن های مبتنی بر پلتفرم یونیورسال توسط توسعه دهندگان شخص ثالث و عرضه ی نسخه های بهینه تر ویندوز 10 بر این مبنا مانند Windows 10s، اما به دلایل زیادی هنوز هم پلتفرم سنتی مایکروسافت یعنی اپلیکیشن ها با پسوند exe. هنوز هم پرطرفدارتر هستند. تلاش های مایکروسافت برای گسترش کاربران پلتفرم یونیورسال تا جایی ادامه می یابد که امکان به کارگیری وب اپلیکیشن های پیشرو در قالب فایل های نصبی APPX و اپلیکیشن های یونیورسال را هم فراهم کرده است!

از جمله دلایل شکست پلتفرم UWP و فراگیر نشدن آن طی این چند سال، باید به انحصار این ساختار به آخرین نسخه های ویندوز 10، عملکرد بهتر آن ها تنها بر روی معماری ARM، محدودیت عملکرد نرم افزاری با توجه به زبان های برنامه نویسی به کارگرفته شده نسبت به پلتفرم سنتی تر ویندوز، محدودیت دسترسی برای نصب و اشتراک گذاری به دلیل فروشگاه نرم افزاری اختصاصی و… اشاره کرد.

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

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

PWA یک پلتفرم آزاد است که ارمغان گوگل برای تمام کاربران تمام پلتفرم هاست در حالی که UWP یک نوآوری خلاقانه است که تنها در دستان کاربران ویندوز 10 جا می گیرد.

مقدمات ساخت یک وب اپلیکیشن پیشرو

اگر یک برنامه نویس کاملا مسلط به توزیع های جاوا اسکریپت هستید، به سادگی می توانید یک اپلیکیشن مبتنی بر وب را طراحی کنید البته برنامه نویس های PHP نیز در این جایگاه بسیار گران قیمت هستند.

اما پس از طراحی یک اپلیکیشن مبتنی بر وب کار شما به پایان نمی رسد و کاربرتان نمی تواند آن را در کامپیوتر یا گوشی خود نصب کند! در اینجا به دو کار دیگر نیاز خواهید داشت.

1- فایل Manifest.json: این فایل در اصل مشخصات کلی یک وب اپلیکیشن پیشرو پس از نصب را تعیین می کند؛ شامل آیکون پیش نمایش، نحوه ی نمایش در مرورگر، صفحه ی وبی که پس از نصب نمایش داده می شود و… می شود.

{
&quotshort_name&quot: &quotMaps&quot,
&quotname&quot: &quotGoogle Maps&quot,
&quoticons&quot: [
{
&quotsrc&quot: &quot/images/icons-192.png&quot,
&quottype&quot: &quotimage/png&quot,
&quotsizes&quot: &quot192x192&quot
},
{
&quotsrc&quot: &quot/images/icons-512.png&quot,
&quottype&quot: &quotimage/png&quot,
&quotsizes&quot: &quot512x512&quot
}
],
&quotstart_url&quot: &quot/maps/?source=pwa&quot,
&quotbackground_color&quot: &quot#3367D6&quot,
&quotdisplay&quot: &quotstandalone&quot,
&quotscope&quot: &quot/maps/&quot,
&quottheme_color&quot: &quot#3367D6&quot
}

2- ایجاد یک Service Worker: فایل Service-Worker.js در اصل رویه ی افزودن وب اپلیکیشن به صورت یک فایل اجرایی به دستگاه کاربر را اجرایی می سازد؛ در نسخه ی موبایل اعلان افزودن به صفحه ی خانگی یا Add to home screen نمایش داده می شود و در نسخه ی دسکتاپ، کلید Install فعال می شود.

self.addEventListener('install', function(event) {
// Perform install steps
});

سپس کافیست در صفحه ی اصلی وب اپلیکیشن پیشروی خود یعنی index.html، دو دستور زیر را برای برقراری ارتباط بین فایل های Service-Worker.js و Manifest.json با صفحه ی اصلی سایت، بیافزایید:

<link rel=&quotmanifest&quot href=&quot/manifest.json&quot>


if ('serviceWorker' in navigator) {
console.log(&quotWill the service worker register?&quot);
navigator.serviceWorker.register('service-worker.js')
.then(function(reg){
console.log(&quotYes, it did.&quot);
}).catch(function(err) {
console.log(&quotNo it didn't. This happened:&quot, err)
});
}

نکته: توجه داشته باشید که برای عملی سازی و ایجاد دسترسی عمومی به یک وب اپلیکییشن پیشرو، حتما به یک هاست و دامین نیازمند هستید و علاوه بر آن، داشتن مجوز های امن SSL نیز همانطور که گفته شد، یکی از مهم ترین پارامتر های پلتفرم PWA می باشد.

در انتها

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

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


این مطلب را در سایت تیله سافت بخوانید!