شخصی سازی سرویس ورکر create-react-app بدون ejecting و با استفاده از Workbox

در حال حاضر جهت اضافه کردن یک سرویس ورکر سفارشی یا custom به create-react-app بدون اینکه آن را Inject کنیم راهی وجود ندارد، لذا در ادامه یک روش جهت این نیاز ارايه می گردد.

مرحله اول: فعال سازی register سرویس وررک در فایل index.js

مرحله دوم: گفتن به CRA جهت لود سرویس ورکر سفارش سازی شده

در فایل src/serviceWorker.js مسیر سرویس ورکر جدید که در اینجا sw.js نام دارد را به صورت زیر تغییر می دهیم.

تغییر خط

const swUrl = ${process.env.PUBLIC_URL}/service-worker.js;

به

const swUrl = ${process.env.PUBLIC_URL}/sw.js;

مرحله سوم : ایجاد یک Template و ‌ Build فایل برای سرویس ورکر سفارش سازی شده

دو فایل sw-build.js و sw-template.js را در دایرکتوری src ایجاد نماید.

فایل sw-build.js شامل دستورات ساخت سرویس ورکر سفارشی است.

فایل sw-template.js یک Template برای سرویس ورکر با استفاده از Workbox شامل قوانین caching است

مرحله چهارم: ساخت فایل sw-build.js شامل دستورات ساخت سرویس ورکر سفارشی

همانطور که در کد فوق می بینیم در قسمت swSRC مسیر Template سرویس ورکر مشخص شده است که در مرحله بعد کد آن آورده شده است.

مرحله پنج : ساخت فایل sw-template.js شامل Template برای سرویس ورکر با استفاده از Workbox شامل قوانین caching

مرحله شش : نصب workbox-build

ماژول workbox-build را با دستور زیر نصب می کنیم.

yarn add workbox-build

مرحله هفتم : اجرای دستور ساخت سرویس ورکر جدید و حذف سرویس ورکر قدیمی با تغییر package.json به صورت زیر

کل فرآیند اینجا تمام می شود و الان در هنگام Build وب اپ با دستور npm run build سرویس ورکر سفارش سازی شده بنام sw.js ساخته می شود و مورد استفاده وب اپ قرار می گیرد.