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

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

Pete LePage

Alexey Rodionov

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

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

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

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

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

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

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

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

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

عليك أولاً تعديل تطبيق Android لتحديد العلاقة بين موقعك الإلكتروني وتطبيق Android باستخدام نظام Digital Asset Links. يؤكّد ذلك أنّه يمكن لموقعك الإلكتروني فقط التحقّق مما إذا كان تطبيق 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 بموقعك الإلكتروني

عليك تحديث تطبيق Windows لتحديد العلاقة بين موقعك الإلكتروني وتطبيق Windows باستخدام معالجات معرّف الموارد المنتظم. يؤكّد ذلك أنّه يمكن لموقعك الإلكتروني فقط التحقّق مما إذا كان تطبيق 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": [ "*" ]
}]

اطّلِع على هذا العرض التوضيحي.

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

إخبار موقعك الإلكتروني عن تطبيق 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) بنفسه من خلال إضافة إدخال related_applications في بيان تطبيق الويب الخاص بتطبيقات الويب التقدّمية (PWA).

• يجب أن يكون platform هو webapp
• url هو المسار الكامل إلى بيان تطبيق الويب الخاص بتطبيق الويب التقدّمي
• id هو المسار الكامل إلى تطبيق الويب (مطلوب لأجهزة الكمبيوتر، وليس مطلوبًا لأجهزة Android)

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

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

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

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

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

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

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

أضِف ملف assetlinks.json إلى دليل /.well-known/ الخاص بالنطاق الذي تستضيف فيه تطبيق الويب التقدّمي، مثل 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"
    }
  }
]

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

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

• يجب أن يكون platform هو webapp
• url هو المسار الكامل إلى بيان تطبيق الويب الخاص بتطبيق الويب التقدّمي

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

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

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

طريقة استخدام بطاقة getInstalledRelatedApps()

يؤدي استدعاء 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 في المربّع المكوّنات.

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

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

• شارِك خططك بشأن استخدام واجهة برمجة التطبيقات في سلسلة محادثات WICG Discourse.
• يمكنك إرسال تغريدة إلى ‎@ChromiumDev باستخدام الهاشتاغ #getInstalledRelatedApps وإخبارنا بمكان استخدامك لهذه الميزة وكيفية استخدامها.

روابط مفيدة

• شرح علني لواجهة برمجة التطبيقات getInstalledRelatedApps()
• مسودة المواصفات
• خطأ في التتبُّع
• إدخال ChromeStatus.com
• مكوّن Blink: Mobile>WebAPKs

شكرًا

نشكر Sunggook Chue من Microsoft على المساعدة في تقديم التفاصيل المتعلّقة باختبار تطبيقات Windows، ونشكر Rayan Kanso على المساعدة في تقديم تفاصيل Chrome.