طرق Workbox

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

"generateSW" ضد "injectManifest"

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

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

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

عليك استخدام generateSW في الحالات التالية:

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

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

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

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

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

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

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

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

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

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

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

استخدام أدوات إنشاء مربع العمل

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

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

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

workbox-cli

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

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 لأنّ webpack تعرف مسبقًا الأماكن التي يتم تجميع أصول الإنتاج فيها.

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

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

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

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

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

الخاتمة

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