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 چیه ؟

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

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

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

اپیکیشن تحت وب ( سایت )
اپیکیشن اندروید ( Android )
اپیکیشن آیفون ( IOS )
اپیکیشن ویندوز ( 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 در React استفاده میکنیم باید بصورت زیر عمل کنیم ..

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

برای مشخص کردن نام اپیکیشن PWA باید فایل index.html رو باز کنیم ( این فایل داخل پوشه public قرار داره ).

حالا کافیه بصورت زیر، تگ title رو تغییر بدید :

مقدار جدید

				
					<title> اپیکیشن جمشید کالا </title>

مقدار قبلی

				
					<title>React App</title>

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

حالا فایل manifest.json رو باز کنید ( این فایل در پوشه public قرار داره، اگه وجود نداشت بسازیدش ).

سپس بصورت زیر مقادیر رو تغییر بدید :

مقدار جدید

				
					  "short_name": " جمشید کالا ",
  "name": "فرانت اندی-مرجع تخصصی فرانت اند",

مقدار قبلی

				
					  "short_name": "React App",
  "name": "Create React App Sample",

با انجام این 2 کار، اسم اپیکیشن ما تغییر پیدا میکنه.

فراموش نکنید که حتما باید آدرس فایل manifest داخل فایل index.html وجود داشته باشه ( بصورت تگ لینک ) :

				
					<link rel="manifest" href="/manifest.json" />

اما تو این پروسه، ما فایل manifest.json رو تغییر دادیم. حالا شاید سوال برامون پیش بیاد که فایل manifest.json چیه؟

فایل manifest.json چیست ؟

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

اینکه اسم اپیکیشن PWA ما چیه
لوگوی اپیکیشن PWA ما چیه
بعد اجرا، اپیکیشن PWA به چه صفحه ای بره ( start_url )
رنگ زمینه اپیکیشن PWA ما ( background )
و…

فرمت این فایل JSON هست. ما در اپیکیشن های pwa در react از این فایل استفاده میکنیم تا اپیکیشن خودمون رو به مرورگر معرفی کنیم.

فایل manifest.json در ری اکت در نهایت بصورت زیر میتونه باشه :

				
					{
  "short_name": "FrontEndi", // نام اپیکیشن
  "name": "FrontEndi",
  "icons": [
    {
      "src": "favicon.ico", //favicon file address
      "sizes": "64x64 32x32 24x24 16x16", //favicon file size
      "type": "image/x-icon" //favicon file type
    },
    {
      "src": "logo192.png", // logo file address
      "type": "image/png", // logo file type
      "sizes": "192x192" // logo file size
    },
    {
      "src": "logo512.png", // another logo file address with diffrent size
      "type": "image/png", // ..
      "sizes": "512x512" / ..
    }
  ],
  "start_url": ".", // Home application address - maybe is :"/shop"
  "display": "standalone", // type of application
  "theme_color": "#000000", // theme back-color
  "background_color": "#ffffff" // theme back-color
}

میتونید تیکه کد بالارو داخل فایل manifest.json خودتون کپی کنید و مقادیرش رو باتوجه به نیاز خودتون تغییر بدید. ( آدرس لوگو، نام و توضیحات اپیکیشن خودتون رو جایگزین موارد بالا کنید )

حالا ما یک اپیکیشن ری اکت PWA داریم 🙂

اپیکیشن ما قابلیت نصب روی انواع سیستم عامل هارو داره ( قابلیت نصب و حذف )

حالا بریم چند تا کار دیگه بکنیم تا اپیکیشن pwa در react بهینه داشته باشیم.

تقسیم کد در اپیکیشن PWA یا همون Code-Spliting

ما نباید کدهای خودمون رو داخل یک فایل قرار بدیم تا سنگین بشه. با انجام اینکار ( قرار دادن همه کد ها داخل یک فایل و سنگین شدنش ) بارگذاری اون فایل زمانبر هست و در نتیجه لود صفحات ما دیر انجام میشه.

معمولا تو آموزش pwa در ری اکت به مبحث code-spliting اشاره ای نمیشه اما باتوجه به اینکه خیلی به Performance اپیکیشن کمک میکنه، ما درموردش صحبت میکنیم.

برای جلوگیری از چنین مشکلی باید کد های خودمون رو درون فایلهای مختلف قرار بدیم. بهتره اینجوری بگیم که:

زمانیکه کاربر وارد یک صفحه شد، فقط کدهای مربوط به همون صفحه باید برای کاربر بارگذاری بشه. ( نه کد های سایر صفحات )

به تقسیم کردن کد ها بین فایلهای مختلف Code Spliting میگیم.

تو اپیکیشن های PWA در ری اکت ما میتونیم از code-spliting استفاده کنیم.

اگه ما دستور yarn build رو اجرا کنیم، تو کنسول عبارت های زیر رو میبینیم :

				
					  47.88 KB  build/static/js/2.89bc6648.chunk.js
  784 B     build/static/js/runtime-main.9c116153.js
  555 B     build/static/js/main.bc740179.chunk.js
  269 B     build/static/css/main.5ecd60fb.chunk.css

تو خط شماره 3 میتونیم signle-file.js خودمون رو ببینیم. هرچی اپیکیشن ما بزرگتر بشه، این فایل هم سنگین تر میشه.

برای اینکه بتونیم از Code-Spliting در PWA استفاده کنیم و کدهای خودمون رو به فایلهای مختلف تقسیم کنیم باید وارد فایلهایی بشیم که داخلشون کامپوننت یا صفحه ای import کردیم.

بطور مثال تو صفحه زیر که 2 فراخوانی داریم، import های معمولی رو تبدیل به lazy میکنیم:

مقدار جدید

				
					const Contact = lazy(() => import('./Contact'));
const Shop = lazy(() => import('./Shop'));

مقدار قبلی

				
					import Contact from "./Contact";
import Shop from "./Shop";

ما فراخوانی های معمولی خودمون رو به lazy تبدیل کردیم. اینجوری کامپوننت و صفحات ما بصورت lazy فراخوانی میشن.

در حقیقت Webpack از lazy برای code-spliting استفاده میکنه.

انجام lazy load باعث میشه که کامپوننت های ما فقط زمانی import بشن که بهشون احتیاج داریم.

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

چون هم یک فایل js بزرگ نداریم، هم جاوااسکریپت بلا استفاده لود نمیکنیم ( هرچیزی که لازم داریم فقط لود میکنیم )

البته این تکنیک صرفا برای pwa در react نیست و بدون pwa هم قابل پیاده سازیه.

اما بارگذاری تنبل ( Lazy Load ) باعث میشه چند لحظه لود شدن اون کامپوننت طول بکشه. برای اینکه کاربر در این حین یک چیزی ببینه ( حالت منتتظر بمانید ) باید داخل کامپوننت Router بصورت زیر عمل کنیم:

				
					 <Router>
    <Suspense fallback={<div>منتظر بمون تا لود شه ...</div>}>
    {/*...*/}
    </Suspense>
  </Router>

تو روش بالا، تا زمانیکه کامپوننت مدنظر ما فراخوانی بشه ( import بشه ) کاربر متن “منتظر بمون تا لود شه” رو میبینه.

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

حالا ما اپیکیشن بهینه تری داریم چون از تکنیک Code Spliting استفاده کردیم و باعث شده اپیکیشن ما فایل های js بیشتری داشته باشه و هر فایل فقط زمانی برای کاربر Load بشه که بهش نیاز داره.

الان اگه دستور yarn build رو اجرا کنیم، تو ترمینال عبارات زیر رو میبینیم:

				
					  47.88 KB          build/static/js/2.89bc6648.chunk.js
  1.18 KB (+428 B)  build/static/js/runtime-main.415ab5ea.js
  596 B (+41 B)     build/static/js/main.e60948bb.chunk.js
  269 B             build/static/css/main.5ecd60fb.chunk.css
  233 B             build/static/js/4.0c85e1cb.chunk.js
  228 B             build/static/js/3.eed49094.chunk.js

همونطور که میبینیم ما فایل های chunk بیشتری داریم و هیچ فایلی بیش از حد سنگین نمیشه.

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

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

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

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

جمع بندی

ما تو این مقاله بررسی کردیم که PWA در React چیه و چرا باید از PWA در ری اکت استفاده کنیم ! همچنین مزایای اون رو بررسی کردیم .

دیدیم که اپیکیشن های PWA در React قابلیت نصب در تمام سیستم عامل هارو دارن.

دیدیم با یکبار نوشتن اپیکیشن ری اکتی، میتونیم از اون در سیستم عامل های مختلف به عنوان اپیکیشن بومی استفاده کنیم و اپیکیشن رو نصب/حذف کنیم.

زمانیکه کاربر با اپیکیشن PWA کار میکنه حس خیلی بهتری بهش دست میده و دیگه نیازی نیست از طریق مرورگر به سایت ما دسترسی داشته باشه.

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

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

امروز به آموزش PWA در ری اکت پرداختیم 🙂

امیدوارم که PWA در ریکت رو به خوبی درک کرده باشید و از PWA تو پروژه هاتون استفاده کنید 🙂

PWA چیست ؟

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

PWA در ری اکت قابل استفادس ؟

بله قطعا!

تو این مقاله بررسی کردیم که چطور از pwa در react استفاده کنیم.

pwa در react بصورت کامل پشتیبانی میشه.

اپیکیشن های PWA قابلیت استفاده بصورت آفلاین ( بدون اینترنت ) رو هم دارن ؟

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

اپیکیشن های PWA قابل نصب روی اندروید هستن؟

بله کاملا !

ما میتونیم از اپیکیشن PWA خودمون خروجی .apk بگیریم و حتی در مارکت های اندرویدی منتشرشون کنیم.

البته این صرفا در مورد اندروید نیست.

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

چطور از pwa در react استفاده کنیم ؟

تو این مقاله بصورت 0 تا 100 بررسی کردیم که چطور از pwa در react باید استفاده کنیم.

آموزش pwa در ری اکت تو این مقاله مطرح شده.

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

پژمان زارع پور گفت:
22 مرداد 1403 در 16:42
سلام احمد جان
عالی بود
یه سوال توی نکست جی اس چه تفاوتی داره؟
پاسخ
- احمد احمدنژاد گفت:
  22 مرداد 1403 در 17:56
  سلام پژمان جان قربانت
  تو Next.js هم میتونیم PWA داشته باشیم. برای اینکه بطور دستی این قضیه رو هندل نکنیم میتونیم از پکیج next-pwa استفاده کنیم که بصورت خودکار خیلی از مسائل رو هندل میکنه ( داکیومنت خوبی هم داره )
  درواقع next-pwa خودش کش رو مدیریت میکنه، فایل کانفیگ رو میسازه و ..
  اما مفاهیم PWA بین ری اکت و Next.js کاملا یکسان هستن.
  موفق باشی 🙂
  پاسخ

وبلاگ

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

PWA چیست ؟

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

پرفورمنس عالی ( Performance )

قابلیت استفاده بدون اینترنت ( آفلاین )

قابلیت استفاده در تمامی پلتفرم ها و سیستم عامل ها

قابلیت نصب ( قابل install و uninstall روی دستگاه های مختلف )

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

PWA در ری اکت !

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

فایل service-worker.js :

فایل manifest.json :

فایل serviceWorkerRegistration.js :

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

Workbox در PWA چیست ؟

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

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

فایل manifest.json چیست ؟

تقسیم کد در اپیکیشن PWA یا همون Code-Spliting

جمع بندی

درباره احمد احمدنژاد

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ

صفحات فِرانت اِندی

تماس با ما

شبکه های اجتماعی