Is your app installed? Get Installed Related Apps API will tell you!

Pete LePage

Alexey Rodionov

The Get Installed Related Apps API allows to get the list of installed related apps along with details about them.

It lets you to check if your Progressive Web App (PWA), Android app or Universal Windows Platform (UWP) app is installed on the current device, both from the PWA itself and from a related web page (e.g., a product marketing website).

Bubblewrap is an open source set of libraries and a command line tool (CLI) for Node.js. Bubblewrap is developed by the Google Chrome team, to help developers generate, build, and sign an Android project that launches your PWA as a Trusted Web Activity (TWA).

PWABuilder is an open source project developed by Microsoft, that allows developers to package and sign their PWAs for publishing to various stores, including Microsoft Store, Google Play Store, App Store, and Meta Quest Store, by entering the URL of a PWA, entering/editing the metadata for the app, and clicking the Generate button.

PWABuilder uses Bubblewrap under the hood to package PWAs for Android and ChromeOS.

If the app is already installed, you can customize the user experience.

For example:

Not promoting the installation of your PWA if your other app is already installed.
Redirecting the user from a product marketing website directly into your app.
Centralizing some functionality like notifications in the other app to prevent duplicate notifications.

To use the Get Installed Related Apps API, you need to tell your app about your page, then tell your page about your app. Once you've defined the relationship between the two, you can check if the related app is installed.

To prevent sites from testing an overly broad set of their own apps, only the first three apps declared in the web app manifest will be taken into account.

Like most other powerful web APIs, the Get Installed Related Apps API is only available when served over HTTPS.

What is the Get Installed Related Apps API?

Calling asynchronous navigator.getInstalledRelatedApps() method returns a promise that resolves with an array of objects containing details about apps that are:

installed on the current device,
defined in the related_applications field of web app manifest,
have a verified relationship with a page where the navigator.getInstalledRelatedApps() method is called (see the next sections for details).

const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

Calling console.log(installedRelatedApps) returns something like:

[
  {
    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"
  }
]

For example, to check if any related apps are installed on the user's device, you can use the following one-liner:

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

If you know the package ID, to get the version number of installed related Android app, you can use the following one-liner:

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

This means the navigator.getInstalledRelatedApps() method will still return installed related apps even if their version is lower than min_version or their signing certificate doesn't match any fingerprints declared in the related_applications field of web app manifest.

Supported app types you can check

App type	Checkable from
Android app	Android only: Chrome 80 or later
Universal Windows Platform (UWP) app	Windows only: Chrome 85 or later Edge 85 or later
Progressive Web App (PWA) installed in the same scope on same origin	Android: Chrome 84 or later Desktop (Windows, macOS, Linux, ChromeOS): Chrome 140 or later Edge 140 or later
Progressive Web App (PWA) installed in the different scope on same or different origin	Android only: Chrome 84 or later

Check if your Android app is installed

Your website can check if your Android app is installed.

Android only: Chrome 80 or later

Tell your Android app about your website

First, you'll need to update your Android app to define the relationship between your website and Android application using the Digital Asset Links system. This verifies that only your website can check if your Android app is installed.

In the AndroidManifest.xml of your Android app, add an asset_statements entry:

<manifest>
  <application>
   …
    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
   …
  </application>
</manifest>

Then, in strings.xml, add the following asset statement, updating site with your domain. Be sure to include the escaping characters.

<string name="asset_statements">
  [{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
      \"namespace\": \"web\",
      \"site\": \"https://example.com\"
    }
  }]
</string>

Once completed, install the updated app on the device or publish to Google Play Store or any of the other Android app distribution platforms.

Tell your website about your Android app

Next, tell your website about your Android app by adding a web app manifest to your page. The manifest must include the related_applications property, an array that provides the details about your app, including platform and id.

platform must be play
id is the Android package ID

{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome"
  }]
}

Check if your app is installed

Finally, call the asynchronous function navigator.getInstalledRelatedApps() to check if your Android app is installed.

Check if your Windows (UWP) app is installed

Your website can check if your Windows app (built using UWP) is installed.

Windows only: Chrome 85 or later, Edge 85 or later

Tell your Windows app about your website

You'll need to update your Windows app to define the relationship between your website and Windows application using URI Handlers. This verifies that only your website can check if your Windows app is installed.

Add the Windows.appUriHandler extension registration to your app's manifest file Package.appxmanifest. For example, if your website's address is example.com you would add the following entry in your app's manifest:

<Applications>
  <Application Id="App" ... >
      ...
      <Extensions>
         <uap3:Extension Category="windows.appUriHandler">
          <uap3:AppUriHandler>
            <uap3:Host Name="example.com" />
          </uap3:AppUriHandler>
        </uap3:Extension>
      </Extensions>
  </Application>
</Applications>

Note, you may need to add the uap3 namespace to your <Package> attribute.

Then, create a JSON file (without the .json file extension) named windows-app-web-link and provide your app's package family name. Place that file either on your server root, or in the /.well-known/ directory. You can find the package family name in the Packaging section in the app manifest designer.

[{
  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
  "paths": [ "*" ]
}]

See Enable apps for websites using app URI handlers for complete details on setting up URI handlers.

Tell your website about your Windows app

Next, tell your website about your Windows app by adding a web app manifest to your page. The manifest must include related_applications property, an array that provides the details about your app, including platform and id.

platform must be windows
id is your app's package family name, appended by the <Application> Id value in your Package.appxmanifest file.

{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App"
  }]
}

Check if your app is installed

Finally, call the asynchronous function navigator.getInstalledRelatedApps() to check if your Windows app is installed.

Check out this demo.

Check if your Progressive Web App is already installed (in scope)

Your PWA can check to see if it is already installed. In this case, the page making the request must be on the same domain, and within the scope of your PWA, as defined by the scope in the web app manifest.

Supported on:

Android: Chrome 84 or later

Desktop (Windows, macOS, Linux, ChromeOS): Chrome 140 or later, Edge 140 or later

Tell your PWA about itself

Tell your PWA about itself by adding a related_applications entry in your PWA's web app manifest.

platform must be webapp
url is the path (can be relative) to the web app manifest of your PWA
id is the web app id declared in the web app manifest's id field or computed by the browser (required for Desktop, not needed for Android)

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

Check if your PWA is installed

Finally, call the asynchronous function navigator.getInstalledRelatedApps() from within the scope of your PWA to check if it is installed. If navigator.getInstalledRelatedApps() is called outside the scope of your PWA, it will return []. See the next section for details.

Check if your Progressive Web App is installed (out of scope)

Your website can check if your PWA is installed, even if the page is outside the scope of your PWA. For example, a landing page served from /landing/ can check if the PWA served from /pwa/ is installed, or if your landing page is served from www.example.com and your PWA is served from app.example.com.

Supported on:

Android only: Chrome 84 or later

Tell your PWA about your website

First, you'll need to add digital asset links to the server where your PWA is served from. This will help define the relationship between your website and your PWA, and verifies that only your website can check if your PWA is installed.

Add an assetlinks.json file to the /.well-known/ directory of the domain where the PWA lives, for example app.example.com. In the site property, provide the full path to the web app manifest that will perform the check (not the web app manifest of your 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"
    }
  }
]

Next, tell your website about your PWA app by adding a web app manifest to your page. The manifest must include the related_applications property, an array that provides the details about your PWA, including platform and url.

platform must be webapp
url is the full path to the web app manifest of your PWA

{
  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json"
  }]
}

Check if your PWA is installed

Finally, call the asynchronous function navigator.getInstalledRelatedApps() to check if your PWA is installed.

Still have questions?

Still have questions? Check the getInstalledRelatedApps tag on StackOverflow to see if anyone else has had similar questions. If not, ask your question there, and be sure to tag it with the progressive-web-apps tag. Our team frequently monitors that tag and tries to answer your questions.

Feedback

Did you find a bug with Chrome's implementation? Or is the implementation different from the spec?

File a bug at https://new.crbug.com. Include as much detail as you can, provide instructions for reproducing the bug, and enter Mobile>WebAPKs in the Components box.

Helpful links

Public explainer for Get Installed Related Apps API
Spec draft
Tracking bug
ChromeStatus.com entry
Blink Component: Mobile>WebAPKs

Thanks

Special thanks to Sunggook Chue at Microsoft for helping with the details for testing Windows apps, and Rayan Kanso for help with the Chrome details.

Is your app installed? Get Installed Related Apps API will tell you! Stay organized with collections Save and categorize content based on your preferences.

What is the Get Installed Related Apps API?

Supported app types you can check

Check if your Android app is installed

Tell your Android app about your website

Tell your website about your Android app

Check if your app is installed

Check if your Windows (UWP) app is installed

Tell your Windows app about your website

Tell your website about your Windows app

Check if your app is installed

Check if your Progressive Web App is already installed (in scope)

Tell your PWA about itself

Check if your PWA is installed

Check if your Progressive Web App is installed (out of scope)

Tell your PWA about your website

Check if your PWA is installed

Still have questions?

Feedback

Helpful links

Thanks

Is your app installed? Get Installed Related Apps API will tell you!