تطبيقات الويب التقدّمية: طلب التثبيت وقياسه

1. مرحبًا

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

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

  • إنشاء زر مخصّص لتثبيت تطبيق PWA داخل التطبيق

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

  • JavaScript

المتطلبات

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

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

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

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

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

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

  • ‫js/main.js: ملف JavaScript الرئيسي للتطبيق

3- إعداد "زر التثبيت"

قبل إضافة طلبات التثبيت وتسجيل أحداث التثبيت، يجب إجراء بعض عمليات الإعداد. أولاً، أنشِئ ملفًا js/lib/install.js وأضِف الرمز التالي:

export class Install {
  /**
   * @param {DOMElement} trigger - Triggering element
   */
  constructor(trigger) {
    this._prompt;
    this._trigger = trigger;
  }

  /**
   * Toggle visibility of install button
   * @param {string} action
   */
  toggleInstallButton(action = 'hide') {
    if (action === 'hide') {
      this._trigger.style.display = 'none';
    } else {
      this._trigger.style.display = 'block';
    }
  }
}

بعد ذلك، في js/main.js في أسفل حدث DOMContentLoaded، أضِف الرمز التالي:

// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));

الشرح

يُعدّ هذا الرمز فئة Install التي سيتم استخدامها في الخطوة التالية، ويربطها بالتطبيق قيد التشغيل.

4. إضافة أدوات معالجة طلبات التثبيت

لاستخدام زر التثبيت لتفعيل عملية تثبيت تطبيق الويب التقدّمي، عليك تسجيل طلب التثبيت. بعد تثبيته، عليك إعادة ضبط طلب التثبيت الذي تم التقاطه. لإجراء ذلك، اكتب رمزًا برمجيًا لتنفيذ ما يلي في constructor في الفئة Install في js/lib/install.js:

التقاط طلب التثبيت

  • استمع إلى الحدث beforeinstallprompt على window.
  • منع تنشيط الحدث
  • تسجيل الطلب
  • عرض مشغّل زر التثبيت

إعادة ضبط الطلب عند التثبيت

  • استمع إلى الحدث appinstalled على window.
  • إعادة ضبط الطلب الذي تم التقاطه
  • إخفاء مشغّل زر التثبيت

5- بدء عملية التثبيت من زر داخل التطبيق

بعد التقاط الطلب، يجب أن يتمكّن زر التثبيت في تطبيق الويب التقدّمي من تشغيله. لإجراء ذلك، أضِف ما يلي إلى الفئة Install في js/lib/install.js:

  • طريقة async لبدء عملية التثبيت التي
    • يستخدم الطلب الذي تم التقاطه لطلب التثبيت
    • await اختيار المستخدم للطلب
    • إعادة ضبط الطلب
    • إخفاء زر التثبيت إذا قبل المستخدم طلب التثبيت
  • أضِف أداة معالجة الأحداث click إلى زر التثبيت في constructor للفئة الذي يستدعي مشغّل التثبيت.

6. تهانينا!

لقد تعرّفت للتو على كيفية بدء عملية تثبيت تطبيق PWA من زر التثبيت داخل التطبيق.

الدرس العملي التالي في السلسلة هو تعزيز إمكانات تطبيق الويب التقدّمي