إطار العمل: مجموعة أدوات مشغّلي الخدمات عالية المستوى

Jeff Posnick

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

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

رمز وقت التشغيل

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

بناء عملية الدمج

يوفر مربع العمل أدوات لكل من سطر الأوامر ووحدة Node.js ومكوّن Webpack الإضافي التي توفر طرقًا بديلة لتنفيذ أمرين:

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

لماذا يجب عليك استخدام Workbox؟

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

إدارة ذاكرة التخزين المؤقت

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

التسجيل على نطاق واسع وإعداد تقارير الأخطاء

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

تسجيل "مربع العمل" إلى وحدة تحكُّم "أدوات مطوري البرامج"

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

قاعدة رموز برمجية تم اختبارها عبر المتصفحات

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

كيف يجب استخدام Workbox؟

دمج إطار العمل

إذا كنت تبدأ مشروعًا جديدًا من الصفر، يمكنك الاستفادة من تكامل Workbox في العديد من مجموعات أدوات المبتدئين الشائعة والمكوّنات الإضافية الإضافية:

إضافة Workbox إلى عملية التصميم الحالية

إذا كانت لديك عملية تصميم لموقعك الإلكتروني، قد يكون كل ما تحتاجه لبدء استخدام Workbox هو إضافة سطر الأوامر المناسب أو وحدة Node.js أو أداة مكوّن حزمة الويب.

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

workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js

لإنشاء مشغّل الخدمات، شغِّل workbox generateSW workbox-config.js كجزء من عملية التصميم. اطّلِع على مستندات "generateSW" للحصول على التفاصيل. يمكنك تخصيص مشغّل الخدمات بصورة أكبر من خلال إجراء تغييرات على workbox-config.js. يمكنك الاطّلاع على مستندات الخيارات للحصول على مزيد من التفاصيل.

استخدام Workbox في وقت التشغيل لدى مشغّل خدمات حالي

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

// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.routing.registerRoute(
  new RegExp('\.png$'),
  workbox.strategies.cacheFirst({
    cacheName: 'images-cache',
  })
);