متد getInstalledRelatedApps()
به وب سایت شما اجازه می دهد بررسی کند که آیا برنامه iOS/Android/Desktop یا PWA شما روی دستگاه کاربر نصب شده است یا خیر.
API getInstalledRelatedApps() چیست؟
getInstalledRelatedApps()
این امکان را برای صفحه شما فراهم می کند تا بررسی کند که آیا برنامه تلفن همراه یا دسکتاپ شما ، یا در برخی موارد، آیا برنامه وب پیشرو شما (PWA) قبلاً روی دستگاه کاربر نصب شده است یا خیر، و به شما امکان می دهد تجربه کاربری را در صورت سفارشی سازی کنید. است.
به عنوان مثال، اگر برنامه شما قبلاً نصب شده است:
- هدایت کاربر از صفحه بازاریابی محصول به طور مستقیم به برنامه شما.
- متمرکز کردن برخی از عملکردها مانند اعلان ها در برنامه دیگر برای جلوگیری از اعلان های تکراری.
- اگر برنامه دیگر شما قبلاً نصب شده باشد، نصب PWA خود را ترویج نمیکند.
برای استفاده از getInstalledRelatedApps()
API، باید به برنامه خود در مورد سایت خود بگویید، سپس به سایت خود در مورد برنامه خود بگویید. هنگامی که رابطه بین این دو را تعریف کردید، می توانید بررسی کنید که آیا برنامه نصب شده است یا خیر.
انواع برنامه های پشتیبانی شده که می توانید بررسی کنید
نوع برنامه | قابل بررسی از |
---|---|
برنامه اندروید | فقط اندروید Chrome 80 یا جدیدتر |
برنامه ویندوز (UWP). | فقط ویندوز Chrome 85 یا جدیدتر لبه 85 یا بالاتر |
برنامه وب پیشرو در محدوده مشابه یا محدوده دیگری نصب شده است. | فقط اندروید Chrome 84 یا جدیدتر |
بررسی کنید که آیا برنامه اندروید شما نصب شده است یا خیر
وب سایت شما می تواند بررسی کند که آیا برنامه اندروید شما نصب شده است یا خیر.
Android: Chrome 80 یا جدیدتر
به برنامه اندروید خود در مورد وب سایت خود بگویید
ابتدا، باید برنامه اندروید خود را به روز کنید تا با استفاده از سیستم پیوندهای دارایی دیجیتال، رابطه بین وب سایت و برنامه اندروید خود را مشخص کنید. این تضمین می کند که فقط وب سایت شما می تواند بررسی کند که آیا برنامه اندروید شما نصب شده است یا خیر.
در 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>
پس از تکمیل، برنامه اندروید به روز شده خود را در فروشگاه Play منتشر کنید.
به وب سایت خود در مورد برنامه اندروید خود بگویید
در مرحله بعد، با افزودن یک مانیفست برنامه وب به صفحه خود، به وب سایت خود در مورد برنامه Android خود بگویید. مانیفست باید دارای ویژگی related_applications
باشد، آرایهای که جزئیات برنامه شما، از جمله platform
و id
را ارائه میکند.
-
platform
بایدplay
شود -
id
شناسه برنامه GooglePlay برای برنامه اندروید شما است
{
"related_applications": [{
"platform": "play",
"id": "com.android.chrome",
}]
}
بررسی کنید که آیا برنامه شما نصب شده است یا خیر
در نهایت، با navigator.getInstalledRelatedApps()
تماس بگیرید تا بررسی کنید که آیا برنامه اندروید شما نصب شده است یا خیر.
نسخه ی نمایشی را امتحان کنید
بررسی کنید که آیا برنامه Windows (UWP) شما نصب شده است یا خیر
وب سایت شما می تواند بررسی کند که آیا برنامه ویندوز شما (ساخته شده با استفاده از UWP) نصب شده است یا خیر.
Windows: Chrome 85 یا جدیدتر، Edge 85 یا بالاتر
به برنامه ویندوز خود در مورد وب سایت خود بگویید
برای تعریف رابطه بین وب سایت و برنامه ویندوز با استفاده از URI Handlers، باید برنامه ویندوز خود را به روز کنید. این تضمین می کند که فقط وب سایت شما می تواند بررسی کند که آیا برنامه ویندوز شما نصب شده است یا خیر.
ثبت پسوند 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/
قرار دهید. می توانید نام خانوادگی بسته را در بخش Packaging در طراح مانیفست برنامه پیدا کنید.
[{
"packageFamilyName": "MyApp_9jmtgj1pbbz6e",
"paths": [ "*" ]
}]
برای جزئیات کامل در مورد راهاندازی کنترلکنندههای URI، به فعال کردن برنامهها برای وبسایتها با استفاده از کنترلکنندههای URI برنامه رجوع کنید.
به وب سایت خود در مورد برنامه ویندوز خود بگویید
سپس، با افزودن یک مانیفست برنامه وب به صفحه خود، به وب سایت خود در مورد برنامه ویندوز خود بگویید. مانیفست باید دارای ویژگی related_applications
باشد، آرایهای که جزئیات برنامه شما از جمله platform
و id
را ارائه میکند.
-
platform
بایدwindows
باشد -
id
نام خانوادگی بسته برنامه شما است که با مقدارId
<Application>
در فایلPackage.appxmanifest
شما اضافه شده است.
{
"related_applications": [{
"platform": "windows",
"id": "MyApp_9jmtgj1pbbz6e!App",
}]
}
بررسی کنید که آیا برنامه شما نصب شده است یا خیر
در نهایت، با navigator.getInstalledRelatedApps()
تماس بگیرید تا بررسی کنید که آیا برنامه ویندوز شما نصب شده است یا خیر.
بررسی کنید که آیا برنامه وب پیشرو شما قبلاً نصب شده است (در محدوده)
PWA شما می تواند بررسی کند که آیا قبلاً نصب شده است یا خیر. در این حالت، صفحه ای که درخواست را ارائه می کند باید در همان دامنه و در محدوده PWA شما باشد، همانطور که توسط محدوده در مانیفست برنامه وب تعریف شده است.
Android: Chrome 84 یا جدیدتر
PWA خود را در مورد خودش بگویید
با افزودن یک ورودی related_applications
در مانیفست برنامه وب PWA خود، به 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
و PWA شما از app.example.com
ارائه می شود.
Android: Chrome 84 یا جدیدتر
به 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 شما نصب شده است یا خیر.
نسخه ی نمایشی را امتحان کنید
فراخوانی getInstalledRelatedApps()
فراخوانی navigator.getInstalledRelatedApps()
قولی را برمیگرداند که با آرایهای از برنامههای نصب شده در دستگاه کاربر برطرف میشود.
const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
console.log(app.id, app.platform, app.url);
});
برای جلوگیری از آزمایش مجموعه بیش از حد گسترده ای از برنامه های خود توسط سایت ها، فقط سه برنامه اول اعلام شده در مانیفست برنامه وب در نظر گرفته می شود.
مانند اکثر APIهای وب قدرتمند دیگر، API getInstalledRelatedApps()
تنها زمانی در دسترس است که از طریق HTTPS ارائه شود.
هنوز سوالی دارید؟
هنوز سوالی دارید؟ برچسب getInstalledRelatedApps
را در StackOverflow بررسی کنید تا ببینید آیا شخص دیگری سؤالات مشابهی داشته است یا خیر. اگر نه، سوال خود را در آنجا بپرسید و حتماً آن را با تگ progressive-web-apps
تگ کنید. تیم ما به طور مکرر آن برچسب را نظارت می کند و سعی می کند به سوالات شما پاسخ دهد.
بازخورد
آیا اشکالی در پیاده سازی کروم پیدا کردید؟ یا اجرا با مشخصات متفاوت است؟
- یک اشکال را در https://new.crbug.com ثبت کنید. تا جایی که می توانید جزئیات را وارد کنید، دستورالعمل های ساده ای را برای بازتولید اشکال ارائه دهید و
Mobile>WebAPKs
در کادر Components وارد کنید. Glitch برای به اشتراک گذاری سریع و آسان تکرارها عالی عمل می کند.
پشتیبانی از API را نشان دهید
آیا قصد دارید از API getInstalledRelatedApps()
استفاده کنید؟ پشتیبانی عمومی شما به تیم Chrome کمک میکند ویژگیها را اولویتبندی کند و به سایر فروشندگان مرورگر نشان میدهد که چقدر حمایت از آنها ضروری است.
- نحوه استفاده از API را در موضوع WICG Discourse به اشتراک بگذارید.
- با استفاده از هشتگ
#getInstalledRelatedApps
یک توییت به ChromiumDev@ ارسال کنید و به ما اطلاع دهید که کجا و چگونه از آن استفاده میکنید.
لینک های مفید
- توضیح دهنده عمومی برای
getInstalledRelatedApps()
API - پیش نویس مشخصات
- اشکال ردیابی
- ورودی ChromeStatus.com
- مولفه چشمک زدن:
Mobile>WebAPKs
با تشکر
تشکر ویژه از Sunggook Chue در مایکروسافت برای کمک به جزئیات برای آزمایش برنامههای Windows و Rayan Kanso برای کمک در مورد جزئیات Chrome.