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

bookmark_border با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

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

Pete LePage

Alexey Rodionov

API getInstalledRelatedApps() چیست؟

متد getInstalledRelatedApps() لیستی از برنامه های مرتبط نصب شده را برمی گرداند.

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

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

این امکان را برای صفحه شما فراهم می کند تا بررسی کند که آیا برنامه اندروید ، برنامه Universal Windows Platform (UWP) یا برنامه وب پیشرو (PWA) قبلاً روی دستگاه کاربر نصب شده است یا خیر، و به شما امکان می دهد تجربه کاربری را سفارشی کنید.

به عنوان مثال، اگر برنامه شما قبلاً نصب شده است:

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

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

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

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

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

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

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

برای تعریف رابطه بین وب سایت و برنامه ویندوز با استفاده از 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 شما باشد، همانطور که توسط محدوده در مانیفست برنامه وب تعریف شده است.

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

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

• platform باید webapp باشد
• url مسیری است (می تواند نسبی باشد) به مانیفست برنامه وب PWA شما
• id مسیر کامل برنامه وب است (برای دسکتاپ لازم است، برای اندروید لازم نیست)

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

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

در نهایت، تابع ناهمزمان navigator.getInstalledRelatedApps() از داخل محدوده PWA خود فراخوانی کنید تا بررسی کنید که آیا نصب شده است یا خیر. اگر getInstalledRelatedApps() خارج از محدوده PWA شما فراخوانی شود، [] را برمی گرداند. برای جزئیات بیشتر به بخش بعدی مراجعه کنید.

بررسی کنید که آیا برنامه وب پیشرو شما نصب شده است (خارج از محدوده)

وب سایت شما می تواند بررسی کند که PWA شما نصب شده است، حتی اگر صفحه خارج از محدوده PWA شما باشد. به عنوان مثال، صفحه فرود ارائه شده از /landing/ می تواند بررسی کند که آیا PWA ارائه شده از /pwa/ نصب شده است یا اینکه صفحه فرود شما از www.example.com و PWA شما از app.example.com ارائه می شود.

به 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 وارد کنید.

پشتیبانی از API را نشان دهید

آیا قصد دارید از API getInstalledRelatedApps() استفاده کنید؟ پشتیبانی عمومی شما به تیم Chrome کمک می‌کند ویژگی‌ها را اولویت‌بندی کند و به سایر فروشندگان مرورگر نشان می‌دهد که چقدر حمایت از آنها ضروری است.

• نحوه استفاده از API را در موضوع WICG Discourse به اشتراک بگذارید.
• با استفاده از هشتگ #getInstalledRelatedApps یک توییت به ChromiumDev@ ارسال کنید و به ما اطلاع دهید که کجا و چگونه از آن استفاده می‌کنید.

لینک های مفید

• توضیح دهنده عمومی برای getInstalledRelatedApps() API
• پیش نویس مشخصات
• اشکال ردیابی
• ورودی ChromeStatus.com
• مولفه چشمک زدن: Mobile>WebAPKs

با تشکر

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