تطبيقات الويب التقدّمية: استخدام Workbox

1. مرحبًا

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

أهداف الدورة التعليمية

• تحويل Service Worker حالي لاستخدام Workbox
• إضافة عنصر احتياطي بلا إنترنت إلى تطبيق ويب تقدّمي

ما يتعين عليك معرفته

• HTML وJavaScript الأساسيتان

المتطلبات

• متصفّح يتوافق مع Service Workers

2. إكمال الإعداد

ابدأ إما باستنساخ الرمز الأولي أو تنزيله لإكمال هذا الدرس التطبيقي حول الترميز:

استنساخ المستودع

تنزيل ملف Zip

إذا نسخت المستودع، تأكَّد من أنّك تستخدم الفرع pwa03--workbox. يحتوي ملف ZIP أيضًا على الرمز الخاص بهذا الفرع.

يتطلّب هذا الرمز الأساسي الإصدار 14 من Node.js أو إصدارًا أحدث. بعد توفّر الرمز، شغِّل npm ci من سطر الأوامر في مجلد الرمز لتثبيت جميع الملفات التابعة التي ستحتاج إليها. بعد ذلك، شغِّل npm start لبدء خادم التطوير الخاص بتجربة البرمجة.

يقدّم ملف README.md لرمز المصدر شرحًا لجميع الملفات الموزّعة. بالإضافة إلى ذلك، إليك الملفات الرئيسية الحالية التي ستعمل عليها خلال هذا الدرس العملي:

الملفات الرئيسية

• ‫service-worker.js - ملف مشغّل الخدمات الخاص بالتطبيق
• ‫offline.html: ملف HTML بلا إنترنت يتم استخدامه عندما لا تكون الصفحة متاحة

3- نقل البيانات إلى Workbox

بالنظر إلى عامل الخدمة الحالي، يبدو أنّه يمكن تقسيم التخزين المؤقت المسبق إلى خطوتَين:

• تخزين الملفات ذات الصلة مؤقتًا أثناء تثبيت Service Worker
• عرض هذه الملفات مرة أخرى باستخدام استراتيجية "من ذاكرة التخزين المؤقت فقط"

سيظل من المنطقي التخزين المؤقت المسبق للملف index.html والمسار /، لأنّ HTML الخاص بتطبيق الويب هذا لن يتغير كثيرًا، ولكن قد تتغير الملفات الأخرى، مثل CSS وJavaScript، ولا نريد أن نضطر إلى المرور بدورة حياة Service Worker بأكملها في كل مرة تتغير فيها. بالإضافة إلى ذلك، لا يأخذ عامل الخدمة الحالي في الاعتبار سوى مجموعة فرعية من CSS وJavaScript، ونريد تغطية كليهما. من المنطقي تخزين هذه العناصر مؤقتًا باستخدام استراتيجية "قديمة أثناء إعادة التحقّق"، ما يتيح تقديم استجابة سريعة يمكن تعديلها في الخلفية عند الحاجة.

إعادة النظر في التخزين المؤقت المسبق

عند الانتقال إلى Workbox، لن نحتاج إلى الاحتفاظ بأي من الرموز الحالية، لذا احذف كل شيء في service-worker.js. في التمرين المعملي السابق، أعددنا عامل الخدمة هذا ليتم تجميعه، حتى نتمكّن من استخدام عمليات استيراد ESModule هنا لإحضار Workbox من وحدات NPM الخاصة به. لنبدأ بإعادة النظر في التخزين المؤقت المسبق. في service-worker.js، أضِف الرمز التالي:

import { warmStrategyCache } from 'workbox-recipes';
import { CacheFirst } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

// Set up page cache
const pageCache = new CacheFirst({
  cacheName: 'page-cache',
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200],
    }),
    new ExpirationPlugin({
      maxAgeSeconds: 30 * 24 * 60 * 60,
    }),
  ],
});

warmStrategyCache({
  urls: ['/index.html', '/'],
  strategy: pageCache,
});

registerRoute(({ request }) => request.mode === 'navigate', pageCache);

لا تعمل بنية import ضمن Service Workers، لذا إذا كنت لا تستخدم WMR، عليك تجميع هذا الملف بطريقة أخرى. بالإضافة إلى ذلك، تنزّل WMR هذه التبعيات وتثبّتها تلقائيًا، لذا لن تحتاج إلى القلق بشأن تثبيتها بنفسك. إذا كنت لا تستخدم WMR، تذكَّر تثبيت هذه التبعيات من NPM.

الشرح

لإعداد التخزين المؤقت المسبق لتطبيقَي /index.html و/، يجب استرداد خمس وحدات. قد يبدو ذلك كثيرًا، ولكن هذا الرمز البرمجي أكثر فعالية من الرمز البرمجي السابق.

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

بعد ذلك، يتمّ تسخين ذاكرة التخزين المؤقّت للاستراتيجية باستخدام /index.html و/ من خلال وصفة Workbox لتسخين ذاكرة التخزين المؤقّت للاستراتيجية. سيؤدي ذلك إلى إضافة هذه العناصر إلى ذاكرة التخزين المؤقت هذه أثناء حدث التثبيت الخاص ببرنامج عامل الخدمة.

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

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

بعد الانتهاء من إعداد التخزين المؤقت المسبق للمسارات، حان الوقت لإعادة تنفيذ التخزين المؤقت لمواد العرض على الموقع الإلكتروني، أي CSS وJavaScript. لإجراء ذلك، أضِف أولاً StaleWhileRevalidate إلى عملية استيراد workbox-strategies، ثم أضِف الرمز التالي إلى أسفل Service Worker:

// Set up asset cache
registerRoute(
  ({ request }) => ['style', 'script', 'worker'].includes(request.destination),
  new StaleWhileRevalidate({
    cacheName: 'asset-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
);

الشرح

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

4. إضافة عنصر احتياطي بلا إنترنت

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

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

توفّر وصفات Workbox وصفة احتياطية بلا إنترنت يمكن استخدامها لإجراء ذلك. لاستخدامها، أضِف أولاً offlineFallback إلى عملية استيراد workbox-recipes، ثم أضِف الرمز التالي إلى أسفل Service Worker:

// Set up offline fallback
offlineFallback({
  pageFallback: '/offline.html',
});

الشرح

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

5- تهانينا!

لقد تعلّمت كيفية استخدام Workbox لإعداد استراتيجيات التخزين المؤقت للمسارات وتوفير عمليات احتياطية بلا إنترنت لتطبيق الويب التقدّمي.

الدرس العملي التالي في السلسلة هو IndexedDB