![Pete LePage](https://web.dev/images/authors/petelepage.jpg) Pete LePage [X](https://twitter.com/petele) [GitHub](https://github.com/petele) [Mastodon](https://techhub.social/@petele) [Homepage](https://petelepage.com/) ![Alexey Rodionov](https://web.dev/images/authors/alexeyrodionov.jpg) Alexey Rodionov [X](https://twitter.com/alexey_rodionov) [GitHub](https://github.com/FluorescentHallucinogen) [LinkedIn](https://www.linkedin.com/in/alexey-rodionov)
The [Get Installed Related Apps API](https://wicg.github.io/get-installed-related-apps/spec/) 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). > [!NOTE] > **Note:** These can be not only native Android apps or Universal Windows Platform (UWP) apps, but also PWAs packaged using Bubblewrap and PWABuilder. > > [Bubblewrap](https://github.com/GoogleChromeLabs/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)](https://developer.chrome.com/docs/android/trusted-web-activity). > > [PWABuilder](https://pwabuilder.com) is an [open source](https://github.com/pwa-builder) 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](https://web.dev/articles/customize-install) 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. > [!NOTE] > **Note:** The Get Installed Related Apps API only lets you check if *your* apps are installed. You cannot get a list of all installed apps, or check if other 3rd party apps are installed. > > 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 *verified 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`](https://wicg.github.io/manifest-incubations/#related_applications-member) 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; > [!NOTE] > **Note:** The [min_version](https://wicg.github.io/manifest-incubations/#min_version-member) and [fingerprints](https://wicg.github.io/manifest-incubations/#fingerprints-member) fields are part of the spec, but their support is not implemented in any browser for any platform. > > 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. > [!NOTE] > **Note:** It can be a PWA packaged using [Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) or [PWABuilder](https://pwabuilder.com) into an Android app that launches your PWA as [Trusted Web Activity (TWA)](https://developer.chrome.com/docs/android/trusted-web-activity). **Supported on:** - 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 verified relationship between your website and Android application using the [Digital Asset Links system](https://developers.google.com/digital-asset-links/v1/getting-started). 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: ... ... Then, in `strings.xml`, add the following asset statement, updating `site` with your domain. Be sure to include the escaping characters. [ { \"relation\": [\"delegate_permission/common.handle_all_urls\"], \"target\": { \"namespace\": \"web\", \"site\": \"https://example.com\" } } ] Pro tip: This is an array. This means you can define a verified relationship between your Android app and more than one of your websites. Once completed, install the updated app on the device or publish to Google Play Store or any of the other Android app distribution platforms. > [!NOTE] > **Note:** [Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) and [PWABuilder](https://pwabuilder.com) automatically make all the necessary changes to the application described earlier for you. ### Tell your website about your Android app Next, tell your website about your Android app by [adding a web app manifest](https://web.dev/articles/add-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.example.twa" } ] ... } Pro tip: This is an array. This means you can define a verified relationship between your website and more than one of your Android apps. ### Check if your app is installed Finally, call the asynchronous function [`navigator.getInstalledRelatedApps()`](https://developer.chrome.com/docs/capabilities/get-installed-related-apps#what) 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. > [!NOTE] > **Note:** It can be a PWA packaged using [PWABuilder](https://pwabuilder.com) into an Universal Windows Platform (UWP) app that launches your PWA. **Supported on:** - 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 verified relationship between your website and Windows application using [URI Handlers](https://docs.microsoft.com/en-us/windows/uwp/launch-resume/web-to-app-linking). 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 `AppxManifest.xml` or `Package.appxmanifest`. For example, if your website's address is `example.com` you would add the following entry in your app's manifest: ... Note, you may need to add the [`uap3` namespace](https://docs.microsoft.com/en-us/uwp/schemas/appxpackage/uapmanifestschema/element-uap3-extension-manual#examples) to your `` attribute. If your website has multiple addresses then add a separate `` entry inside of the `` for each address. > [!NOTE] > **Note:** [PWABuilder](https://pwabuilder.com) automatically make all the necessary changes to the application described earlier for you if the **Enable App URI Handler** checkbox remains checked (it is checked by default). 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 in the `/.well-known/` directory or on your server root. [ { "packageFamilyName": "MyApp_9jmtgj1pbbz6e", "paths": [ "*" ] } ] Pro tip: This is an array. This means you can define a verified relationship between your website and more than one of your Windows apps. To figure out the Package Family Name you can install the app, run the following command in PowerShell, and find your app in the list: Get-AppxPackage | Select-Object PackageFamilyName See [Enable apps for websites using app URI handlers](https://docs.microsoft.com/en-us/windows/uwp/launch-resume/web-to-app-linking) 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](https://web.dev//articles/add-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 with `!App` appended as a suffix at the end { ... "related_applications": [ { "platform": "windows", "id": "MyApp_9jmtgj1pbbz6e!App" } ] ... } Pro tip: This is an array. This means you can define a verified relationship between your website and more than one of your Windows apps. ### Check if your app is installed Finally, call the asynchronous function [`navigator.getInstalledRelatedApps()`](https://developer.chrome.com/docs/capabilities/get-installed-related-apps#what) to check if your Windows app is installed. Check out this [demo](https://edgepwaone.azurewebsites.net/). ## 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](https://web.dev/add-manifest/#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](https://web.dev/articles/add-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](https://developer.chrome.com/docs/capabilities/pwa-manifest-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()`](https://developer.chrome.com/docs/capabilities/get-installed-related-apps#what) from within the [scope](https://web.dev/add-manifest/#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](https://web.dev/add-manifest/#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 verified relationship between your website and your PWA, and verifies that only your website can check if your PWA is installed. Add an [`assetlinks.json`](https://developers.google.com/digital-asset-links/v1/getting-started) file to the [`/.well-known/`](https://tools.ietf.org/html/rfc5785) 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" } } ] Pro tip: This is an array. This means you can define a verified relationship between your PWA and more than one of your websites. > [!NOTE] > **Note:** Double check the filename when you create your `assetlinks.json` file, I've wasted many hours debugging, only to realize I'd added an extra 's' in the filename. ### Tell your website about your PWA Next, tell your website about your PWA app by [adding a web app manifest](https://web.dev/articles/add-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" } ] ... } Pro tip: This is an array. This means you can define a verified relationship between your website and more than one of your PWAs. ### Check if your PWA is installed Finally, call the asynchronous function [`navigator.getInstalledRelatedApps()`](https://developer.chrome.com/docs/capabilities/get-installed-related-apps#what) to check if your PWA is installed. ## Still have questions? Still have questions? Check the [`getInstalledRelatedApps` tag on StackOverflow](https://stackoverflow.com/search?q=getinstalledrelatedapps) to see if anyone else has had similar questions. If not, ask your [question](https://stackoverflow.com/questions/tagged/progressive-web-apps) there, and be sure to tag it with the [`progressive-web-apps`](https://stackoverflow.com/questions/tagged/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](https://github.com/WICG/get-installed-related-apps/blob/main/EXPLAINER.md) - [Spec draft](https://wicg.github.io/get-installed-related-apps/spec/) - [Tracking bug](https://bugs.chromium.org/p/chromium/issues/detail?id=895854) - [ChromeStatus.com entry](https://www.chromestatus.com/feature/5695378309513216) - Blink Component: [`Mobile>WebAPKs`](https://chromestatus.com/features#component%3A%20Mobile%3EWebAPKs) ## 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.