تطبيقات الويب التقدّمية: تتضمّن مشغّل الخدمات

1. مرحبًا

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

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

  • إضافة استجابة بث إلى عامل الخدمة

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

  • JavaScript

المتطلبات

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

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

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

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

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

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

  • js/preview.js: معاينة ملف JavaScript الخاص بالصفحة
  • ‫service-worker.js: ملف مشغّل الخدمات لتطبيق الويب التقدّمي

3- معاينة البث

يمكن تقسيم صفحة المعاينة إلى ثلاثة أجزاء واضحة: العنوان والنص الأساسي المجمَّع والتذييل. في الوقت الحالي، يتم عرض النص الأساسي المجمَّع من جهة العميل، ولكن ليس هناك سبب لذلك. لننقله إلى Service Worker.

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

لإجراء ذلك، عليك أولاً محو المحتوى في js/preview.js للتأكّد من أنّه لم يعُد يجمع المعلومات. بعد ذلك، في service-worker.js، نفِّذ ما يلي:

  • استيراد العنصر المصدَّر المُسمّى strategy من workbox-streams باسم streamsStrategy
  • استيراد التصدير المُسمّى openDB من idb واستيراد التصدير المُسمّى marked من marked
  • قبل تسجيل المسار لعمليات التنقّل، أضِف تسجيل مسار جديدًا
    • يجب أن يتحقّق من أنّ pathname عنوان URL هو /preview
    • يجب أن تستخدم استراتيجية بث
      1. الردّ باستخدام محتوى preview/index.html من خلال منطقة المحتوى في العلامة main
      2. أجب بدالة تفتح settings-store IndexedDB، وتحصل على المحتوى من مخزن عناصر settings، وتعرض نسخة من المحتوى بتنسيق Markdown.
      3. أضِف علامات الإغلاق main وbody وhtml.

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

4. تهانينا!

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

إنّ الدرس العملي التالي في السلسلة هو العمل مع العاملين.