آیا برنامه شما نصب شده است؟ getInstalledRelatedApps() به شما خواهد گفت!

متد getInstalledRelatedApps() به وب سایت شما اجازه می دهد بررسی کند که آیا برنامه iOS/Android/Desktop یا PWA شما روی دستگاه کاربر نصب شده است یا خیر.

پیت لی پیج

API getInstalledRelatedApps() چیست؟

وب‌سایتی که از getInstalledRelatedApps() استفاده می‌کند تا مشخص کند آیا برنامه Android آن قبلاً نصب شده است یا خیر.

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@ ارسال کنید و به ما اطلاع دهید که کجا و چگونه از آن استفاده می‌کنید.

لینک های مفید

با تشکر

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