آیا برنامه شما نصب شده است؟ Get Installed Related Apps API به شما خواهد گفت!

پیت لی پیج
الکسی رودیونوف
Alexey Rodionov
X GitHub LinkedIn

Get Installed Related Apps API به شما امکان می دهد لیستی از برنامه های مرتبط نصب شده را به همراه جزئیات مربوط به آنها دریافت کنید.

این به شما امکان می‌دهد بررسی کنید که آیا برنامه وب پیشرو (PWA)، برنامه Android یا برنامه Universal Windows Platform (UWP) روی دستگاه فعلی نصب شده است، هم از خود PWA و هم از یک صفحه وب مرتبط (مثلاً یک وب‌سایت بازاریابی محصول).

اگر برنامه قبلاً نصب شده است، می توانید تجربه کاربری را سفارشی کنید.

به عنوان مثال:

  • اگر برنامه دیگر شما قبلاً نصب شده باشد، نصب PWA خود را ترویج نمی‌کند.
  • هدایت کاربر از وب سایت بازاریابی محصول به طور مستقیم به برنامه شما.
  • متمرکز کردن برخی از عملکردها مانند اعلان ها در برنامه دیگر برای جلوگیری از اعلان های تکراری.

Get Installed Related Apps API چیست؟

فراخوانی متد ناهمزمان navigator.getInstalledRelatedApps() وعده ای را برمی گرداند که با آرایه ای از اشیاء حاوی جزئیات برنامه هایی که عبارتند از:

  • نصب شده بر روی دستگاه فعلی،
  • تعریف شده در قسمت related_applications مانیفست برنامه وب،
  • یک رابطه تأیید شده با صفحه ای داشته باشید که در آن متد navigator.getInstalledRelatedApps() فراخوانی می شود (برای جزئیات به بخش های بعدی مراجعه کنید). 
const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

تماس با console.log(installedRelatedApps) چیزی شبیه به:

[
  {
    platform: "webapp",
    id: "https://example.com/?utm_source=home_screen",
    url: "https://example.com/manifest.json"
  },
  {
    platform: "play",
    id: "com.example.twa",
    url: "https://play.google.com/store/apps/details?id=com.example.twa",
    version: "0.1.0"
  }
]

به عنوان مثال، برای بررسی اینکه آیا برنامه های مرتبطی روی دستگاه کاربر نصب شده است، می توانید از یک خط زیر استفاده کنید:

const hasInstalledRelatedApps = !!(await navigator.getInstalledRelatedApps?.())?.length;

اگر شناسه بسته را می‌دانید، برای دریافت شماره نسخه برنامه اندروید مرتبط نصب شده، می‌توانید از یک خط زیر استفاده کنید:

const installedRelatedAndroidAppVersion = (await navigator.getInstalledRelatedApps?.())?.find(app => app.id === 'com.example.twa')?.version;

انواع برنامه های پشتیبانی شده که می توانید بررسی کنید

نوع برنامه قابل بررسی از
برنامه اندروید فقط اندروید:
Chrome 80 یا جدیدتر
برنامه Universal Windows Platform (UWP). فقط ویندوز:
Chrome 85 یا جدیدتر
لبه 85 یا بالاتر
برنامه وب پیشرو (PWA) در همان محدوده در همان مبدا نصب شده است اندروید:
Chrome 84 یا جدیدتر
دسکتاپ (ویندوز، macOS، Linux، ChromeOS):
Chrome 140 یا جدیدتر
لبه 140 یا بالاتر
برنامه وب پیشرو (PWA)
در محدوده های مختلف در مبدا یکسان یا متفاوت نصب شده است		 فقط اندروید:
Chrome 84 یا جدیدتر

بررسی کنید که آیا برنامه اندروید شما نصب شده است یا خیر

وب سایت شما می تواند بررسی کند که آیا برنامه اندروید شما نصب شده است یا خیر.

پشتیبانی شده در:

  • فقط Android: Chrome 80 یا جدیدتر

به برنامه اندروید خود در مورد وب سایت خود بگویید

ابتدا، باید برنامه اندروید خود را به روز کنید تا با استفاده از سیستم پیوندهای دارایی دیجیتال، رابطه بین وب سایت و برنامه اندروید خود را مشخص کنید. این تأیید می کند که فقط وب سایت شما می تواند بررسی کند که آیا برنامه 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>

پس از تکمیل، برنامه به روز شده را روی دستگاه نصب کنید یا در فروشگاه Google Play یا هر یک از پلتفرم های توزیع برنامه اندروید دیگر منتشر کنید.

به وب سایت خود در مورد برنامه اندروید خود بگویید

در مرحله بعد، با افزودن یک مانیفست برنامه وب به صفحه خود، به وب سایت خود در مورد برنامه Android خود بگویید. مانیفست باید دارای ویژگی related_applications باشد، آرایه‌ای که جزئیات برنامه شما، از جمله platform و id را ارائه می‌کند.

  • platform باید play شود
  • id شناسه بسته اندروید است 
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome"
  }]
}

بررسی کنید که آیا برنامه شما نصب شده است یا خیر

در نهایت، تابع ناهمزمان navigator.getInstalledRelatedApps() را فراخوانی کنید تا بررسی کنید که آیا برنامه اندروید شما نصب شده است یا خیر.

بررسی کنید که آیا برنامه Windows (UWP) شما نصب شده است یا خیر

وب سایت شما می تواند بررسی کند که آیا برنامه ویندوز شما (ساخته شده با استفاده از UWP) نصب شده است یا خیر.

پشتیبانی شده در:

  • فقط ویندوز: 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 یا جدیدتر
  • رومیزی (Windows، macOS، Linux، ChromeOS): Chrome 140 یا جدیدتر، Edge 140 یا جدیدتر

PWA خود را در مورد خودش بگویید

با افزودن یک ورودی related_applications در مانیفست برنامه وب PWA خود، به PWA خود بگویید.

  • platform باید webapp باشد
  • url مسیری است (می تواند نسبی باشد) به مانیفست برنامه وب PWA شما
  • 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"
  }],
  …
}

بررسی کنید که آیا PWA شما نصب شده است یا خیر

در نهایت، تابع ناهمزمان navigator.getInstalledRelatedApps() از داخل محدوده PWA خود فراخوانی کنید تا بررسی کنید که آیا نصب شده است یا خیر. اگر navigator.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 ، مسیر کامل مانیفست برنامه وب را ارائه دهید که بررسی را انجام می دهد (نه مانیفست برنامه وب 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 را در StackOverflow بررسی کنید تا ببینید آیا شخص دیگری سؤالات مشابهی داشته است یا خیر. اگر نه، سوال خود را در آنجا بپرسید و حتماً آن را با تگ progressive-web-apps تگ کنید. تیم ما به طور مکرر آن برچسب را نظارت می کند و سعی می کند به سوالات شما پاسخ دهد.

بازخورد

آیا اشکالی در پیاده سازی کروم پیدا کردید؟ یا اجرا با مشخصات متفاوت است؟

  • یک اشکال را در https://new.crbug.com ثبت کنید. تا جایی که می توانید جزئیات را وارد کنید، دستورالعمل هایی را برای بازتولید اشکال ارائه دهید و Mobile>WebAPKs را در کادر Components وارد کنید.

لینک های مفید

با تشکر

تشکر ویژه از Sunggook Chue در مایکروسافت برای کمک به جزئیات برای آزمایش برنامه‌های Windows و Rayan Kanso برای کمک در مورد جزئیات Chrome.