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

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