workbox-cli

رابط خط فرمان Workbox (که در بسته workbox-cli موجود است) از یک برنامه Node.js به نام workbox تشکیل شده است که می تواند از یک Windows، macOS، از محیط خط فرمان سازگار با یونیکس اجرا شود. در زیر هود، workbox-cli ماژول ساخت جعبه کاری را می‌پیچد و راهی آسان برای ادغام Workbox در فرآیند ساخت خط فرمان، با پیکربندی‌های انعطاف‌پذیر، فراهم می‌کند.

CLI را نصب کنید

برای نصب CLI با Node، دستور زیر را در ترمینال خود اجرا کنید:

npm install workbox-cli --global

حالت های CLI

CLI چهار حالت مختلف دارد:

  • wizard : راهنمای گام به گام برای راه اندازی Workbox برای پروژه خود.
  • generateSW : یک سرویس دهنده کامل برای شما ایجاد می کند.
  • injectManifest : دارایی ها را برای پیش کش به پروژه شما تزریق می کند.
  • copyLibraries : کتابخانه های Workbox را در یک فهرست کپی کنید.

wizard

جادوگر Workbox یک سری سوالات در مورد راه اندازی فهرست محلی شما و فایل هایی که می خواهید از پیش ذخیره شوند می پرسد. از پاسخ‌های شما برای ایجاد یک فایل پیکربندی استفاده می‌شود که می‌تواند هنگام اجرا در حالت generateSW استفاده شود.

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

برای شروع اجرای جادوگر:

npx workbox-cli wizard

تصویری از جادوگر Workbox CLI

generateSW

می‌توانید از Workbox CLI برای ایجاد یک سرویس‌کار کامل با استفاده از یک فایل پیکربندی (مانند فایلی که توسط ویزارد تولید می‌شود) استفاده کنید.

کافیست دستور زیر را اجرا کنید:

npx workbox-cli generateSW path/to/config.js

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

زمان استفاده از generateSW

  • می خواهید فایل ها را پیش کش کنید.
  • شما نیازهای ذخیره سازی در زمان اجرا ساده دارید.

زمانی که از generateSW استفاده نکنید

  • می‌خواهید از سایر ویژگی‌های Service Worker (به عنوان مثال Web Push ) استفاده کنید.
  • می‌خواهید اسکریپت‌های اضافی را وارد کنید، یا منطق اضافی برای استراتژی‌های کش سفارشی اضافه کنید.

injectManifest

برای توسعه‌دهندگانی که می‌خواهند کنترل بیشتری بر فایل سرویس نهایی خود داشته باشند، می‌توانند از حالت injectManifest استفاده کنند. این حالت فرض می کند که شما یک فایل سرویس کار موجود (که محل آن در config.js مشخص شده است) دارید.

وقتی workbox injectManifest اجرا می‌شود، به دنبال یک رشته خاص ( precacheAndRoute(self.__WB_MANIFEST) به‌طور پیش‌فرض) در فایل Worker Service منبع شما می‌گردد. آرایه خالی را با لیستی از URLها برای پیش کش جایگزین می کند و فایل service worker را بر اساس گزینه های پیکربندی در config.js در مکان مقصد می نویسد. بقیه کدهای موجود در سرویس منبع شما دست نخورده باقی مانده است.

می توانید از Workbox در این حالت مانند زیر استفاده کنید:

npx workbox-cli injectManifest path/to/config.js

زمان استفاده از injectManifest

  • شما می خواهید کنترل بیشتری بر کارمند خدمات خود داشته باشید.
  • می خواهید فایل ها را پیش کش کنید.
  • شما باید مسیریابی و استراتژی ها را سفارشی کنید.
  • می‌خواهید از سرویس‌کار خود با سایر ویژگی‌های پلتفرم (مانند Web Push ) استفاده کنید.

زمانی که از injectManifest استفاده نکنید

  • شما می خواهید ساده ترین راه را برای افزودن یک سرویس دهنده به سایت خود داشته باشید.

copyLibraries

اگر می‌خواهید از injectManifest استفاده کنید و می‌خواهید به جای استفاده از CDN از فایل‌های کتابخانه Workbox میزبانی شده در مبدا خودتان استفاده کنید، این حالت مفید است.

شما فقط باید آن را با یک مسیر برای نوشتن فایل ها اجرا کنید:

npx workbox-cli copyLibraries third_party/workbox/

ایجاد یکپارچه سازی فرآیند

چرا Workbox باید با فرآیند ساخت من ادغام شود؟

پروژه Workbox شامل تعدادی کتابخانه است که با هم کار می کنند تا به سرویس دهنده برنامه وب شما کمک کنند. برای استفاده موثر از این کتابخانه ها، Workbox باید در فرآیند ساخت برنامه وب شما ادغام شود. این تضمین می‌کند که کارمند خدمات شما می‌تواند به طور موثر تمام محتوای حیاتی برنامه وب شما را پیش کش کند و آن محتوا را به‌روز نگه دارد.

آیا workbox-cli انتخاب مناسبی برای فرآیند ساخت من است؟

اگر یک فرآیند ساخت موجود دارید که کاملاً بر اساس اسکریپت‌های npm است، workbox-cli انتخاب خوبی است.

اگر در حال حاضر از webpack به عنوان ابزار ساخت خود استفاده می کنید، استفاده از workbox-webback-plugin انتخاب بهتری است.

اگر در حال حاضر از Gulp ، Grunt یا سایر ابزارهای ساخت مبتنی بر Node.js استفاده می کنید، ادغام workbox-build در اسکریپت ساخت خود انتخاب بهتری است.

اگر اصلاً فرآیند ساخت ندارید، باید قبل از استفاده از Workbox برای پیش کش کردن هر یک از دارایی‌های خود، یکی از آنها را بیابید. تلاش برای به خاطر سپردن اجرای دستی workbox-cli می تواند مستعد خطا باشد و فراموش کردن اجرای آن می تواند منجر به ارائه محتوای قدیمی به بازدیدکنندگان بازگشتی شود.

راه اندازی و پیکربندی

پس از نصب workbox-cli به عنوان یک وابستگی توسعه برای پروژه محلی خود، می توانید تماس را به workbox در انتهای اسکریپت npm فرآیند ساخت موجود خود اضافه کنید:

از package.json:

{
  "scripts": {
    "build": "my-build-script && workbox <mode> <path/to/config.js>"
  }
}

<mode> را با generateSW یا injectManifest (بسته به مورد استفاده شما) و <path/to/config.js> با مسیر گزینه های پیکربندی خود جایگزین کنید. پیکربندی شما ممکن است به طور خودکار توسط workbox wizard ایجاد شده باشد یا به صورت دستی بهینه سازی شده باشد.

پیکربندی

گزینه های استفاده شده توسط generateSW

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

گزینه های مورد استفاده توسط injectManifest

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