الرصد

يمكنك اكتشاف ما إذا كان المستخدم يستخدم تطبيق الويب التقدّمي (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) وطريقة استخدامه ومقدار استخدام تطبيق الويب التقدّمي (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) نفسه، ستكون مساحة التخزين الخاصة بكل رمز تطبيق ويب يثبّته المستخدم معزولة عن علامة التبويب في متصفّح 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 (الإصداران 10 و11 من نظام التشغيل Windows)
• f-droid: روبوت F.
• amazon: Amazon AppStore (FireOS)

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

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

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

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

الموارد

• هل تطبيقك مثبَّت؟ سيطلعك برنامج getinstallOnceApps() .
• MDN: التطبيقات ذات الصلة
• MDN: حدث Appinstalled
• Apple: الترويج للتطبيقات باستخدام إعلانات البانر الذكية للتطبيقات