تکنولوژی PWA یک تکنولوژی فوق العاده و کاربردیه که اجازه میده اپیکیشن ما تو دیوایس های مختلف قابلیت نصب و استفاده داشته باشه. PWA در ری اکت هم قابل استفادس! یعنی ما میتونیم اپیکیشن های ری اکت خودمون رو PWA کنیم تا اپیکیشن ما علاوه بر وب، تو دیوایس های مختلف ( ویندوز ، اندروید ، IOS و .. ) بصورت یک اپیکیشن قابل نصب و استفاده باشه ? تو ادامه این مقاله به آموزش pwa در react میپردازیم.
اپیکیشن های PWA میتونن حتی بدون اینترنت ( Offline ) اجرا بشن و صفحه معرفی و اعلانات ( notifications ) داشته باشن.
با فِرانت اندی همراه باشید تا PWA در ریکت رو بررسی کنیم و ببینیم چطور میشه یک اپیکیشن ری اکت رو PWA کرد ..
اما قبل از اینکه بریم سراغ PWA در ری اکت، اجازه بدید یه مروری بکنیم تا ببینیم اصلا خود PWA چیه و چه کاربرد و مزایایی داره.
درواقع PWA مخفف عبارت Progressive Web App هست. این عبارت یعنی اپیکیشن تحت وب پیشرفته!
اپیکیشن های PWA با تکنولوژی و پترن هایی توسعه پیدا کردن که قابلیت استفاده در محیط وب و محیط های بومی ( اندروید ، IOS ، ویندوز و .. ) رو داشته باشن.
ما میتونیم اپیکیشن های PWA رو روی دستگاه های اندروید ، IOS ، ویندوز و .. بصورت یک اپیکیشن بومی نصب یا حذف کنیم. میانبر اپیکیشن PWA ما مثل سایر نرم افزار های نصب شده، روی دیوایس ما نمایش داده میشه و با کلیک روی اپیکیشن، PWA ما اجرا میشه.
اپیکیشن های PWA ما میتونن توی مارکت های مختلف نرم افزار مثل کافه بازار ، مایکت و گوگل پلی استور ( برای اندروید ) مایکروسافت استور (برای ویندوز ) و .. در دسترس کاربران قرار بگیرن.
اپیکیشن های PWA چندین مزیت برای ما دارن ..
بریم ببینیم مزایای PWA چیه ؟
یک کسب و کار رو در نظر بگیریم که تازه شروع به کار کرده و نیاز به 4 اپیکیشن داره :
این یعنی اون کسب و کار به 4 پروژه نیاز داره و باید هزینه خیلی زیادی رو برای این 4 پروژه در نظر بگیره. اما یک راه حل وجود داره تا اون کسب و کار بتونه پول کمتری صرف کنه تا این 4 اپیکیشن رو داشته باشه!
تکنولوژی PWA به ما کمک میکنه تا بتونیم علاوه بر داشتن اپیکیشن تحت وب ( سایت ) اپیکیشن اندروید ، IOS و حتی ویندوز هم داشته باشیم. یعنی ما اپیکیشن هایی داریم که بصورت یک نرم افزار روی اندروید، IOS و ویندوز نصب میشن و حتی در مارکت ها میتونن منتشر بشن ( Google play , microsoft store , بازار ، مایکت و .. )
درسته ? ما میتونیم از PWA در ری اکت استفاده کنیم. ادامه این مقاله رو با موضوع آموزش pwa در ری اکت جلو میبریم ..
این یعنی اپیکیشن هایی که با کتابخانه ری اکت توسعه میدیم، میتونن PWA باشن و علاوه بر وب، روی سیستم عامل های مختلف مثل اندروید، IOS و ویندوز بصورت اپیکیشن بومی نصب بشن.
کتابخانه ری اکت بصورت کامل از تکنولوژی PWA پشتیبانی میکنه.
تو ادامه این مقاله میخوایم آموزش ساخت اپیکیشن PWA با ری اکت رو بررسی کنیم. چون میتونیم با یکبار نوشتن اپیکیشن ری اکتی، اپیکشن خودمون رو در محیط ها و سیستم عامل های مختلف بصورت اپیکیشن بومی نصب و اجرا کنیم.
ما PWA در ریکت رو به کمک تایپ اسکریپت بررسی میکنیم. اگه با تایپ اسکریپت در ریکت آشنا نیستید لطفا مقاله تایپ اسکریپت در ری اکت رو مطالعه کنید.
برای ساخت اپیکیشن PWA با ری اکت، دستور زیر رو تو ترمینال اجرا میکنیم تا پروژه ما ایجاد بشه :
npx create-react-app pwa-react-typescript --template cra-template-pwa-typescript
دستور بالا برای ما یک پروژه ری اکت و تایپ اسکریپت ایجاد میکنه که از PWA ( Progressive Web Application ) پشتیبانی میکنه ?
اگه به فایلهای پروژه خودمون دقت کنیم، میبینیم که چندین فایل اضافه شده. بریم ببینیم این فایلها چی هستن:
این فایل شامل اسکریپتی هست که در پشت صحنه اجرا میشه ( در زمان اجرای اپیکیشن ) این اسکریپت کمک میکنه تا اپیکیشن ما بصورت آفلاین اجرا بشه و بتونیم چندین Request رو بصورت همزمان تو اپیکیشن پشتیبانی کنیم.
این فایل شامل اطلاعات اپیکیشن ما هست که در نهایت به مرورگر تحویل داده میشه. مثل نام اپیکیشن، لوگوی اپیکیشن و ..
این فایل مشخص میکند که service-worker ما register شده است یا خیر.
بعد از ایجاد و نصب پکیج های بالا، دستور زیر رو اجرا میکنیم تا پروژه ما Start بشه و بتونیم خروجی رو در مرورگر ببینیم:
cd pwa-react-typescript yarn start
درسته! یکی از ویژگی های خفن PWA این هست که به ما اجازه میده بدون توجه به وضعیت شبکه کاربر ( آفلاین بودن یا ضعیف بودن اینترنت کاربر ) سایت رو بهش نمایش بدیم.
تمامی فایلهای مورد نیاز وبسایت ( assets ) تو مرورگر کاربر کَش ( Cash ) میشن. زمانیکه کاربر بدون اینترنت اپیکیشن مارو باز میکنه، سایت ما کامل بهش نمایش داده میشه.
حتی زمانیکه کاربر اینترنت ضعیفی داره، بدون مشکل میتونه سایت و بخش های مختلف اون رو ببینه.
زمانیکه اینترنت کاربر وصل شد یا سرعتش خوب شد، اطلاعات جدید سایت در پشت صحنه دریافت میشه و سایت آپدیت میشه.
این ویژگی فوق العادس چون کمک میکنه کاربر های ما همیشه بتونن به سایت و اپیکیشن ما دسترسی داشته باشن.
حالا بریم که ویژگی نمایش آفلاین وب اپیکیشن PWA در ری اکت رو فعال کنیم ..
اگه فایل index.tsx که در روت پروژه قرار گرفته رو باز کنیم، با کد های زیر مواجه میشیم:
// If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();
همونطور که در خط 1 و 2 بصورت کامنت توضیح داده شده، اگه مقدار unregistered در خط 4 رو با عبارت register تغییر بدیم، اپیکیشن PWA ما بصورت آفلاین و با سرعت بیشتری اجرا میشه.
انجام اینکار باعث میشه یک فایل سرویس وورکر ( service worker ) برای ما ساخته بشه. این Service Worker در PWA وظیفه کش کردن اطلاعات و فایلهای سایت و بروزرسانی اون اطلاعات در زمان اتصال به شبکه رو بر عهده داره.
این سرویس وورکر وظیفه پیاده سازی استراتژی cache-first رو برعهده داره.
اگه بخوایم یکم تخصصی تر این موضوع رو بررسی کنیم، باید به این نکته اشاره کنیم که PWA در ریکت به کمک Workbox پیاده سازی میشه. حالا شاید برامون سوال پیش بیاد که workbox چیست ؟
درواقع workbox در PWA مجموعه ای از ابزار ها، امکانات و ماژول هایی هست که وظیفه کش کردن Assets ها و ارائه یکسری امکانات برای ساختن اپیکیشن PWA رو در اختیار ما میزاره.
در واقع پیاده سازی PWA بصورت اختصاصی کار خیلی سخت، پیچیده و زمانبری هست. تیم گوگل برای رفع این مشکل و پیچیدگی Workbox رو ارائه کرد تا دیگه نیاز نباشه هر شخص PWA رو خودش بسازه.
خود Workbox تو PWA برای ما پیکربندی و تنظیمات پیشفرض رو اعمال میکنه، اما ممکنه ما کارمون با تنظیمات پیشفرض راه نیوفته، در چنین شرایطی باید چیکار کنیم ؟!
تو ادامه در موردش بیشتر صحبت میکنیم ..
زمانیکه ما یک اپیکیشن PWA میسازیم، قابلیت نصب بصورت یک اپیکیشن بومی روی سیستم عامل های اندروید، IOS ، ویندوز ، مک و .. رو داره. همونطور که میدونیم زمانیکه یک اپیکیشن رو نصب میکنیم، یک اسم و لوگو داره.
همچنین اپیکیشن های PWA یک صفحه آغازین دارن. یعنی زمانیکه اپیکیشن PWA نصب شده رو اجرا میکنیم، یک صفحه معرفی به کاربر نمایش داده میشه. تو این صفحه میتونیم هرچیزی قرار بدیم.
میتونیم یکسری توضیحات یا لوگوی اپیکیشن خودمون رو داخلش قرار بدیم.
تو تصویر های زیر، این موارد مشخص هستن:
لوگو و نام اپیکیشن های PWA که باید مقدار دهی بشن - اپیکیشن PWA اسنپ فود
صفحه معرفی اپیکیشن های PWA که هنگام اجرای اپیکیشن نمایش داده میشن. اپیکیشن PWA اسنپ فود
مواردی که تو دو تصویر بالا مشخص کردیم، باید سفارشی سازی بشن و اطلاعات اختصاصی خودمون رو داخلشون قرار بدیم.
برای مشخص کردن موارد بالا، درصورتیکه از PWA در React استفاده میکنیم باید بصورت زیر عمل کنیم ..
لطفا برای مطالعه ادامه این مقاله در وبسایت فِرانت اِندی روی لینک زیر کلیک کنید:
