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

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

ما المقصود بواجهة برمجة التطبيقات get الشركاءSupportedApps() ؟

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

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

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

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

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

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

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

التحقّق من تثبيت تطبيق 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: Chrome 85 أو إصدار أحدث، أو Edge 85 أو إصدار أحدث

إخبار تطبيق 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: Chrome 84 أو إصدار أحدث

إطلاع تطبيق الويب التقدّمي (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)، سيتم عرض خطأ. يُرجى الاطلاع على القسم التالي للحصول على التفاصيل.

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

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

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

متاح على

جهاز Android: Chrome 84 أو إصدار أحدث

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

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

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

// 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) مثبّتًا.

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

جارٍ الاتصال بـ getinstalledSupportedApps()

يؤدي طلب البيانات من خلال navigator.getInstalledRelatedApps() إلى عرض وعد يحلّ المشكلة المتعلقة بمجموعة من تطبيقاتك المثبَّتة على جهاز المستخدم.

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

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

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

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

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

إضافة ملاحظات

هل واجهت خطأً في تنفيذ Chrome؟ أم أن التنفيذ مختلف عن المواصفات؟

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

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

هل تخطّط لاستخدام واجهة برمجة التطبيقات getInstalledRelatedApps() API؟ ويساعد الدعم العام فريق Chrome في تحديد أولويات الميزات ويُظهر لمورّدي المتصفّحات الآخرين مدى أهمية دعمهم لهذه الميزات.

روابط مفيدة

شكرًا

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