workbox-cli

تتكوّن واجهة سطر أوامر Workbox (المضمّنة في حزمة workbox-cli) من برنامج Node.js يُسمى Workbox الذي يمكن تشغيله من بيئة سطر أوامر Windows وmacOS متوافقة مع نظام التشغيل UNIX. يدمج Workbox-cli وحدة إنشاء Workbox-cli مع وحدة Workbox-build، كما يوفّر طريقة سهلة لدمج Workbox في عملية إنشاء سطر أوامر من خلال عمليات ضبط مرنة.

تثبيت واجهة سطر الأوامر

لتثبيت واجهة سطر الأوامر مع عقدة، قم بتشغيل الأمر التالي في الوحدة الطرفية:

npm install workbox-cli --global

أوضاع واجهة سطر الأوامر

هناك أربعة أوضاع مختلفة في واجهة سطر الأوامر:

  • 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

  • إذا كنت تريد استخدام ميزات "مشغّل الخدمات" الأخرى (مثل Web Push).
  • تريد استيراد نصوص برمجية إضافية أو إضافة منطق إضافي لاستراتيجيات التخزين المؤقت المخصصة.

injectManifest

ويمكن للمطوّرين الذين يريدون المزيد من التحكّم في ملف مشغّل الخدمات النهائي استخدام وضع injectManifest. يفترض هذا الوضع أنّ لديك ملف مشغّل خدمات حالي (موقعه محدّد في config.js).

عند تشغيل workbox injectManifest، تبحث عن سلسلة معيّنة (precacheAndRoute(self.__WB_MANIFEST) تلقائيًا) في ملف عامل خدمة المصدر. وتستبدل الصفيفة الفارغة بقائمة من عناوين URL لتخزينها مُسبقًا وتكتب ملف مشغّل الخدمات في موقع الوجهة استنادًا إلى خيارات الإعداد في config.js. ولن يتم إدخال أي تغييرات على باقي الرمز في مشغّل خدمات المصدر.

يمكنك استخدام Workbox في هذا الوضع كما يلي:

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

حالات استخدام injectManifest

  • تريد المزيد من التحكّم في مشغّل الخدمات.
  • تريد تخزين الملفات مؤقتًا بشكل مسبق.
  • عليك تخصيص التوجيه والاستراتيجيات.
  • إذا كنت تريد استخدام مشغّل الخدمات مع ميزات أخرى للأنظمة الأساسية (مثل Web Push).

الحالات التي يُحظر فيها استخدام injectManifest

  • أنت تريد أسهل مسار لإضافة عامل خدمات إلى موقعك الإلكتروني.

copyLibraries

هذا الوضع مفيد إذا كنت تريد استخدام injectManifest واستخدام ملفات مكتبة Workbox المُستضافة على المصدر الخاص بك بدلاً من استخدام شبكة توصيل المحتوى (CDN).

تحتاج فقط إلى تشغيله باستخدام مسار لكتابة الملفات إلى:

npx workbox-cli copyLibraries third_party/workbox/

دمج العملية

لماذا يجب دمج Workbox مع عملية الإنشاء؟

يحتوي مشروع Workbox على عدد من المكتبات التي تعمل معًا لتعزيز مشغّل الخدمات لتطبيق الويب. من أجل استخدام هذه المكتبات بشكل فعال، يجب دمج Workbox في عملية تصميم تطبيق الويب. بهذه الطريقة، سيضمن لدى عامل الخدمة أن يخزّن مسبقًا المحتوى المهمّ في تطبيق الويب ويخزّنه محدّثًا.

هل "workbox-cli" هو الخيار المناسب لعملية الإنشاء الخاصة بي؟

إذا كانت لديك عملية تصميم تستنِد بالكامل إلى نصوص npm، ننصحك باستخدام workbox-cli.

إذا كنت تستخدم حاليًا webpack كأداة لإنشاء التصميم، سيكون استخدام workbox-webback-extension خيارًا أفضل.

إذا كنت تستخدم حاليًا 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

يمكن العثور على مجموعة كاملة من خيارات الضبط في المستندات المرجعية.