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

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

برنامه ها پیش رونده وب یا PWA) Progressive Web Apps) چیست؟

?What Is a PWA and Why Should You Care

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

سرویس PWA چیست؟

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

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

شاید این موضوع با ارائه مثالی واضح تر شود. ملموس ترین مثال در این مورد را می توان نرم افزار محبوب واتساپ دانست. وقتی به اینترنت متصل نیستید شما هنوز می توانید برنامه را باز کرده و پیام های قبلی خود را چک کنید و حتی به آن ها پاسخ دهید تا به محض اتصال به اینترنت برای مخاطب مد نظرتان فرستاده شوند. این همان کاری است که PWA در وب اپلیکیشن ها انجام می دهد. PWA امکان اجرای وب اپلیکیشن ها بدون نیاز به اتصال اینترنتی را فراهم می کند. اما این تنها مزیت PWA نیست. فرض کنید سایتی را باز می کنید و در همان لحظه ورود به آن با پیغام  Add to Home Screen مواجه می شوید که از شما می خواهد این سایت را به صفحه اصلی خود اضافه کنید. وقتی با این پیغام موافقت می کنید در واقع وب اپلیکیشن مورد نظر را روی موبایل خود نصب کرده اید.

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

چرا از PWA باید استفاده کنیم؟

برخی ویژگی ها و قابلیت های وب اپلیکیشن های پیش رونده که نیاز به استفاده از آن را توجیه می کنند در ادامه مورد بررسی قرار می دهیم:

• قابلیت اطمینان: با استفاده از PWA، وب اپلیکیشن به سرعت بارگذاری می شود حتی اگر از اینترنتی نسبتا کم سرعت اسفاده می کنید. اهمیت این مساله آنجا مشخص می شود که طبق گزارشی از گوگل، ۵۳ درصد کاربران تنها ۳ ثانیه برای بارگذاری سایت صبر می کنند و در غیر این صورت آن را ترک خواهند کرد. امکان باز شدن برنامه بدون اینترنت هم از دیگر مواردی است که موجب افزایش استقبال از این فناوری می شود.
• سریع: اجرای برنامه در PWA کاملا روان و بدون لگ خواهد بود. این در حالی است که شما قادر به استفاده از انواع گرافیک ها و انیمیشن ها برای زیباتر کردن محیط وب اپلیکیشن نیز خواهید بود.
• واکنش گرا: PWA هم از قابلیت Responsive یا واکنش گرایی صفحات وب که موجب فیت شدن آن ها با اندازه های مختلف صفحه نمایش ها می شود پشتیبانی می کند. 
• قابلیت نصب: اگر می خواهیم وب اپلیکیشن ها را مانند یک نرم افزار بومی گوشی همراه مورد استفاده قرار دهیم پس باید قادر به نصب و دسترسی به آن از طریق صفحه اصلی گوشی خود باشیم. خوشبختانه این امکان توسط PWA فراهم شده است.
• عمل کردن مانند یک برنامه بومی: وب اپلیکیشن های PWA درست مانند نرم افزای که مخصوص کار بر روی گوشی های همراه توسعه داده شده است عمل می کند. برای مثال شما می توانید نوتیفیکیشن هایی را از آن دریافت کنید، به آیکون آن از طریق صفحه اصلی گوشی دسترسی داشته باشید، از آن به صورت تمام صفحه و بدون گزینه های زائدی که در مرورگرها می بنید استفاده کنید و در نهایت اینکه برای استفاده از آنها لزوما نیازمند اتصال به اینترنت نیستید.

چرا فناوری PWA مهم است؟

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

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

شما می توانید مطلب معرفی ۶ تا از بهترین سایت های رایگان ساخت برنامه اندروید و آیفون را نیز در انزل وب مطالعه بفرمایید.

معایب و چالش های برنامه های پیش رونده وب PWA

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

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

کامپوننت ها و فناوری های استفاده شده در PWA

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

کامپوننت Service Worker

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

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

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

فایل Manifest

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

پروتکل امن HTTPS

Service Worker قادر به رهگیری درخواست های شبکه و نیز مدیریت پاسخ هایی که به آن ها داده میشود می باشد. ولی همه این کارها را در واقع در سمت کلاینت انجام میدهد. بنابراین PWA از پروتکل امن HTTPS برای ارتباط با سرور و ارسال یا دریافت اطلاعات در بستر شبکه استفاده می کند.

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

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

ابزار بررسی وبسایت Lighthouse

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

Workbox کتابخانه توسعه PWA

Workbox مجموعه ای از کتابخانه های متن باز فراهم شده توسط گوگل است که برای تولید فایل های Service Worker در ایجاد وب سایت PWA به کار می روند. همچنین در این ابزار می توانید استراتژی های مختلف کش کردن تصاویر و دیگر منابع وب اپلیکیشن را مورد استفاده قرار دهید.

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

نظرات و پیشنهادات شما؟

امروز در انزل وب در مورد آشنایی با کاربرد و مزایا سرویس PWA صحبت کردیم. آیا تا بحال از این برنامه ها استفاده کرده اید؟ اگر در این رابطه نظر و یا پیشنهادی دارید می توانید در بخش دیدگاه زیر با ما در میان بگذارید.