طرق Workbox

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

generateSW ضد injectManifest

ستعتمد على إحدى الطريقتين الأساسيتين لأدوات إنشاء Workbox: generateSW أو injectManifest. يعتمد الخيار الذي يجب عليك استخدامه على مقدار المرونة التي تحتاجها. يمنح generateSW الأولوية لسهولة الاستخدام والبساطة مقابل تكلفة المرونة، ما يسمح لك بتوضيح مجموعة من خيارات الضبط ومنحك في المقابل مشغّل خدمات يعمل بكامل طاقته.

يوفّر injectManifest مرونة أكبر مقابل بعض البساطة، فسينتهي بك الأمر بكتابة الرمز لعامل الخدمات بنفسك، مع توفير injectManifest بيانًا للتخزين المؤقت مسبقًا يمكن استخدامه من خلال طرق التخزين المؤقت في Workbox.

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

يجب استخدام generateSW في الحالات التالية:

  • تريد التخزين المؤقت للملفات المرتبطة بعملية التصميم، بما في ذلك الملفات التي تحتوي عناوين URL الخاصة بها على علامات تجزئة قد لا تعرفها مسبقًا.
  • لديك احتياجات بسيطة للتخزين المؤقت في وقت التشغيل يمكن ضبطها من خلال خيارات generateSW.

الحالات التي لا يتم فيها استخدام generateSW

من ناحية أخرى، يجب عدم استخدام generateSW في الحالات التالية:

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

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

يجب استخدام injectManifest في الحالات التالية:

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

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

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

يجب عدم استخدام injectManifest في الحالات التالية:

  • أنت لا تريد استخدام التخزين المؤقت في مشغّل الخدمات.
  • وأن متطلبات مشغّل الخدمات بسيطة بما يكفي لتكون مشمولة بما يمكن أن يوفّره generateSW وخيارات الضبط.
  • أنت تعطي الأولوية لسهولة الاستخدام على المرونة.

استخدام أدوات تصميم Workbox

إذا كنت تبحث عن طريقة لا تتوافق مع إطار العمل لاستخدام Workbox في عملية التصميم، تتوفّر لك ثلاثة خيارات:

  1. workbox-cli
  2. workbox-build. أداة سطر الأوامر.
  3. استخدام أداة حزم (مثل workbox-webpack-plugin)

توفِّر كل أداة من أدوات التصميم هذه وضعَي generateSW وinjectManifest، بالإضافة إلى مجموعة مماثلة من الخيارات. هذه كلها خيارات جيدة عندما لا تريد ربط عامل الخدمات المستند إلى Workbox بإطار عمل معين. لمعرفة أيّ من هذه الخيارات هو الأنسب، لنلقِ نظرة سريعة على كلّ خيار.

workbox-cli

إذا كنت تبحث عن أقل عائق أمام الدخول باستخدام Workbox، فإن واجهة سطر الأوامر هي الخيار المناسب لك:

npm install workbox-cli --save-dev

لبدء استخدام واجهة سطر الأوامر، شغِّل المعالج مع npx workbox wizard. سيطرح المعالج بعض الأسئلة، وسيتم استخدام الإجابات عن هذه الأسئلة لإعداد مشروع باستخدام ملف workbox-config.js يمكنك تخصيصه ليناسب احتياجاتك. سيظهر على النحو التالي:

// A config for `generateSW`
export default {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
};

بعد إنشاء ملف الإعداد، يمكن لواجهة سطر الأوامر تشغيل generateSW أو injectManifest نيابةً عنك. يتضمّن نص المساعدة الخاص بواجهة سطر الأوامر مزيدًا من المعلومات وأمثلة على الاستخدام.

workbox-build

workbox-cli هو برنامج تضمين حول الوحدة workbox-build، ويمكن استخدامه بدلاً من ذلك workbox-buildمباشرةً. عند استخدام workbox-build، بدلاً من تحديد الخيارات باستخدام ملف workbox-config.js، ستستخدم الطريقتين generateSW أو injectManifest مباشرةً كجزء من النص البرمجي للعقدة، مع تمرير مجموعة مماثلة من الخيارات:

// build-sw.mjs
import {generateSW} from 'workbox-build';

generateSW({
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
});

في المثال أعلاه، سيكتب workbox-build مشغّل الخدمات الذي تم إنشاؤه في الدليل dist عند تشغيل الأمر node build-sw.mjs.

استخدام أداة حزم

تحتوي العديد من الحزم على مكوّنات Workbox الإضافية الخاصة بها، إلا أنّ الحزمة الوحيدة التي يدعمها فريق Workbox هي حزمة الويب عبر workbox-webpack-plugin. على غرار workbox-cli وworkbox-build، سيشغِّل workbox-webpack-plugin الطريقتين generateSW أو injectManifest، باستثناء أن الإضافة تُكتب بأحرف كبيرة في أسماء الطرق هذه على الشكل التالي: GenerateSW أو InjectManifest. وبخلاف ذلك، يكون الاستخدام مشابهًا للقاعدة workbox-build:

// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';

export default {
  // Other webpack config options omitted for brevity...
  plugins: [
    new GenerateSW({
      swDest: './dist/sw.js'
    })
  ]
};

تختلف الخيارات التي يتم تمريرها إلى GenerateSW أو InjectManifest عن generateSW أو injectManifest، ولكن هناك تداخل كبير. على وجه الخصوص، لا تحتاج إلى تحديد خيار globDirectory لـ GenerateSW ولا يمكنك تحديده، لأنّ حزمة الويب تعرف موضع تجميع مواد عرض الإنتاج.

استخدام إطار عمل

يركز كل ما تم تناوله في هذه النقطة على استخدام Workbox بغض النظر عن تفضيلات إطار العمل. ومع ذلك، من الممكن استخدام Workbox ضمن إطار عمل محدد إذا كان ذلك يجعل التطوير أسهل. على سبيل المثال، يتم توفير create-react-app مع Workbox تلقائيًا. يتم تناول عمليات دمج أُطر العمل المختلفة مع Workbox في مقالة لاحقة.

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

ماذا لو لم يكن لديّ عملية تصميم؟

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

الخلاصة

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