توفير تجربة تثبيت مخصصة داخل تطبيق الويب التقدمي PWA

تتيح معظم المتصفحات تثبيت تطبيق صفحات الويب التقدميّة PWA والترويج له من داخل واجهات التطبيق مباشرًة، مما يُسهّل عملية تثبيت التطبيق (إضافته إلى الشاشة الرئيسة Add to Home Screen) سواًء على الجوّال أو على سطح المكتب. يؤدي تثبيت التطبيق إلى إضافته للمُشغّل launcher وبالتالي تشغيله مثل أي تطبيق آخر.

يُمكن لمطور التطبيق تخصيص تسلسل خطوات تثبيته مباشرًة داخل التطبيق وذلك إضافًة لسلوك التثبيت المتوفر في المتصفح.

من الأفضل الآخذ بعين الاعتبار لاستخدامات التطبيق PWA قبل التخطيط لترويج تثبيته promote install. فمن أجل التطبيقات التي يُشغلّها المستخدمون عدة مرات في الأسبوع، سيكون من المريح لهم تشغيل التطبيق من الشاشة الرئيسية للجوّال أو من قائمة ابدأ Start menu في نظام تشغيل سطح المكتب. أما بالنسبة لتطبيقات الإنتاج والترفيه، فسيكون من الأنسب تشغيلها في وضع ملء الشاشة بعد إزالة أشرطة أدوات المتصفح للاستفادة من كامل المساحة الممكنة وذلك باستخدام أحد الوضعين: المستقل standalone أو الحد الأدنى لواجهة المستخدم minimal-ui.

يُبين الشكل التالي زر التثبيت Install App في التطبيق Spotify مثلًا:

اقتراح تثبيت تطبيق الويب التقدمي

لتوضيح إمكانية تثبيت تطبيق PWA وتوفير تسلسل مخصص لخطوات التثبيت من داخل التطبيق:

1. استمع لحدث "قبل طلب التثبيت" beforeinstallprompt.
2. احفظ الحدث beforeinstallprompt لاستخدامه لاحقًا في تشغيل خطوات التثبيت.
3. أعلم المستخدم بإمكانية تثبيت التطبيق ووفر زر أو عنصر آخر لتبدأ منه خطوات التثبيت.

ملاحظة: أُزيل كل من الحدث beforeinstallprompt والحدث appinstalled من توصيف ملف بيان التطبيق manifest file إلى ملف حضانة بيان الويب (وهو ملف يحوي المواصفات غير المعتمدة لغاية الآن بشكل نهائي). التزم فريق تطوير المتصفح Chrome بدعم هذه الأحداث وعدم إزالتها أو توقيفها، كما يواصل فريق التطوير Web DevRel من Google التوصية باستخدامها لتوفير تجربة تثبيت مخصصة.

الاستماع لحدث "قبل طلب التثبيت"

إذا كان التطبيق يحترم معايير التثبيت المطلوبة، فسيشغّل المستعرض حدث "قبل طلب التثبيت" beforeinstallprompt. يجب حفظ مرجع لهذا الحدث وتحديث واجهة المستخدم لتدل على إمكانية التثبيت:

// ‫تهيئة المتغير deferredPrompt للاستخدام اللاحق كي يعرض المتصفح طلب التثبيت للمستخدم
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // منع شريط المعلومات الصغير من الظهور على الجوّال
  e.preventDefault();

  // حفظ الحدث لتشغيله لاحقًا
  deferredPrompt = e;

  // تعديل واجهة المستخدم لإعلامه بإمكانية تثبيت التطبيق
  showInstallPromotion();

  // يُمكن بشكل خياري تشغيل حدث التحليل لإعلامه بأنه عُرض للمستخدم ترويج للتطبيق
  console.log(`'beforeinstallprompt' event was fired.`);
});

ملاحظة: يوجد العديد من النماذج المختلفة التي يُمكن استخدامها لإعلام المستخدم بإمكانية تثبيت التطبيق وتوفير تسلسل خطوات التثبيت داخل التطبيق. من النماذج الشهيرة وضع زر في الترويسة header أو عنصر في قائمة التنقل navigation menu أو عنصر في تغذية المحتوى content feed.

خطوات التثبيت من داخل التطبيق

يُمكن إتاحة التثبيت من داخل التطبيق بتوفير زر أو أي عنصر واجهة آخر بحيث تبدأ خطوات التثبيت عند النقر عليه، وعندها يجب استدعاء التابع "طلب" prompt على الحدث "قبل طلب التثبيت" beforeinstallprompt المحفوظ في المتغير deferredPrompt، والذي يُظهر مربع حوار منبثق شرطي طالبًا من المستخدم تأكيد رغبته بتثبيت التطبيق.

buttonInstall.addEventListener('click', async () => {
  // إخفاء ترويج تثبيت التطبيق
  hideInstallPromotion();
  // إظهار طلب التثبيت
  deferredPrompt.prompt();
  // انتظار تجاوب المستخدم مع الطلب
  const { outcome } = await deferredPrompt.userChoice;
  // إرسال حدث تحليل خيارات المستخدم بشكل اختياري
  console.log(`User response to the install prompt: ${outcome}`);
  // إزالة الطلب المُستخدّم إذ لا يُمكن استخدامه ثانيًة
  deferredPrompt = null;
});

تُعدّ الخاصية "خيار المستخدم" userChoice بمثابة وعد promise يتحقق حال اختار المستخدم رفض أو قبول التثبيت. يُمكن استدعاء التابع prompt على الحدث المؤجل مرة واحدة، أما إذا رفض المستخدم الطلب فيجب الانتظار حتى تشغيل الحدث beforeinstallprompt مرًة أخرى (بعد تحقيق الوعد userChoice مباشرًة).

التحقق من تثبيت تطبيق الويب التقدمي

يُمكن استخدام الوعد "خيار المستخدم" userChoice لتحديد فيما إذا ثبّت المستخدم التطبيق من داخل واجهته، أما إذا كان التثبيت من شريط العنوان أو من أي مكون في المتصفح فلن يُساعد هذا الوعد بأي شيء وعندها يجب الاستماع للحدث appinstalled الذي يُطلق عندما يُثبت التطبيق دون النظر لآلية التثبيت.

window.addEventListener('appinstalled', () => {
  // إخفاء ترويج تثبيت التطبيق
  hideInstallPromotion();
  // مسح المتغير ليُزال في مرحلة التنظيف
  deferredPrompt = null;
  // إضافة حدث التحليل للإعلام عن تثبيت ناجح بشكل اختياري
  console.log('PWA was installed');
});

الكشف عن آلية فتح التطبيق

يُحدّد استعلام الوسائط لخاصية "نمط العرض" display-mode من الأنماط CSS طريقة فتح التطبيق وذلك إما في تبويب المتصفح أو كتطبيق مُثبّت، وبالتالي يُمكن تطبيق أنماط styles مختلفة وفق كيفية فتح التطبيق. مثلًا: يجب إخفاء زر التثبيت وتوفير زر الرجوع Back عند الفتح كتطبيق منفصل.

تتبع آلية فتح التطبيق

يُمكن استخدام التابع matchMedia لاختبار استعلام الوسائط display-mode لتتبع كيفية فتح التطبيق من قبل المستخدمين. بما أن المتصفح Safari على iOS لا يدعم ذلك حتى الآن، فيجب اختبار قيمة الراية navigator.standalone والتي تكون صحيحة إذا كان المتصفح يعمل بوضع "المستقل" standalone.

function getPWADisplayMode() {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  if (document.referrer.startsWith('android-app://')) {
    return 'twa';
  } else if (navigator.standalone || isStandalone) {
    return 'standalone';
  }
  return 'browser';
}

تتبع تغيير وضع العرض

يُمكن الاستماع لتغيرات قيمة استعلام الوسائط display-mode لمعرفة فيما إذا انتقل المستخدم من الوضع المستقل standalone إلى وضع تبويب المتصفح browser tab.

window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
  let displayMode = 'browser';
  if (evt.matches) {
    displayMode = 'standalone';
  }
  // إعلام التحليل بتغيير العرض
  console.log('DISPLAY_MODE_CHANGED', displayMode);
});

تحديث واجهة المستخدم وفق نمط العرض الحالي

يُمكن تطبيق ألوان خلفية مختلفة عند فتح التطبيق كأي تطبيق مثبّت باستخدام تنسيق CSS شرطي:

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

تحديث أيقونة واسم التطبيق

يُمكن استخدام ملف بيان الويب لتحديث أيقونة واسم التطبيق. للمزيد يُمكن العودة إلى كيف يعالج المتصفح تحديثات ملف بيان الويب.

ترجمة -وبتصرف- للمقال How to provide your own in-app install experience للمؤلف Pete LePage.

اقرأ أيضًا

• مدخل إلى تطبيقات الويب التقدمية PWA
• تشغيل تطبيقات الويب التقدمية PWA في وضع انقطاع الاتصال
• شرح ملف البيان manifest لتطبيق الويب التقدمي PWA
• نماذج اقتراحات تثبيت تطبيقات الويب التقدمية PWA