تتيح الطريقة getInstalledRelatedApps()
لموقعك الإلكتروني التحقّق مما إذا كان
تثبيت تطبيق iOS/Android/الكمبيوتر المكتبي أو تطبيق الويب التقدّمي (PWA) على جهاز المستخدم.
ما هي واجهة برمجة التطبيقات getinstallrelatedApps()؟
![](https://web.dev/static/articles/get-installed-related-apps/image/vjamv2uyz6NxBPxPIm11.jpg?authuser=6&hl=ar)
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 لتحديد أولويات الميزات وإظهار
موردي المتصفحات مدى أهمية دعمهم.
- شارِك كيف تخطط لاستخدام واجهة برمجة التطبيقات في سلسلة محادثات WICG Discourse.
- إرسال تغريدة إلى @ChromiumDev باستخدام علامة التصنيف
#getInstalledRelatedApps
عليك إعلامنا بمكان تطبيقك وطريقة استخدامه
روابط مفيدة
- شرح علني لواجهة برمجة تطبيقات
getInstalledRelatedApps()
- مسودة المواصفات
- خطأ في التتبُّع
- إدخال ChromeStatus.com
- مكوِّن Blink:
Mobile>WebAPKs
شكرًا
شكر خاص لـ "سونغوك تشوي" في Microsoft على مساعدته في التفاصيل لاختبار تطبيقات Windows، ورايان كانسو للحصول على المساعدة بشأن تفاصيل Chrome.