الرصد

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

• حالة مربّع حوار دعوة التثبيت ونتيجة ذلك
• اكتمل التثبيت.
• يتم نقل التنقّل من المتصفّح إلى نافذة تطبيق الويب التقدّمي (PWA) والعكس.
• حالة تثبيت تطبيق الويب التقدّمي (PWA).
• تم تثبيت تطبيق ذي صلة من متجر التطبيقات.

ويمكنك استخدام هذه البيانات لإجراء إحصاءات بهدف فهم الخيارات المفضّلة للمستخدمين وتخصيص تجربتهم. لتسجيل هذه الأحداث، يمكنك استخدام أدوات مثل الاستعلامات عن الوسائط أو الأحداث من "window" أو استخدام واجهات برمجة التطبيقات التي يمكنك العثور عليها المدرجة هنا.

جارٍ رصد وضع العرض

لتتبُّع كيفية تشغيل المستخدمين لتطبيق الويب التقدّمي (PWA)، يمكنك استخدام matchMedia() لاختبار الاستعلام عن الوسائط في display-mode.

window.addEventListener('DOMContentLoaded', () => {
  let displayMode = 'browser tab';
  if (window.matchMedia('(display-mode: standalone)').matches) {
    displayMode = 'standalone';
  }
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});

إذا استخدمت هذا المثال، لا تنسَ مطابقة وضع العرض من بيان تطبيق الويب، على سبيل المثال، standalone أو minimal-ui أو fullscreen. يمكنك أيضًا مطابقة استعلامات متعددة في سلسلة الاستعلام عن الوسائط باستخدام شروط مفصولة بفواصل.

يمكنك أيضًا إضافة مَعلمة طلب بحث إلى start_url في البيان يمكنك الحصول عليها من خلال الإحصاءات لتتبُّع الإحصاءات حول وقت استخدام تطبيق الويب التقدّمي (PWA) وطريقة استخدامه ومقدار استخدامه.

.

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

عندما يقبل المستخدم طلب التثبيت في المتصفّح، يتم إطلاق حدث "appinstalled" على المتصفّحات المستندة إلى Chromium. من الاستخدامات الرائعة لمعالِج الأحداث هذا إزالة أي إعلان ترويجي للتثبيت داخل التطبيق.

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

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

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

نقل الجلسة

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

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

في الصورة التالية، يمكنك الاطّلاع على عنصر القائمة في جهاز Android عندما يكون التطبيق مثبَّتًا مسبقًا.

النقل بعد التثبيت

من متصفحات سطح المكتب، يتم نقل التنقل الحالي فورًا إلى التطبيق عند تثبيته. يتم إغلاق علامة تبويب المتصفِّح، وفتح التطبيق المُثبَّت حديثًا، ومتابعة ما كان يفعله المستخدم.

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

جارٍ رصد عملية التحويل

لاكتشاف عملية النقل بين المتصفِّح والنافذة، يمكنك استخدام الاستعلام عن الوسائط:

window.addEventListener('DOMContentLoaded', () => {
  // replace standalone with your display used in manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', (evt) => {
      let displayMode = 'browser';
      if (evt.matches) {
        displayMode = 'standalone';
      }
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', displayMode);
    });
});

وحدة التخزين المعزولة على نظامَي التشغيل iOS وiPadOS

على نظامَي التشغيل iOS وiPadOS، لا يمكن التنقّل أو نقل عناوين URL بين المتصفّح والرمز المُثبَّت. حتى إذا كان هو نفسه تطبيق الويب التقدّمي (PWA)، سيحتوي كل رمز تطبيق ويب تقدّمي (PWA) يثبّته المستخدم على مساحة تخزين خاصة به، معزولة عن علامة التبويب في Safari والرموز الأخرى. عندما يفتح المستخدم الرمز المثبَّت، لا تتم مشاركة مساحة التخزين في متصفّح Safari. إذا كان تطبيق الويب التقدّمي PWA يحتاج إلى تسجيل الدخول، سيحتاج إلى تسجيل الدخول مرة أخرى. إذا تمت إضافة التطبيق إلى الشاشة الرئيسية عدة مرات، يكون لدى المستخدم جلسة مختلفة لكل مثيل PWA.

تطبيقات ذات صلة

يشير الموقع الإلكتروني إلى علاقة مع تطبيق من خلال البيان. لإجراء ذلك، استخدِم عضو related_applications في مواصفات بيان تطبيق الويب. المفتاح related_applications هو مصفوفة من العناصر التي تمثّل كل تطبيق ذي صلة. يحتوي كل إدخال على platform وurl وسمة id اختيارية.

في ما يلي قيم المنصّات المحتمَلة:

• chrome_web_store: "سوق Google Chrome الإلكتروني"
• play: تطبيقات Google Play (نظاما التشغيل Android وChromeOS)
• chromeos_play: ChromeOS Play
• webapp: تطبيقات الويب
• windows: Microsoft Store (نظاما التشغيل Windows 10 وWindows 11)
• f-droid: F-droid
• amazon: Amazon AppStore (FireOS)

تفضيل تطبيق ذي صلة

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

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

{
  ...
  "related_applications:" [
     {
       "platform": "play",
       "url": "https://play.google.com/..."
     }
  ],
  "prefer_related_applications": true
}

إعلانات بانر للتطبيقات الذكية من Apple

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

جارٍ رصد التطبيقات المثبَّتة ذات الصلة

تسمح طريقة getInstalledRelatedApps() لموقعك الإلكتروني بالتحقّق مما إذا كان تطبيق iOS/Android/الكمبيوتر المكتبي أو تطبيق الويب التقدّمي (PWA) مثبّتَين على جهاز المستخدم.

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

تسمح لك أدوات، مثل BubbleWrap أو PWA Builder، التي تسمح لك بنشر تطبيق الويب التقدّمي (PWA) الخاص بك في متاجر التطبيقات، بإضافة البيانات الوصفية المطلوبة حتى يمكن لموقعك الإلكتروني استخدام getInstalledRelatedApps() على الفور. لمعرفة ما إذا كان تطبيق الويب التقدّمي (PWA) مثبّتًا باستخدام getInstalledRelatedApps()، حدِّد webapp في حقل البيان related_applications باستخدام عنوان URL للبيان:

...
"related_applications": [{
   "platform": "webapp",
   "url": "https://example.com/manifest.json",
}],
...

تعرض getInstalledRelatedApps() مصفوفة من عناصر التطبيق. إذا كانت المصفوفة فارغة، يعني هذا أنّ التطبيق ذي الصلة غير مثبّت.

const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;

رصد عمليات التثبيت من خارج نطاق تطبيق الويب التقدّمي (PWA)

من خلال متصفِّح Chrome على نظام التشغيل Android 89، يمكنك رصد ما إذا كان تطبيق الويب التقدّمي (PWA) مثبّتًا، حتى من خارج نطاق تطبيق الويب التقدّمي (PWA). يجب أن يضبط تطبيق الويب التقدّمي (PWA) ملف JSON داخل مجلد "/.well-known/"، مع منح الإذن للنطاق الآخر، كما هو موضّح في هذه المقالة.

المراجِع

• هل تطبيقك مثبَّت؟ يُعلِمك الأمر get installApps() الذي سيخبرك.
• MDN: التطبيقات ذات الصلة
• MDN: حدث AppInstall
• Apple: الترويج للتطبيقات باستخدام "إعلانات البانر للتطبيقات الذكية"