إنّ التخزين المؤقّت هو أحد أكثر الإجراءات شيوعًا التي ستنفّذها في عاملي الخدمات، ويوفِّر 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 أسهل بكثير مما لو اضطررت إلى إدارة التخزين المسبق بنفسك، خاصةً عندما يتعلق الأمر بمواد العرض ذات النُسخ المتعدّدة التي تم تجميعها من خلال الحِزم. ومع ذلك، فإن التخزين المسبق ليس هو الشيء الوحيد الذي من المحتمل أن تفعله في عامل الخدمات. أثناء المتابعة، ستتعلم أساليب أخرى، مثل التخزين المؤقت لوقت التشغيل.