Workbox

يمكن أن تمثّل عملية الحفاظ على عامل الخدمة ومنطق تخزين ذاكرة التخزين المؤقت تحديًا مع نمو تطبيق الويب التقدّمي (PWA). Workbox، هي مجموعة من المكتبات المفتوحة المصدر لمساعدتك في إجراء ذلك. يدمج Workbox واجهات برمجة التطبيقات ذات المستوى المنخفض، مثل Service Worker API وcache Storage API، ويعرض واجهات أكثر ملاءمة للمطوّرين.

ويمكن أن تساعد في مطابقة استراتيجيات التخزين المؤقت مع المسارات (أو أنماط التوجيه)، والعمل مع مجموعات البث واستخدام ميزات مثل المزامنة في الخلفية مع العناصر الاحتياطية المناسبة.

يمكن أن يساعدك Workbox في إدارة احتياجات التخزين المؤقت لمواد العرض وعرضها. وهو أيضًا المكتبة الأكثر استخدامًا لدى مشغِّلي الخدمات، ويستخدمها 54% من المواقع الإلكترونية للأجهزة الجوّالة ويتم استخدامه في العديد من أدوات التصميم وواجهات برمجة التطبيقات، بما في ذلك Angular CLI وCreate-React-App وVue CLI. هناك أيضًا مكوّنات إضافية لمعظم المكتبات وأُطر العمل الأخرى، مثل Next.js.

زيادة بنسبة %54

تستخدم المواقع الإلكترونية للأجهزة الجوّالة التي تتضمن مشغّلي الخدمات مكتبة Workbox.

.

وحدات "مربع العمل"

يتضمّن Workbox العديد من المكتبات، تُسمى الوحدات الداخلية، وتركِّز كل منها على جانب مختلف من إدارة الأصول وسلوك عاملي الخدمات.

تعمل وحدات "إطار العمل" في سياقات مختلفة، مثل:

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

في ما يلي بعض الوحدات الشائعة:

  • توجيه إطار العمل: عندما يعترض مشغّل الخدمة طلب، توجِّه هذه الوحدة الطلبات إلى وظائف مختلفة تقدّم استجابات.fetch
  • استراتيجيات إطار العمل: هي مجموعة من استراتيجيات التخزين المؤقت في وقت التشغيل التي تعالج الطلب، مثل ذاكرة التخزين المؤقت أولاً والقديمة أثناء إعادة التحقق. إنّها تنفيذ للاستراتيجيات المختلفة المذكورة في فصل العرض.
  • workbox-precaching: هي عملية تنفيذ للملفات في ذاكرة التخزين المؤقت في معالِج أحداث install لدى مشغّل الخدمات (المعروف أيضًا باسم "التخزين المؤقت للصفحات")، كما هو مذكور في فصل التخزين المؤقت. من خلال هذه الوحدة، يمكنك بسهولة تخزين مجموعة من الملفات مؤقتًا وإدارة تحديثاتها بفعالية. سنتناول تعديل مواد العرض في فصل التعديل.
  • workbox-expiration: هي مكوّن إضافي يُستخدم مع استراتيجيات التخزين المؤقت لإزالة الطلبات المخزّنة مؤقتًا استنادًا إلى عدد العناصر في ذاكرة التخزين المؤقت أو استنادًا إلى عمر الطلب المخزن مؤقتًا. يساعد في إدارة ذاكرات التخزين المؤقت ويضع حدودًا للوقت وعدد العناصر في كل ذاكرة تخزين مؤقت.
  • workbox-window: مجموعة من الوحدات المخصّصة للتشغيل في سياق النافذة، أي داخل صفحات الويب في تطبيق الويب التقدّمي (PWA). يمكنك تبسيط عملية تسجيل عاملي الخدمات وتحديثاتهم، كما يمكنك تسهيل التواصل بين الرمز البرمجي الذي يتم تشغيله في سياق مشغّل الخدمات وسياق النافذة.

استخدام Workbox

يوفّر Workbox طرقًا مختلفة للدمج في تطبيق الويب التقدّمي (PWA). يمكنك اختيار الطريقة التي تناسب بنية تطبيقك بشكل أفضل:

  • Workbox CLI: أداة سطر أوامر تنشئ مشغّل خدمات كامل أو تُدخل بيانًا في ذاكرة التخزين المؤقت مسبقًا أو تنسخ ملفات Workbox المطلوبة.
  • إصدار Workspace: وحدة npm تعمل على إنشاء مشغّل خدمات كامل وإدخال بيان خاص بالتخزين المؤقت للصفحات ونسخ ملفات Workbox. من المفترض أن يتم دمجها في عملية التصميم الخاصة بك.
  • workbox-sw: طريقة لتحميل حِزم مشغّل خدمات Workbox من شبكة توصيل محتوى (CDN) لا تستخدم عملية تصميم.

يوفّر Workbox CLI معالجًا يرشدك خلال إنشاء مشغّل الخدمات. لتشغيل المعالج، اكتب ما يلي في سطر الأوامر:

npx workbox-cli wizard

واجهة سطر الأوامر لمربع العمل قيد التشغيل في طرفية

التخزين المؤقت والعرض باستخدام Workbox

من بين الاستخدامات الشائعة لـ Workbox استخدام وحدات التوجيه والاستراتيجيات معًا لتخزين الملفات وعرضها مؤقتًا.

تقدّم الوحدة استراتيجيات إطار العمل بشكل غير تقليدي استراتيجيات التخزين المؤقت التي تمت مناقشتها في فصلَي مواد العرض والبيانات والعرض.

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

بعد مطابقة المسارات مع الاستراتيجيات، يوفّر Workbox أيضًا إمكانية فلترة الردود التي ستتم إضافتها إلى ذاكرة التخزين المؤقت باستخدام المكوّن الإضافيworkbox-cacheable-response. وباستخدام هذا المكون الإضافي، يمكنك، على سبيل المثال، تخزين الردود التي تم عرضها بدون أخطاء في ذاكرة التخزين المؤقت فقط.

يستخدم نموذج الرمز البرمجي التالي استراتيجية التخزين المؤقت أولاً (من خلال وحدة CacheFirst) لتخزين وعرض عمليات التنقّل في الصفحات في ذاكرة التخزين المؤقت.

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

const pageStrategy = new CacheFirst({
  // Put all cached files in a cache named 'pages'
  cacheName: 'pages',
  plugins: [
    // Only requests that return with a 200 status are cached
    new CacheableResponsePlugin({
      statuses: [200],
    }),
  ],
});

يسمح لك هذا المكوّن الإضافي بالاستفادة من ذاكرة التخزين المؤقت في Workbox وطلب دورة حياة الحلّ. يتم هنا استخدام CacheableResponsePlugin لتخزين الطلبات التي تؤدي إلى ظهور الحالة 200 في ذاكرة التخزين المؤقت فقط، ما يمنع حفظ الطلبات غير الصالحة في ذاكرة التخزين المؤقت.

بعد إنشاء الإستراتيجية، يحين وقت تسجيل مسار لاستخدامه. يستدعي المثال التالي registerRoute()، ويمرر كائن طلب إلى رد الاتصال الخاص به. إذا كانت قيمة request.mode هي "navigate"، ستستخدم استراتيجية CacheFirst (هنا تُعرف باسم pageStrategy) المحدّدة في مثال الرمز السابق.

// Cache page navigations (HTML) with a Cache First strategy
registerRoute( ({ request }) => request.mode === 'navigate',
  pageStrategy );

راجِع مستندات Workspace للاطّلاع على مزيد من الأمثلة وأفضل الممارسات.

احتياطي بلا إنترنت

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

في هذا المثال، يوفّر الجمع بين Workbox وCache Storage API عنصرًا احتياطيًا بلا اتصال بالإنترنت باستخدام استراتيجية ذاكرة التخزين المؤقت فقط. أولاً، يتم فتح ذاكرة التخزين المؤقت لتطبيق offline-fallbacks وإضافة مصفوفة من العناصر الاحتياطية بلا إنترنت إلى ذاكرة التخزين المؤقت خلال مراحل عملية تثبيت مشغّل الخدمة.

import { setCatchHandler } from 'workbox-routing';

// Warm the cache when the service worker installs
self.addEventListener('install', event => {
  const files = ['/offline.html']; // you can add more resources here
  event.waitUntil(
    self.caches.open('offline-fallbacks')
        .then(cache => cache.addAll(files))
  );
});

بعد ذلك، في setCatchHandler()، يتم تحديد وجهة الطلب الذي أدى إلى حدوث خطأ، ويتم فتح ذاكرة التخزين المؤقت offline-fallbacks. إذا كانت الوجهة مستندًا، يتم عرض محتوى الإجراء الاحتياطي بلا اتصال بالإنترنت إلى المستخدم. وإذا لم يتوفّر ذلك، أو لم تكن الوجهة مستندًا (مثل صورة أو ورقة أنماط)، يتم عرض استجابة خطأ. ويمكنك توسيع هذا النمط ليس فقط للمستندات، ولكن للصور والفيديوهات والخطوط، وأي شيء تريد تقديمه كإجراء احتياطي بلا اتصال بالإنترنت.

// Respond with the fallback if a route throws an error
setCatchHandler(async (options) => {
  const destination = options.request.destination;
  const cache = await self.caches.open('offline-fallbacks');
  if (destination === 'document') {
    return (await cache.match('/offline.html')) || Response.error();
  }
  return Response.error();
});

Recipes

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

التخزين المؤقت لمواد العرض وتعديلها

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

التشغيل باستخدام Workbox

يمكنك تشغيل Workbox على الفور باستخدام الدرس التطبيقي حول الترميز:

المراجِع