الإعداد المسبق باستخدام Workbox

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

جارٍ التحضير باستخدام "generateSW"

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

تنفِّذ generateSW مهام مختلفة تلقائيًا بناءً على أداة التصميم التي تستخدمها. عند استخدام workbox-webpack-plugin، لن تضطر إلى تحديد أي خيارات للإعدادات. سيخزن المكوّن الإضافي تلقائيًا كل ما تتضمنه حزمة الويب في الرسم البياني للتبعية ويكتب مشغّل خدمات يُسمى service-worker.js في الدليل المحدد بواسطة output.path

من ناحية أخرى، إذا كنت تستخدم workbox-build أو workbox-cli، سيتم بشكل تلقائي التخزين المؤقت بشكل مسبق تخزين مواد عرض HTML وCSS وJavaScript التي تتم قراءتها من نظام الملفات المحلي. من ناحية الإعدادات، عليك تحديد الخيار swDest وglobDirectory في إعدادات generateSW لكي يعمل التخزين المؤقت مسبقًا. من المحتمل أنك ستحتاج إلى ضبط خيارات إضافية تؤثر في سلوك مشغّل الخدمات أيضًا، لذا ألق نظرة على المستندات.

جارٍ التحضير باستخدام "injectManifest"

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

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

يمكن تعديل قائمة الإدخالات في بيان ذاكرة التخزين المؤقت باستخدام خيارات ضبط إضافية.

مقارنة جنبًا إلى جنب

انقر على كلّ علامة من علامات التبويب أدناه لمقارنة استخدام طريقتَي generateSW وinjectManifest:

بما أنّ generateSW ينشئ مشغّل خدمات، ما عليك سوى تحديد إعداد. في ما يلي مثال على استخدام السمة workbox-build:

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

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

يمكن بعد ذلك إنشاء مشغّل الخدمات على سطر الأوامر باستخدام أداة Node:

node build-sw.js

بما أنّ injectManifest تتطلّب مشغّل خدمات مصدر، فإن المثال الذي لا يمكن تنفيذه على الإطلاق يتطلب ملف مشغّل خدمة المصدر. إذا كان كل ما هو مطلوب هو التخزين المؤقت، قد يبدو عامل خدمة الإدخال هذا على النحو التالي:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

سجِّل سلسلة self.__WB_MANIFEST. هذا عنصر نائب يستبدله Workbox ببيان التخزين المؤقت المسبق. في ما يلي إعدادات صالحة لحالة الاستخدام هذه:

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

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

الخلاصة

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