هل تم تثبيت تطبيقك؟ ستخبرك واجهة برمجة التطبيقات Get Installed Related Apps API بذلك.

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

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

• يجب أن تكون platform هي play
• id هو معرّف حزمة Android

{
  ...
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.twa"
    }
  ]
  ...
}

نصيحة احترافية: هذا هو مصفوفة. يعني ذلك أنّه يمكنك تحديد علاقة تم التحقّق منها بين موقعك الإلكتروني وأكثر من تطبيق Android.

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

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

التحقّق مما إذا كان تطبيق Windows (UWP) مثبَّتًا

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

الأجهزة المتوافقة:

• أجهزة Windows فقط: الإصدار 85 من Chrome أو الإصدارات الأحدث، والإصدار 85 من Edge أو الإصدارات الأحدث

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

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

أضِف تسجيل إضافة Windows.appUriHandler إلى ملف بيان تطبيقك AppxManifest.xml أو 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>.

إذا كان لموقعك الإلكتروني عناوين متعددة، أضِف إدخالاً منفصلاً <uap3:Host Name=... /> داخل <uap3:AppUriHandler> لكل عنوان.

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

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

نصيحة احترافية: هذا هو مصفوفة. يعني ذلك أنّه يمكنك تحديد علاقة تم التحقّق منها بين موقعك الإلكتروني وأكثر من تطبيق Windows.

لمعرفة اسم حزمة التطبيق، يمكنك تثبيت التطبيق وتنفيذ الأمر التالي في PowerShell والعثور على تطبيقك في القائمة:

Get-AppxPackage | Select-Object PackageFamilyName

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

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

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

• يجب أن تكون platform هي windows
• id هو اسم حزمة التطبيق مع إضافة !App كلاحقة في النهاية

{
  ...
  "related_applications": [
    {
      "platform": "windows",
      "id": "MyApp_9jmtgj1pbbz6e!App"
    }
  ]
  ...
}

نصيحة احترافية: هذا هو مصفوفة. يعني ذلك أنّه يمكنك تحديد علاقة تم التحقّق منها بين موقعك الإلكتروني وأكثر من تطبيق Windows.

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

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

راجِع هذا الـ عرض التوضيحي.

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

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

الأجهزة المتوافقة:

• أجهزة Android: الإصدار 84 من Chrome أو الإصدارات الأحدث
• أجهزة الكمبيوتر (Windows وmacOS وLinux وChromeOS): الإصدار 140 من Chrome أو الإصدارات الأحدث، والإصدار 140 من Edge أو الإصدارات الأحدث

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

أخبر تطبيق الويب التقدّمي بنفسه من خلال إضافة إدخال related_applications في بيان تطبيق الويب الخاص بتطبيق الويب التقدّمي.

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

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

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

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

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

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

الأجهزة المتوافقة:

• أجهزة Android فقط: الإصدار 84 من Chrome أو الإصدارات الأحدث

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

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

أضِف ملف 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 على StackOverflow لمعرفة ما إذا كان لدى أي شخص آخر أسئلة مشابهة. إذا لم يكن الأمر كذلك، اطرح سؤالك هناك، واحرص على وضع علامة progressive-web-apps عليه. يراقب فريقنا هذه العلامة بشكل متكرّر ويحاول الإجابة عن أسئلتك.

الملاحظات

هل عثرت على خطأ في تنفيذ Chrome؟ أو هل يختلف التنفيذ عن المواصفات؟

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

روابط مفيدة

• شرح علني لواجهة Get Installed Related Apps API
• مسودة المواصفات
• تتبُّع الخطأ
• إدخال ChromeStatus.com
• مكوّن Blink: Mobile>WebAPKs

شكرًا

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