هل تم تثبيت تطبيقك؟ ستخبرك إحدى هذه الأدوات الخطوات التالية: getثبِّتمنتجات ذات صلة() .

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

Pete LePage

ما هي واجهة برمجة التطبيقات getinstallrelatedApps()؟

موقع إلكتروني يستخدم getInstalledRelatedApps() لتحديد ما إذا كان سبق وتم تثبيت تطبيق Android.

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

على سبيل المثال، إذا كان تطبيقك مثبّتًا:

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

لاستخدام واجهة برمجة التطبيقات getInstalledRelatedApps()، يجب إخبار تطبيقك بما يلي: على موقعك الإلكتروني، ثم أخبر الموقع عن تطبيقك. بمجرد تحديد علاقة بين الاثنين، يمكنك التحقق مما إذا كان التطبيق مثبتًا أم لا.

أنواع التطبيقات المتوافقة التي يمكنك التحقّق منها

نوع التطبيق يمكن التحقق منه من
تطبيق Android أجهزة Android فقط
الإصدار 80 من Chrome أو الإصدارات الأحدث
تطبيق Windows (UWP) نظام التشغيل Windows فقط
الإصدار 85 من Chrome أو الإصدارات الأحدث
الإصدار 85 من Edge أو الإصدارات الأحدث
تطبيق الويب التقدّمي
إذا كان التطبيق مثبّتًا في النطاق نفسه أو نطاق مختلف. 		أجهزة Android فقط
الإصدار 84 من Chrome أو الإصدارات الأحدث

التأكّد من تثبيت تطبيق Android

يمكن لموقعك الإلكتروني التحقّق ممّا إذا كان تطبيق Android مثبّتًا أم لا.

متاح على

Android: الإصدار 80 من Chrome أو إصدار أحدث

أخبر تطبيق Android عن موقعك الإلكتروني

أولاً، يجب تحديث تطبيق Android لتحديد العلاقة بين موقعك الإلكتروني وتطبيق Android باستخدام نظام "روابط مواد العرض الرقمية": يضمن ذلك ألا يتم موقعك الإلكتروني التحقّق ممّا إذا كان تطبيق Android مثبّتًا أم لا.

في AndroidManifest.xml من تطبيق Android، أضِف asset_statements. الإدخال:

<manifest>
  <application>
   …
    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
   …
  </application>
</manifest>

بعد ذلك، في strings.xml، أضِف بيان مادة العرض التالي مع تعديل site باستخدام نطاقك. تأكد من تضمين الأحرف الاستهلالية.

<string name="asset_statements">
  [{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
      \"namespace\": \"web\",
      \"site\": \"https://example.com\"
    }
  }]
</string>

بعد الانتهاء، انشر تطبيق Android المحدَّث على "متجر Play".

أخبر موقعك الإلكتروني عن تطبيق Android

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

  • يجب أن يكون platform play.
  • id هو رقم تعريف تطبيق Google Play لتطبيق Android.
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

التحقّق من تثبيت تطبيقك

أخيرًا، اتصل بالرقم navigator.getInstalledRelatedApps() للتأكد مما إذا كان تم تثبيت تطبيق Android.

تجربة العرض التوضيحي

التحقّق من تثبيت تطبيق Windows (UWP)

يمكن لموقعك الإلكتروني التحقّق مما إذا كان تطبيق Windows (الذي تم إنشاؤه باستخدام UWP) مثبّتًا.

متاح على

نظام التشغيل Windows: الإصدار 85 من Chrome أو الإصدارات الأحدث أو الإصدار 85 من Edge أو الإصدارات الأحدث

أخبر تطبيق Windows عن موقعك الإلكتروني

يجب تحديث تطبيق Windows لتحديد العلاقة بين موقع إلكتروني وتطبيق Windows باستخدام معالِجات معرّف الموارد المنتظم (URI). هذا النمط أن الموقع الإلكتروني وحده يمكنه التحقق من تثبيت تطبيق Windows.

إدراج تسجيل الإضافة Windows.appUriHandler في بيان تطبيقك الملف Package.appxmanifest. على سبيل المثال، إذا كان عنوان موقعك الإلكتروني هو example.com عليك إضافة الإدخال التالي في بيان تطبيقك:

<Applications>
  <Application Id="App" ... >
      ...
      <Extensions>
         <uap3:Extension Category="windows.appUriHandler">
          <uap3:AppUriHandler>
            <uap3:Host Name="example.com" />
          </uap3:AppUriHandler>
        </uap3:Extension>
      </Extensions>
  </Application>
</Applications>

قد تحتاج إلى إضافة مساحة الاسم uap3 إلى <Package>.

بعد ذلك، أنشِئ ملف JSON (بدون امتداد الملف .json) باسم. windows-app-web-link وأدخِل اسم عائلة حزمة تطبيقك. المكان ذلك الملف إما على جذر الخادم أو في الدليل /.well-known/. إِنْتَ يمكن العثور على اسم مجموعة الحزمة في قسم "الحزمة" في بيان التطبيق كمصمم.

[{
  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
  "paths": [ "*" ]
}]

راجع تفعيل التطبيقات للمواقع الإلكترونية باستخدام معالِجات معرّف الموارد المنتظم (URI) للتطبيقات للاطّلاع على التفاصيل الكاملة حول إعداد معالِجات معرف الموارد المنتظم (URI).

أخبر موقعك الإلكتروني عن تطبيق Windows

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

  • يجب أن يكون platform windows.
  • "id" هو اسم مجموعة حزمة تطبيقك، مُلحقًا بـ <Application> Id في ملف Package.appxmanifest.
{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App",
  }]
}

التحقّق من تثبيت تطبيقك

أخيرًا، اتصل بالرقم navigator.getInstalledRelatedApps() للتأكد مما إذا كان تم تثبيت تطبيق Windows.

التحقّق مما إذا كان تطبيق الويب التقدّمي مثبّتًا (ضمن النطاق)

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

متاح على

نظام التشغيل Android: الإصدار 84 من Chrome أو إصدار أحدث

إخبار تطبيق الويب التقدّمي (PWA) عن نفسه

يمكنك إخبار تطبيق الويب التقدّمي (PWA) عن نفسه من خلال إضافة إدخال related_applications في بيان تطبيق الويب لتطبيقات الويب التقدّمية (PWA)

  • يجب أن يكون platform webapp.
  • url هو المسار الكامل إلى بيان تطبيق الويب الخاص بتطبيق الويب التقدّمي (PWA)
{
  …
  "scope": "/",
  "start_url": "/",
  "related_applications": [{
    "platform": "webapp",
    "url": "https://example.com/manifest.json",
  }],
  …
}

التحقّق من تثبيت تطبيق الويب التقدّمي (PWA)

أخيرًا، يمكنك الاتصال بـ navigator.getInstalledRelatedApps() من داخل نطاق تطبيق الويب التقدّمي (PWA) للتحقّق من تثبيته. في حال حذف يُسمى getInstalledRelatedApps() خارج نطاق تطبيق الويب التقدّمي (PWA)، فسيتم إرجاع false. يُرجى الاطلاع على القسم التالي للحصول على التفاصيل.

تجربة العرض التوضيحي

التحقّق مما إذا كان تطبيق الويب التقدّمي مثبّتًا (خارج النطاق)

يمكن لموقعك الإلكتروني التحقّق مما إذا كان تطبيق الويب التقدّمي (PWA) مثبّتًا، حتى إذا كانت الصفحة خارج نطاق تطبيق الويب التقدّمي (PWA) على سبيل المثال، قد يتم عرض إحدى الصفحات المقصودة من بإمكان "/landing/" التحقّق من تثبيت تطبيق الويب التقدّمي (PWA) المعروض من خلال "/pwa/" أو ما إذا كان يتمّ عرض صفحتك المقصودة من خلال "www.example.com" ويتم عرض تطبيق الويب التقدّمي الخاص بك من app.example.com

متاح على

نظام التشغيل Android: الإصدار 84 من Chrome أو إصدار أحدث

إطلاع تطبيق الويب التقدّمي (PWA) على موقعك الإلكتروني

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

إضافة ملف assetlinks.json إلى الدليل /.well-known/ للنطاق الذي يتوفّر فيه تطبيق الويب التقدّمي (PWA)، على سبيل المثال app.example.com. في site المسار الكامل لبيان تطبيق الويب الذي سينفذ عملية التحقّق (وليس في بيان تطبيق الويب الخاص بتطبيق الويب التقدّمي PWA).

// Served from https://app.example.com/.well-known/assetlinks.json
[
  {
    "relation": ["delegate_permission/common.query_webapk"],
    "target": {
      "namespace": "web",
      "site": "https://www.example.com/manifest.json"
    }
  }
]

إعلام موقعك الإلكتروني بتطبيق الويب التقدّمي (PWA)

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

  • يجب أن يكون platform webapp.
  • url هو المسار الكامل إلى بيان تطبيق الويب الخاص بتطبيق الويب التقدّمي (PWA)
{
  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json",
  }]
}

التحقّق من تثبيت تطبيق الويب التقدّمي (PWA)

أخيرًا، اتصل بالرقم navigator.getInstalledRelatedApps() للتأكد مما إذا كان تم تثبيت تطبيق الويب التقدّمي (PWA).

تجربة العرض التوضيحي

جارٍ الاتصال بـ geton RelatedApps()

يؤدي الاتصال بالرقم navigator.getInstalledRelatedApps() إلى تقديم وعدٍ يفيد بأنّ تتم حله باستخدام مجموعة من التطبيقات المثبّتة على جهاز المستخدم.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

لمنع المواقع الإلكترونية من اختبار مجموعة واسعة جدًا من التطبيقات الخاصة بها، سيتم فقط تطبيق أول ثلاثة تطبيقات تم تعريفها في بيان تطبيق الويب في الاعتبار.

مثل معظم واجهات برمجة تطبيقات الويب الفعالة الأخرى، getInstalledRelatedApps() API هي تتوفّر فقط عند عرضها عبر HTTPS.

هل ما زالت لديك أسئلة؟

هل ما زالت لديك أسئلة؟ تحقَّق من علامة getInstalledRelatedApps في StackOverflow. لمعرفة ما إذا كان لدى أي شخص آخر أسئلة مماثلة. إذا لم يكن كذلك، اسأل السؤال هناك، واحرص على وضع علامة عليه العلامة progressive-web-apps. يراقب فريقنا باستمرار هذه العلامة ويحاول الإجابة عن أسئلتك.

ملاحظات

هل واجهت مشكلة في التنفيذ في Chrome؟ أم أن التنفيذ عن المواصفات؟

  • يمكنك الإبلاغ عن الخطأ على https://new.crbug.com. تضمين أكبر قدر ممكن قدر الإمكان، وتقديم تعليمات بسيطة لإعادة إنتاج الخطأ، أدخل Mobile>WebAPKs في مربع المكونات. خلل بشكل رائع لمشاركة عمليات إعادة الإنتاج السريعة والسهلة.

إظهار الدعم لواجهة برمجة التطبيقات

هل لديك خطة لاستخدام واجهة برمجة تطبيقات getInstalledRelatedApps()؟ المحتوى المتاح للجميع فريق Chrome لتحديد أولويات الميزات وإظهار موردي المتصفحات مدى أهمية دعمهم.

روابط مفيدة

شكرًا

شكر خاص لـ "سونغوك تشوي" في Microsoft على مساعدته في التفاصيل لاختبار تطبيقات Windows، ورايان كانسو للحصول على المساعدة بشأن تفاصيل Chrome.