تؤدي واجهتا برمجة تطبيقات دورًا مهمًا في إنشاء تطبيقات ويب موثوقة: Service Worker وCache Storage. ولكن استخدامها بفعالية، بدون إدخال أخطاء دقيقة أو مواجهة حالات استثنائية، قد يكون أمرًا صعبًا. على سبيل المثال، يمكن أن تؤدي الأخطاء في رمز مشغّل الخدمات إلى حدوث مشاكل في التخزين المؤقت، وقد يظهر للمستخدمين محتوى قديم أو روابط معطّلة.
Workbox هي مجموعة أدوات عالية المستوى لبرامج الخدمة تم إنشاؤها استنادًا إلى واجهات برمجة التطبيقات Service Worker وCache Storage. وتوفّر مجموعة من المكتبات الجاهزة للاستخدام من أجل إضافة ميزة العمل بلا إنترنت إلى تطبيقات الويب. تتألف مجموعة الأدوات من مجموعتَين: أدوات تساعد في إدارة الرموز البرمجية التي يتم تشغيلها داخل مشغّل الخدمات، وأدوات تتكامل مع عملية الإنشاء.
رمز وقت التشغيل
هذا هو الرمز الذي يتم تشغيله داخل نص مشغّل الخدمات ويتحكم في كيفية اعتراض الطلبات الصادرة والتفاعل مع واجهة برمجة تطبيقات تخزين ذاكرة التخزين المؤقت. يحتوي Workbox على حوالي اثنتي عشرة وحدة مكتبة في المجمل، يتعامل كل منها مع مجموعة متنوعة من حالات الاستخدام المتخصصة. تحدّد الوحدات الأكثر أهمية ما إذا كان مشغّل الخدمات سيستجيب (يُعرف باسم التوجيه)، وكيفية استجابته (يُعرف باسم استراتيجية التخزين المؤقت).
إنشاء عملية دمج
يوفّر Workbox أدوات سطر الأوامر ووحدة Node.js والمكوّن الإضافي webpack التي توفّر طرقًا بديلة لإنجاز أمرَين:
- يمكنك إنشاء نص برمجي لعامل الخدمة استنادًا إلى مجموعة من خيارات الإعدادات. يستخدم مشغّل الخدمات الذي تم إنشاؤه مكتبات وقت التشغيل في Workbox "في الخلفية" لتنفيذ استراتيجيات التخزين المؤقت التي تضبطها.
- يمكنك إنشاء قائمة بعناوين URL التي يجب "تخزينها مؤقتًا"، استنادًا إلى أنماط قابلة للضبط لتضمين واستبعاد الملفات التي تم إنشاؤها أثناء عملية الإنشاء.
لماذا يجب استخدام Workbox؟
إنّ استخدام Workbox عند إنشاء مشغّل الخدمات هو أمر اختياري، فهناك عدد من الأدلة التي تشرح استراتيجيات التخزين المؤقت الشائعة من منظور مشغّل الخدمات "الأساسي". إذا قررت استخدام Workbox، فإليك بعض فوائده.
إدارة ذاكرة التخزين المؤقت
يتولّى Workbox معالجة تحديثات ذاكرة التخزين المؤقت نيابةً عنك، إما من خلال ربطها بعملية الإنشاء عند استخدام التخزين المؤقت المُسبَق، أو من خلال سياسات الحجم/العمر القابلة للضبط عند استخدام التخزين المؤقت في وقت التشغيل. تتميّز واجهة Cache Storage API الأساسية بفعاليتها، ولكنّها لا تتضمّن أي دعم مدمج لانتهاء صلاحية ذاكرة التخزين المؤقت. وتسدّ أدوات مثل Workbox هذه الفجوة.
تسجيل شامل وError Reporting
عند البدء في استخدام مشغّلي الخدمات، قد يكون من الصعب معرفة سبب تخزين شيء ما مؤقتًا (أو، على نحو محبط أيضًا، سبب عدم تخزينه مؤقتًا).
يرصد Workbox تلقائيًا عندما تشغّل إصدارًا قيد التطوير من موقعك الإلكتروني على localhost، ويفعّل تسجيل تصحيح الأخطاء في وحدة تحكّم JavaScript في المتصفّح.
من خلال متابعة الرسائل المسجّلة، يمكنك الوصول إلى جذور أي مشاكل في الإعداد أو الإبطال بسرعة أكبر بكثير مما لو كنت تحاول حلّها بمفردك.
قاعدة رموز برمجية تم اختبارها وتعمل على جميع المتصفحات
يتم تطوير Workbox وفقًا لحزمة اختبارية تعمل على جميع المتصفحات، وعند الإمكان، يتم الرجوع تلقائيًا إلى عمليات التنفيذ البديلة للميزات غير المتوفّرة في متصفحات معيّنة.
- تستخدم
workbox-broadcast-cache-update moduleواجهة برمجة تطبيقات Broadcast Channel عند توفّرها، وتعود إلى تنفيذ مستند إلىpostMessage()على المتصفّحات التي لا تتوفّر فيها هذه الواجهة. - تستخدم وحدة workbox-background-sync واجهة برمجة التطبيقات Background Sync API إن أمكن، وإلا ستتم إعادة محاولة تنفيذ الأحداث في قائمة الانتظار في كل مرة يتم فيها تشغيل مشغّل الخدمات.
كيف يمكنك استخدام Workbox؟
دمج إطار العمل
إذا كنت تبدأ مشروعًا جديدًا من الصفر، يمكنك الاستفادة من دمج Workbox المتوفّر في العديد من مجموعات المبتدئين والمكوّنات الإضافية الشائعة:
إضافة Workbox إلى عملية الإنشاء الحالية
إذا كانت لديك عملية إنشاء لموقعك الإلكتروني، قد يكون كل ما تحتاجه لبدء استخدام Workbox هو إضافة أداة سطر الأوامر أو وحدة Node.js أو المكوّن الإضافي webpack المناسب.
على وجه الخصوص، تسهّل واجهة سطر أوامر 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',
})
);