ویرگول
ورودثبت نام
فرانت اندی | FrontEndi
فرانت اندی | FrontEndi
خواندن ۷ دقیقه·۸ ماه پیش

تکنولوژی PWA در ری اکت چیست و چطور میشه یک اپیکیشن PWA در ریکت ساخت ؟!

تکنولوژی PWA یک تکنولوژی فوق العاده و کاربردیه که اجازه میده اپیکیشن ما تو دیوایس های مختلف قابلیت نصب و استفاده داشته باشه. PWA در ری اکت هم قابل استفادس! یعنی ما میتونیم اپیکیشن های ری اکت خودمون رو PWA کنیم تا اپیکیشن ما علاوه بر وب، تو دیوایس های مختلف ( ویندوز ، اندروید ، IOS و .. ) بصورت یک اپیکیشن قابل نصب و استفاده باشه ? تو ادامه این مقاله به آموزش pwa در react میپردازیم.

اپیکیشن های PWA میتونن حتی بدون اینترنت ( Offline ) اجرا بشن و صفحه معرفی و اعلانات ( notifications ) داشته باشن.

با فِرانت اندی همراه باشید تا PWA در ریکت رو بررسی کنیم و ببینیم چطور میشه یک اپیکیشن ری اکت رو PWA کرد ..

اما قبل از اینکه بریم سراغ PWA در ری اکت، اجازه بدید یه مروری بکنیم تا ببینیم اصلا خود PWA چیه و چه کاربرد و مزایایی داره.

تکنولوژی PWA چیست ؟

درواقع PWA مخفف عبارت Progressive Web App هست. این عبارت یعنی اپیکیشن تحت وب پیشرفته!

اپیکیشن های PWA با تکنولوژی و پترن هایی توسعه پیدا کردن که قابلیت استفاده در محیط وب و محیط های بومی ( اندروید ، IOS ، ویندوز و .. ) رو داشته باشن.

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

اپیکیشن های PWA ما میتونن توی مارکت های مختلف نرم افزار مثل کافه بازار ، مایکت و گوگل پلی استور ( برای اندروید ) مایکروسافت استور (برای ویندوز ) و .. در دسترس کاربران قرار بگیرن.

اپیکیشن های PWA چندین مزیت برای ما دارن ..

مزایای PWA چیست ؟

بریم ببینیم مزایای PWA چیه ؟

  1. پرفورمنس عالی ( Performance )
  2. قابلیت استفاده بدون اینترنت ( آفلاین )
  3. قابلیت استفاده در تمامی پلتفرم ها و سیستم عامل ها
  4. قابلیت نصب ( قابل install و uninstall روی دستگاه های مختلف )

صرفه جویی در هزینه با PWA !

یک کسب و کار رو در نظر بگیریم که تازه شروع به کار کرده و نیاز به 4 اپیکیشن داره :

  1. اپیکیشن تحت وب ( سایت )
  2. اپیکیشن اندروید ( Android )
  3. اپیکیشن آیفون ( IOS )
  4. اپیکیشن ویندوز ( Windows )

این یعنی اون کسب و کار به 4 پروژه نیاز داره و باید هزینه خیلی زیادی رو برای این 4 پروژه در نظر بگیره. اما یک راه حل وجود داره تا اون کسب و کار بتونه پول کمتری صرف کنه تا این 4 اپیکیشن رو داشته باشه!

تکنولوژی PWA به ما کمک میکنه تا بتونیم علاوه بر داشتن اپیکیشن تحت وب ( سایت ) اپیکیشن اندروید ، IOS و حتی ویندوز هم داشته باشیم. یعنی ما اپیکیشن هایی داریم که بصورت یک نرم افزار روی اندروید، IOS و ویندوز نصب میشن و حتی در مارکت ها میتونن منتشر بشن ( Google play , microsoft store , بازار ، مایکت و .. )


تکنولوژی PWA در ری اکت !

درسته ? ما میتونیم از PWA در ری اکت استفاده کنیم. ادامه این مقاله رو با موضوع آموزش pwa در ری اکت جلو میبریم ..

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

کتابخانه ری اکت بصورت کامل از تکنولوژی PWA پشتیبانی میکنه.

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

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


ساخت اپیکیشن PWA با ری اکت

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

npx create-react-app pwa-react-typescript --template cra-template-pwa-typescript

دستور بالا برای ما یک پروژه ری اکت و تایپ اسکریپت ایجاد میکنه که از PWA ( Progressive Web Application ) پشتیبانی میکنه ?

اگه به فایلهای پروژه خودمون دقت کنیم، میبینیم که چندین فایل اضافه شده. بریم ببینیم این فایلها چی هستن:

  • فایل service-worker.js :

این فایل شامل اسکریپتی هست که در پشت صحنه اجرا میشه ( در زمان اجرای اپیکیشن ) این اسکریپت کمک میکنه تا اپیکیشن ما بصورت آفلاین اجرا بشه و بتونیم چندین Request رو بصورت همزمان تو اپیکیشن پشتیبانی کنیم.

  • فایل manifest.json :

این فایل شامل اطلاعات اپیکیشن ما هست که در نهایت به مرورگر تحویل داده میشه. مثل نام اپیکیشن، لوگوی اپیکیشن و ..

  • فایل serviceWorkerRegistration.js :

این فایل مشخص میکند که service-worker ما register شده است یا خیر.

بعد از ایجاد و نصب پکیج های بالا، دستور زیر رو اجرا میکنیم تا پروژه ما Start بشه و بتونیم خروجی رو در مرورگر ببینیم:

cd pwa-react-typescript yarn start

نمایش آفلاین اپیکیشن PWA در ری اکت !

درسته! یکی از ویژگی های خفن 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 چیست ؟

درواقع workbox در PWA مجموعه ای از ابزار ها، امکانات و ماژول هایی هست که وظیفه کش کردن Assets ها و ارائه یکسری امکانات برای ساختن اپیکیشن PWA رو در اختیار ما میزاره.

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

خود Workbox تو PWA برای ما پیکربندی و تنظیمات پیشفرض رو اعمال میکنه، اما ممکنه ما کارمون با تنظیمات پیشفرض راه نیوفته، در چنین شرایطی باید چیکار کنیم ؟!

تو ادامه در موردش بیشتر صحبت میکنیم ..


تنظیمات PWA در ری اکت

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

همچنین اپیکیشن های PWA یک صفحه آغازین دارن. یعنی زمانیکه اپیکیشن PWA نصب شده رو اجرا میکنیم، یک صفحه معرفی به کاربر نمایش داده میشه. تو این صفحه میتونیم هرچیزی قرار بدیم.

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

تو تصویر های زیر، این موارد مشخص هستن:


لوگو و نام اپیکیشن های PWA که باید مقدار دهی بشن - اپیکیشن PWA اسنپ فود


صفحه معرفی اپیکیشن های PWA که هنگام اجرای اپیکیشن نمایش داده میشن. اپیکیشن PWA اسنپ فود


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

  • اسم و لوگوی اپیکیشن خودمون
  • توضیحات و تصویر صفحه معرفی اپیکیشن خودمون ( تو تصویر بالا میبینیم که اسنپ فود صرفا لوگوی خودش + یکسری شکلک غذا تو این صفحه قرار داده )

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


نام اپیکیشن PWA در ری اکت

لطفا برای مطالعه ادامه این مقاله در وبسایت فِرانت اِندی روی لینک زیر کلیک کنید:

آموزش PWA در ری اکت

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