Is your app installed? getInstalledRelatedApps() will tell you!

What is the getInstalledRelatedApps() API? #

A website using getInstalledRelatedApps() to determine if its
Android app is already installed.

The getInstalledRelatedApps() makes it possible for your page to
check if your iOS/Android/d…


This content originally appeared on web.dev and was authored by Pete LePage

What is the getInstalledRelatedApps() API?

A website using getInstalledRelatedApps() to determine if its Android app is already installed.

The getInstalledRelatedApps() makes it possible for your page to check if your iOS/Android/desktop app, or Progressive Web App (PWA) is already installed on a user's device, and allows you to customize the user experience if your app is already installed.

For example, if your app is already installed:

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

Supported app types you can check

Your website can check if your:

The getInstalledRelatedApps() API only allows you to check if your apps are installed. You cannot get a list of all installed apps, or check if other 3rd party apps are installed.

Check if your Android app is installed

Your website can check if your Android app is installed.

  • Android: 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 ensures 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, publish your updated Android app to the Play store.

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 GooglePlay application ID for your Android app
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

Check if your app is installed

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

Try the demo

Check if your Windows (UWP) app is installed

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

  • Windows: 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 ensures 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 navigator.getInstalledRelatedApps() to check if your Windows app is installed.

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.

  • Android: Chrome 84 or later

Tell your PWA about itself

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

  • platform must be webapp
  • url is the full path to the web app manifest of your PWA
{
  …
  "scope": "/",
  "start_url": "/",
  "related_applications": [{
    "platform": "webapp",
    "url": "https://example.com/manifest.json",
  }],
  …
}

Check if your PWA is installed

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

Try the demo

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.

  • Android: 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 ensures 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"
    }
  }
]

Double check the file name when you create your assetlinks.json file, I've wasted many hours debugging, only to realize I'd added an extra 's' in the file name.

Tell your website about your PWA

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 navigator.getInstalledRelatedApps() to check if your PWA is installed.

Try the demo

Calling getInstalledRelatedApps()

Calling navigator.getInstalledRelatedApps() returns a promise that resolves with an array of your apps that are installed on the user's device.

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

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 getInstalledRelatedApps() API is only available when served over HTTPS.

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 simple instructions for reproducing the bug, and enter Mobile>WebAPKs in the Components box. Glitch works great for sharing quick and easy repros.

Show support for the API

Are you planning to use the getInstalledRelatedApps() API? Your public support helps the Chrome team to prioritize features and shows other browser vendors how critical it is to support them.

  • Share how you plan to use the API on the WICG Discourse thread.
  • Send a Tweet to @ChromiumDev with the #getInstalledRelatedApps hashtag and let us know where and how you're using it.

Helpful links

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.


This content originally appeared on web.dev and was authored by Pete LePage


Print Share Comment Cite Upload Translate Updates
APA

Pete LePage | Sciencx (2018-12-20T00:00:00+00:00) Is your app installed? getInstalledRelatedApps() will tell you!. Retrieved from https://www.scien.cx/2018/12/20/is-your-app-installed-getinstalledrelatedapps-will-tell-you/

MLA
" » Is your app installed? getInstalledRelatedApps() will tell you!." Pete LePage | Sciencx - Thursday December 20, 2018, https://www.scien.cx/2018/12/20/is-your-app-installed-getinstalledrelatedapps-will-tell-you/
HARVARD
Pete LePage | Sciencx Thursday December 20, 2018 » Is your app installed? getInstalledRelatedApps() will tell you!., viewed ,<https://www.scien.cx/2018/12/20/is-your-app-installed-getinstalledrelatedapps-will-tell-you/>
VANCOUVER
Pete LePage | Sciencx - » Is your app installed? getInstalledRelatedApps() will tell you!. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2018/12/20/is-your-app-installed-getinstalledrelatedapps-will-tell-you/
CHICAGO
" » Is your app installed? getInstalledRelatedApps() will tell you!." Pete LePage | Sciencx - Accessed . https://www.scien.cx/2018/12/20/is-your-app-installed-getinstalledrelatedapps-will-tell-you/
IEEE
" » Is your app installed? getInstalledRelatedApps() will tell you!." Pete LePage | Sciencx [Online]. Available: https://www.scien.cx/2018/12/20/is-your-app-installed-getinstalledrelatedapps-will-tell-you/. [Accessed: ]
rf:citation
» Is your app installed? getInstalledRelatedApps() will tell you! | Pete LePage | Sciencx | https://www.scien.cx/2018/12/20/is-your-app-installed-getinstalledrelatedapps-will-tell-you/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts