PWA یا برنامه پیش رونده چیست و چرا باید به آن توجه کنید؟
در چند سال گذشته رشد تعداد کاربران تلفن همراه افزایش یافته است. امروزه بیش از 60 درصد کل استفاده از اینترنت، از طریق تلفن همراه اتفاق می افتد. بدیهی است که این رشد به دلایلی همچون قابلیت حمل آسان، سخت افزار ارزان، دسترسی آسان به اینترنت و افزایش تعداد خدمات در اینترنت اتفاق افتاده است.
با توجه به اینکه کاربران بیشتری از تلفن همراه استفاده میکنند، بهینه سازی تجربه کاربری برای گوشی های موبایل به یک ضرورت تبدیل شده است.
برای شرکت های کوچکتر که اغلب برنامه های بومی را به دلیل محدودیت زمان و هزینه ندارند، برنامه های وب فرصتی کلیدی است که می تواند با ارائه بهترین تجربه ممکن، مشتریان آنها را حفظ کند.
حتی اگر شرکت ها دارای برنامه های مرسوم تلفن همراه اختصاصی باشند، احتمال دارد بعضی از کاربران همچنان نسخه وب آن را ترجیح دهند تا از دانلود و نصب به علت محدودیت سخت افزار و حافظه یا برخی دیگر از اولویت های شخصی خود اجتناب کنند.
امروزه انتظارات مختلف از وب سایت های ما بسیار بالا است. تقریبا 25 سال پیش زمانی که وبسایت ها اختراع شدند، هدف اصلی آن ها عمدتا به اشتراک گذاشتن اطلاعات بود. امروز یک وب سایت به فروشگاهی برای فروش مواد غذایی، شبکه اجتماعی، جایی برای چت کردن و ... تبدیل شده است.
حتی انتظار می رود وبسایت ها خانه ها را جستجو کنند و نقشه جهان را در خود نگه دارند. در دروه کنونی یک وبسایت میتواند تمام ویژگی های نرم افزاهایی همچون پاورپوینت و اکسل را ارائه دهد.
با برنامه های وب پیش رونده (progressive) آشنا شوید
بیایید مثالی از یک نرم افزار گوشی تلفن همراه بیان کنیم. نرم افزار Whatsapp را در نظر بگیرید. وقتی اینترنت متصل نیست، هنوز می توانید این برنامه را باز کنید، پیام های گذشته را چک کنید و حتی به دوستان خود پاسخ دهید. هنگامی که اتصال اینترنتی تلفن برقرار می شود، پیام ها به صورت خودکار ارسال می شوند.
این چیزی است که PWA(برنامه پیش رونده) وعده داده در برنامه های وب ارائه دهد. PWA برنامه های وب را قادر می سازد ،وقتی که هیچ شبکه ی اینترنتی وجود ندارد، در پس زمینه همگام سازی وجود داشته باشد و با یکپارچگی کارها را انجام دهد این در حالی است که یک تجربه بومی را نیز به کاربران خود را ارائه می دهد.
چرا ما به PWA ها نیاز داریم و ویژگی های آنها چیست؟
بیایید در مورد برخی از مشخصه های اصلی که در برنامه های کاربردی وب معمولی وجود ندارند و در برنامه های پیش رونده ارائه میشوند صحبت کنیم :
قابلیت اطمینان
در زمان بارگیری برنامه باید سریع باشد، سرعت بارگیری باید در حد یک لحظه باشد همچنین باید زمانی که تلفن شما به اینترنت متصل نیست و یا سرعت اینترنت پایین است برنامه شما باز شود. گوگل در آخرین بررسی خود متوجه شد که 53 درصد از کاربران، اگر بارگذاری صفحه بیش از 3 ثانیه طول بکشد از وب سایت خارج می شوند.
سریع
انتقال و پیمایش در بین صفحات برنامه باید نرم و در عین حال سریع باشد. هر کسی از پیمایش کند و سخت متنفر است.
واکنش گرا
برنامه باید در تمام اندازه های مختلف دستگاه ها قابل استفاده باشد. برنامه وب باید مانند مایعی باشد که وقتی داخل ظرفی ریخته میشود تمام فضای ظرف را در بر میگیرد.
قابل نصب
اگر ما میخواهیم برنامه های وب را به برنامه های مرسوم نزدیکتر کنیم، باید قابلیت نصب برای آنها به وجود آوریم. میانبری از برنامه باید در صفحه اصلی همراه با سایر برنامههای بومی دیگر وجود داشته باشد، به طوری که کاربر بتواند با یک کلیک به PWA مورد نظر دسترسی پیدا کند.
Splash Screen
Splash Screen تصویری است که هنگام بارگذاری یک برنامه یا بازی ظاهر میشود. این باعث می شود PWA بیشتر شبیه به یک برنامه بومی به نظر برسد.
قابلیت در گیر کردن
برنامه باید کاربران را درگیر کند. یک PWA دارای ویژگی هایی مانند آگاه کردن از طریق اعلان ها، آیکونی در صفحه، قابلیت باز شدن زمانی که شبکه وجود ندارد و ... است که کاربران را به خود مشغول میکند.
تمام ویژگی های فوق در برنامه های PWA ممکن است. PWA فقط یک برنامه وب معمولی است که به تجربه کاربری توجه ویژه ای کرده است.
PWA و فریمورک های مدرن رابط کاربری
بعضی از مردم فکر می کنند که یک PWA همراه با فریمورک های مدرن رابط کاربری مانند ReactJs، Angular 6 یا Vue.js ارائه میشود. خوب، نه لزوما . PWA هیچ ارتباطی با فریمورک هایی که استفاده می کنید ندارد و فقط به کامپوننت های مشخصی نیاز دارد.
PWA چگونه وب سایت ها را به صورت آفلاین در دسترس قرار میدهد؟
این دقیقا اولین سوال من در مورد PWA بود. چگونه دقیقا می توان برنامه های وب را بدون اینترنت را باز کرد؟ همه ما می دانیم که برنامه های بومی می توانند بدون اتصال به اینترنت باز شوند، زیرا وقتی آنها را دانلود و نصب می کنیم، منابع حیاتی آنها مانند اجزای رابط کاربری و برخی اطلاعات دیگر آنها در دستگاه تلفن ذخیره می شوند .... خوب، این دقیقا همان چیزی است که در PWA اتفاق می افتد .
PWA فایل های HTML، فایل های CSS و تصاویر را در حافظه پنهان مرورگر ذخیره می کند و توسعه دهندگان می توانند به طور کامل ارتباطات شبکه را کنترل کنند. همه اینها توسط Service Worker قابل دسترسی است.
کاپوننت های تکنیکی PWA کدامند؟
PWA دارای برخی کامپوننت های مهم فنی است که با هم کار می کنند و به برنامه وب به طور منظم انرژی می دهد. کامپوننت های زیر برای ایجاد یک برنامه PWA خوب مورد نیاز است.
اجازه دهید دیدی کلی از هر یک از آنها را بدست آوریم :
1.Service Worker
برنامه های وب ما به طور مستقیم با شبکه اینترنت ارتباط برقرار میکنند و اگر شبکه ای وجود نداشته باشد، صفحه دایناسور معروف را نشان داده میشود.
در اینجا فرصتی برای بهینه سازی این روند وجود دارد. برای اولین بار، Service Worker منابع مورد نیاز را در حافظه پنهان مرورگر ذخیره می کند و هنگامی که کاربر برای بار بعدی برنامه را باز میکند، Service Worker حافظه کش را بررسی می کند و حتی قبل از اینکه متصل بودن اینترنت را چک کند به کاربر پاسخ میدهد.
یک Service Worker فقط کامپوننتی از کد های جاوا اسکریپت است که به عنوان یک پروکسی بین مرورگر و شبکه عمل می کند. یک Service Worker به ایجاد یک برنامه آفلاین با استفاده از API حافظه پنهان مرورگر کمک می کند.
Service Worker می تواند عملکرد و کارایی برنامه شما را بهبود ببخشد، هر چند دستگاه شما به اینترنت متصل باشد و یا نه. یک توسعه دهنده باید کنترل کاملی بر رفتار برنامه و نحوه پاسخ گویی آن در سناریوهای مختلف داشته باشد. service worker چرخه رویداد مربوط به خود را دارد. هنگامی که فرایند کش کامل میشود برنامه شما برای بازید آفلاین آماده است.
2. فایل مانیفست
فایل مانیفست یک فایل config از جنس JSON است که حاوی اطلاعات برنامه اعم از آیکون نمایش در صفحه اصلی، نام کوتاه برنامه، رنگ پس زمینه یا تم و .. است. نمونه ای از این فایل در زیر آمده است :
{
"short_name": "Spinner",
"name": "Fidget spinner",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/home/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/home/",
"theme_color": "#3367D6"
}میتوانید فایل های مانیفست را در عمل در تصاویر زیر مشاهده کنید :
3.HTTPS
Service workers قادر به رد درخواست های شبکه هستند و می توانند پاسخ ها را تغییر دهند. Service workers تمام اقدامات را در طرف مشتری انجام می دهند. از این رو، PWA نیاز به پروتکل HTTPS دارد.
بررسی یک برنامه PWA
امروزه PWA های زیادی وجود دارد که در دسترس هستند. اگر میخواهید با PWA ها کار کنید و عملکرد Service workers را در عمل ببینید، از سایت fidgetspin.xyz بازدید کرده و به محیط توسعه دهندگان در مرورگر کروم بروید.
Status : به ما می گوید که service worker فعال و یا غیر فعال است.
آفلاین : با تیک زدن این گزینه، کروم برنامه را در صورتی که آفلاین است، پردازش می کند. برنامه را ریفرش کرده و مشاهده کنید کخ چگونه PWA وقتی شبکه ای وجود ندارد به شما جواب خواهد داد.
Cache : این بخش نشان می دهد که همه فایل ها در حافظه پنهان توسط service worker ذخیره می شوند.
نتیجه
برنامه های پیش رونده کمک بزرگی به ما توسعه دهندگان هستند زیرا یک تجربه کاربری بهتر را برای کاربران فراهم می آورند. امیدوارم این مقاله شما را ترغیب به یادگیری آنها کند.
