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

1. مرحبًا

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

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

  • إضافة عامل مشترَك بين نوافذ متعددة مفتوحة
  • استخدام Comlink لتسهيل العمل مع العمال

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

  • JavaScript

المتطلبات

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

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

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

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

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

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

  • js/preview.js - ملف JavaScript الخاص بمعاينة الصفحة
  • ‫js/main.js: ملف JavaScript الرئيسي للتطبيق

3- كتابة عامل

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

للبدء، أنشئ ملفًا js/worker.js يتضمّن الرمز التالي:

import { expose } from 'comlink';
import { marked } from 'marked';

class Compiler {
  state = {
    raw: '',
    compiled: '',
  };
  subscribers = [];

  async set(content) {
    this.state = {
      raw: content,
      compiled: marked(content),
    };

    await Promise.all(this.subscribers.map((s) => s(this.state)));
  }

  subscribe(cb) {
    this.subscribers.push(cb);
  }
}

const compiler = new Compiler();

onconnect = (e) => expose(compiler, e.ports[0]);

الشرح

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

4. إرسال المحتوى إلى العامل

بعد إنشاء العامل، علينا الآن إرسال المحتوى إليه. لإجراء ذلك، عدِّل js/main.js لتنفيذ ما يلي:

  • استيراد عملية التصدير المُسمّاة wrap من comlink
  • أنشئ Shared Worker جديدًا من نوع وحدة باسم worker، واضبط نوعه على module، وأشِر إليه باستخدام النمط new URL (new URL('./worker.js', import.meta.url)).
  • أنشئ متغيّر compiler wrap worker.port
  • في دالة التعديل الخاصة بالمحرّر (editor.onUpdate)، بعد حفظ المحتوى في قاعدة البيانات، انتظِر إلى أن ينتهي compiler.set، مع تمرير المحتوى

الشرح

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

5- تعديل صفحة المعاينة

الخطوة الأخيرة هي إخراج المحتوى المجمَّع من العامل المشترَك إلى المعاينة. تتشابه خطوات الإعداد إلى حد كبير، ولكن بما أنّه لا يمكن نقل الدوال بين حدود العامل، يجب استخدام وكيل للدالة بدلاً من ذلك. نكرّر أنّ Comlink هنا لمساعدتك. يجب تحديث js/preview.js لتنفيذ ما يلي:

  • استيراد عمليات التصدير المُسمّاة wrap وproxy من comlink
  • أنشئ العامل المشترَك وغلِّفه كما فعلت في js/main.js
  • استدعِ طريقة subscribe للمترجم باستخدام دالة وكيل تضبط السمة compiled للبيانات الواردة على HTML الداخلي لمنطقة المعاينة

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

6. تهانينا!

تعرّفت على كيفية استخدام عامل مشترَك لمشاركة الحالة بين مثيلات متعددة من تطبيقات الويب التقدّمية.