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

Jeff Posnick

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

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

رمز بيئة التشغيل

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

بناء التكامل

عروض Workbox سطر الأوامر، وحدة Node.js، أو المكوّن الإضافي webpack الأدوات التي توفر طرقًا بديلة لإنجاز أمرين:

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

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

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

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

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

التسجيل الشامل والإبلاغ عن الأخطاء

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

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

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

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

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

كيف يمكنك استخدام Workbox؟

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

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

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

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

وعلى وجه الخصوص، تسهّل واجهة سطر أوامر 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',
  })
);