کار با WorkBox در ریکت (PWA)

PWA Workbox — https://developers.google.com/web/tools/workbox/ورک باکس مجوعه ای از کتابخانه ها برای ساده‌تر شدن کار با Service worker جهت فعالسازی cache در یک وب اپلیکیشن با قابلیت های مختلف برای کنترل آن هست. برخی از ویژگی و قابلیت های WorkBox :بالا بردن Performance فعال بودن اپلیکیشن در حالت آفلاینامکان تعریف استراتژی برای cache هااجرای دستورات در پس زمینه اپلیکیشنافزودن و کار با WorkBox به پروژهدر این بخش فقط نحوه افزودن WorkBox و cache کردن تمام فایل های یک پروژه بیان میشه, در آینده اگر فرصت شد ادامه مطلب قرار داده میشه. (برای دسترسی به کد ها از اینجا اقدام کنید)بعد از ایجاد پروژه CRA, مراحل زیر را طی کنید:۱. نصب خط فرمان (CLI) مربوط به WorkBox:npm install --global workbox-cli@^3.0.0اگر هنگام نصب خطایی دریافت کردید یا زمان استفاده از دستور workbox خطای workbox not found گرفتید٬ قبل از دستور بالا از sudo -i استفاده کنید.۲. ایجاد فایل مدیریت و شخصی سازی Service worker:داخل روت پروژه (فولدر src) یک فایل sw.js ایجاد کرده و کد های زیر را داخل آن قرار میدهیمimportScripts('https://storage.googleapis.com/workbox-cdn/releases/4.0.0/workbox-sw.js');if (workbox) { console.log(`WB IS OK`); workbox.core.setCacheNameDetails({ prefix: 'TEST-SW', suffix: 'v1' }); workbox.precaching.precacheAndRoute([]); self.addEventListener("message", event => { if (event.data && event.data.type === "SKIP_WAITING") { skipWaiting(); } }); workbox.routing.registerRoute( /\.(?:png|jpg|jpeg|svg|gif)$/, new workbox.strategies.CacheFirst({ cacheName: 'image-cache', plugins: [ new workbox.expiration.Plugin({ maxEntries: 25, maxAgeSeconds: 7 * 24 * 60 * 60, }) ], }) );} else { console.log("WB ERROR");}۳. خروجی گرفتن از اپلیکیشن:در مرحله بعدی هنگام کار با WorkBox CLI نیاز داریم آدرس فولدر Build را بدیم و چون اگر این فولدر وجود نداشته باشه خطا دریافت میکنیم بنابراین یکبار از پروژه خروجی میگیریم تا این فولدر ایجاد شود. (این کار فقط برای ایجاد WorkBox هست, اگر از CI/CD استفاده میکنید مشکلی پیش نمیاد)npm run build۴. اجرای خط فرمان نصب WorkBox:با کد زیر پروسه ایجاد و پیکربندی WorkBox اجرا میشهworkbox wizard --injectManifestبعد از اجرای فرمان بالا سوالاتی برای ایجاد فایل پیکربندی پرسیده میشه, در سوال اول آدرس فولدری که خروجی پروژه در آن قرار داره را میپرسه (همون فولدر Build که ساختیم)پس /build را انتخاب کرده و enter کنیدمرحله بعدی از ما میپرسه چه فایل هایی رو میخوایم cache کنیم. در حالت پیشفرض همه فایل ها انتخاب شده اما یکی از فایل هارو با زدن space از لیست خارج کرده و enter را بزنیدمرحله بعدی آدرس فایل sw.js رو که ساختیم میخواد, پس src/sw.js را وارد کرده و enter بزنیددو مرحله بعدی آدرس محل قرار گیری Service worker بعد از خروجی گرفتن از اپلیکیشن و محل قرارگیری فایل workbox-config رو میخوان, برای هردو مرحله enter را میزنیمخب فایل workbox-config.js با موفقیت ایجاد شد. فایل را باز کرده و این کد رو جایگزین مقادیر داخل آن کنید (این مرحله اجباری نیست)module.exports = { "globDirectory": "build/", "globPatterns": [ "/", "**/*.css", "**/*.js", "**/*.ttf", "**/*.woff", "**/*.woff2", "**/*.png", "**/*.svg", "**/*.eot", "index.html", "manifest.json", ], "swSrc": "src/sw.js", "swDest": "build/sw.js", "globIgnores": [ "../workbox-config.js" ]};۵. داخل فایل package.json شده و build را به شکل زیر تغییر میدیم"build": "CI=false TSC_COMPILE_ON_ERROR=false react-scripts build && workbox injectManifest workbox-config.js && npm run clean-cra-sw", "clean-cra-sw": "rm -f build/precache-manifest.*.js && rm -f build/service-worker.js", "start-sw-build": "react-scripts build && workbox injectManifest workbox-config.js && npm run clean-cra-sw && serve -s build"کد start-sw-build برای دریافت خروجی از پروژه و اجرای فایل deploy شده پروژه که در فولدر build هست, بر روی localhost.اگر از start-sw-build میخواید استفاده کنید این پکیج رو نصب کنید:npm install -g serve۶. وقتی از WorkBox استفاده میکنیم نیازی به Service worker که پیشفرض در پروژه هست نداریم, بنابراین فایل service-worker.js و کد های مربوط به import و رجیستر کردن آن در فایل index.js را پاک کنید.۷. کد زیر را داخل تگ body در index.html قرار دهید: if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') .then(registration => { console.log(`Service Worker registered: ${registration.scope}`); }) .catch(err => { console.log(`failed: ${err}`); }); }); }۸. نصب workbox-window:npm install workbox-window۹. پکیج را نصب کرده و در App.js کد زیر را قرار میدهیم (js مادر, برای من App بوده شاید برای شما فایل دیگه ای باشه)import {Workbox} from 'workbox-window';کد زیر داخل فانکشن قرار میگیردif ('serviceWorker' in navigator) { const wb = new Workbox('/sw.js'); wb.addEventListener("waiting", event => { .reload(); wb.messageSW({type: "SKIP_WAITING"}); }); wb.register();}وقتی تغییری در کدهاتون میدین و روی سرور آپلود میکنین ServiceWorker جدیدی ساخته میشه و در حالت انتظار میمونه تا دستی به روش های گوناگون و یا بسته شدن کامل پنجره وبسایت و باز شدن مجدد, نصب بشه اما با کد فوق نیازی به این کار نیست و ما یک پیغام به WorkBox میدیم و این انتظار رو رد کرده (ادامه کار در sw.js انجام میشه) و Service worker جدید رو نصب میکنیم و پس از آن پنجره رو اتوماتیک رفرش میکنیم.خب کار نصب و راه اندازی تا اینجا به اتمام میرسه, تمام فایل های cache میشه و در حالت افلاین هم وب اپلیکیشن شما اجرا میشه. قبل از راه اندازی WorkBox اگر به اپلیکیشن خود مراجعه کرده و inspect بگیرید به این شکل خواهد بود:اما بعد از راه اندازی WorkBox به این شکل داریم:۱۰. برای debug کردن ساده‌تر و اینکه ببینید چه اتفاقاتی رخ میده کد زیر رو داخل sw.js میتونید قرار بدید:workbox.setConfig({ debug: true });امیدوارم تونسته باشم مطلب رو بخوبی ارایه کنم و فرصتی باشه تا ادامه مطلب رو هم قرار بدم, برای دسترسی به کد ها از اینجا میتوانید اقدام کنید.