https://virgool.ir/feed/@pamenaryfa2026-11-12 01:27:48https://files.virgool.ir/upload/users/33601/avatar/avatar.pnghttps://virgool.ir/@pamenaryhttps://virgool.ir/@pamenary/چطور-با-استفاده-از-workbox-سایت-pwa-بهتری-توسعه-بدیم-akqhs2zsniujچند روز پیش رفته بودم مصاحبه برای پوزیشن front end ی سوالی که شد و نتونستم جواب بدم این بود Workbox چیه؟ راستش تا به حال نشنیده بودم تا رسیدم خونه گوگل کردم در موردش خوندم دیدم عه عجب چیز باحالی همون موقع دست به کد شدم این امکان به سایت خودمون https://jobguy.ir اضافه کردم.بعدم گفتم بزار ی مقاله در حد معرفی و استفاده ساده ازش بگم توی ویرگول امیدوارم کاربردی باشه.اگر نمی دونیم PWA چیه اول مقاله از @amir_zpr بخونید.https://virgool.io/JavaScript8/%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%D9%85%D9%86-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9-%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-pwa-mg9oclugl0aeWorkbox یک کتابخانه جاوا اسکریپت که درست کردن سایت های PWA را برای ما آسون میکنه.چرا از Workbox استفاده کنیم؟با استفاده از Workbox می تونیم کدهای خوانا, کمتر و انعطاف پذیر برای نوشتن Service Worker توسعه بدیم.می تونیم استراتژی کش متفاوتی ایجاد کنیم.در مجموع بهترین روش ها را برای توسعه Service worker در اختیار ما می زاره.ی کار با حالی که میشه باهاش راحت انجام داد مثلا من می دونم ی سری API دیتاشون مثلا روزی ی بار یا هر 5 دقیقه تغییر می کنه می تونم ی استراتژی تعریف کنم که حتی API کش کنم.با این کار دیگه request سمت سرور نمیره باعث میشه سرعت تعامل کاربر با سایت بره بالا و مصرف منابع سرور (CPU, RAM) کاهش پیدا کنه. در ضمن اگر هم کاربر اینترنت نداشت یا رفت روی حالت Offline می تونه با سایت هنوز کار کنه.خوب بیاییم ی مثال ساده انجام بدیم:کاری که قرار انجام بدیم:فایل های CSS کش بشن.فایل های JS کش بشن.ای پی آی که قرار کال بشه کش بشه. (برای ای پی ای من از این سایت استفاده کردم)https://reqres.inخوب بریم سراغ مثال خودمون من دیگه نیازمندی های اولیه یک سایت PWA اینجا نمی گم توی اون مقاله بالا که معرفی کردم با جزئیات توضیح داده شده.خوب یک پوشه درست کنید برای مثال اسمش بزارید workboxحالا فایل های زیر درست کنید:├── images│ ├── icons-192.png│ └── icons-512.png├── index.html├── main.js├── manifest.json├── style.css└── sw.jsindex.htmlstyle.cssmain.jssw.jsکدها هم اگر خواستید اینجا هست:https://gist.github.com/pamenary/0da5bc3ef20114a4fabae884e5e12822می خواستم کدها رو embed کنم که مثل اینکه ادیتور ویرگول اجازه نمیده :(خوب من فقط فایل sw.js خط به خط توضیح میدم.خط اول کتابخانه workbox داخل پروژه include کردم بعد یک شرط گذاشتم اگر workbox وجود داشت بیا این کارها رو انجام بده.خط 7 حالت debug فعال کردم که توی کنسول مرورگر این شکلی نشون میده:خط 9-13 می تونید اسم گذاری های پیش فرض تغییر بدید به مواردی که دوست دارید مثلا اول اسم کش ها نام برند شرکت باشه.خط 17 اومدم route request تعریف کردم.Route request چیه؟با استفاده از این تابع می تونیم بگیم فلان آدرس ها یا فلان فایل اگر بود بیا این استراتژی کش روش اعمال کن. برای مثال تمام آدرس هایی که با assets شروع میشه بیا این کار انجام بده.registerRoute دو تا آرگومان داره آرگومان اولی می تونه String یا Regular Expression یا Callback Function باشه5 نوع استراتژی داریممثال و توضیحات بیشتر اینجا می تونید ببنید.دومی هم استراتژی کش تعریف می کنیم مثلا با چه نوع دیدی فایل ها کش بشن5 نوع استراتژی داریم:Stale-While-Revalidate:Stale-While-Revalidateصفحه ای که قرار بارگذاری بشه می یاد سمت Service Worker بعد اگر کش بررسی میشه اگر وجود داشت میده به مرورگر بعد در آخر هم توی Background اون فایل یا هر چیزی چک میشه اگر تغییر داده شده اون فایل بروز می کنه.با این استراتژی همیشه بروز ترین فایل ها کاربر داره.Cache First:Cache Firstدر این استراتژی اگر درخواست در کش وجود داشت مستقیم از کش اون درخواست پاسخ داده میشه ولی اگر وجود نداشت request سمت سرور می ره و از اینرنت بارگزاری میشه (اولویت با Cache)Network First:Network Firstدر این استراتژی اولیوت با شبکه است اگر اینترنت کاربر قطع بود از کش بارگذاری میشه.Network Only:Network Onlyبا این استراتژی فایل ها مستقیم از شبکه بارگذاری میشه.Cache Only:Cache Only با این استراتژی مستقیم از کش فایل ها بارگذاری میشه.همین مثال من اینجا آپلود کردم می تونید ببنید.خوب حالا اگر کنسول مرورگر خودتون باز کنید بعد برید تب Application بعد Cache Storage باز کنید کش هایی که تعریف کردیم می تونید اینجا ببنیدتوی تب network هم می تونید ببنید request ها از کجا بارگذاری شدن.دموی همین مثال هم اینجا:https://workbox.pamenari.now.shنتیجه گیری:امیدوارم از این مطلب خوشتون اومدده باشه. با استفاده از Workbox خیلی راحت می تونید وب اپلیکشنی بسازید که واقعا توی حالت آفلاین هم کار کنه.توضیحات کامل تر اینجا می تونید بخونید:https://developers.google.com/web/tools/workbox/guides/get-startedاین قابلیت به سایت Jobguy.ir اضافه کردم منتهی پوش کردم ولی هنوز دوست dev ops مون هنوز مرج نکرده و نیاورده بالا :)راستی اگر تجربه مصاحبه یا تجربه خوب یا بد در شرکتی دارید اینجا به اشتراک بزارید‌:)Jobguy.irخوب این اولین مقاله من, اگر مشکلی داشت خوشحال میشم بازخوردتون بگید :)علی پامناریعلی پامناریMon, 30 Sep 2019 19:42:11 +0330