Установлено ли ваше приложение? API Get Install Related Apps вам подскажет!

Пит ЛеПейдж
Алексей Родионов
Alexey Rodionov
X GitHub LinkedIn

API Get Installed Related Apps позволяет получить список установленных связанных приложений вместе с подробной информацией о них.

Он позволяет вам проверить, установлено ли на текущем устройстве приложение Progressive Web App (PWA), приложение Android или приложение Universal Windows Platform (UWP) как из самого PWA, так и с соответствующей веб-страницы (например, веб-сайта маркетинга продукта).

Если приложение уже установлено, вы можете настроить пользовательский интерфейс.

Например:

  • Не рекламируйте установку вашего PWA, если у вас уже установлено другое приложение.
  • Перенаправление пользователя с сайта маркетинга продукта непосредственно в ваше приложение.
  • Централизация некоторых функций, таких как уведомления, в другом приложении для предотвращения дублирования уведомлений.

Что такое API для установки связанных приложений?

Вызов асинхронного метода navigator.getInstalledRelatedApps() возвращает обещание, которое разрешается с помощью массива объектов, содержащих сведения о приложениях, которые:

  • установлен на текущем устройстве,
  • определенный в поле related_applications манифеста веб-приложения,
  • иметь подтвержденную связь со страницей, на которой вызывается метод navigator.getInstalledRelatedApps() (подробности см. в следующих разделах). 
const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

Вызов console.log(installedRelatedApps) возвращает что-то вроде:

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

Например, чтобы проверить, установлены ли на устройстве пользователя какие-либо связанные приложения, можно использовать следующий однострочник:

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

Если вы знаете идентификатор пакета, чтобы получить номер версии установленного соответствующего приложения Android, вы можете использовать следующую одностроковую команду:

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

Поддерживаемые типы приложений, которые вы можете проверить

Тип приложения Можно проверить из
Android-приложение Только для Android:
Chrome 80 или более поздняя версия
Приложение универсальной платформы Windows (UWP) Только для Windows:
Chrome 85 или более поздней версии
Edge 85 или более поздняя версия
Progressive Web App (PWA), установленное в той же области действия на том же источнике Андроид:
Chrome 84 или более поздней версии
Настольные компьютеры (Windows, macOS, Linux, ChromeOS):
Chrome 140 или более поздняя версия
Edge 140 или более поздняя версия
Прогрессивное веб-приложение (PWA)
установлен в разных областях на том же или другом источнике		 Только для Android:
Chrome 84 или более поздней версии

Проверьте, установлено ли ваше приложение для Android.

Ваш сайт может проверить, установлено ли ваше приложение для Android.

Поддерживается на:

  • Только для Android: Chrome 80 или более поздняя версия

Расскажите своему Android-приложению о своем веб-сайте

Во-первых, вам необходимо обновить приложение для Android, чтобы определить связь между вашим веб-сайтом и приложением для Android с помощью системы ссылок на цифровые активы . Это гарантирует, что только ваш веб-сайт сможет проверить, установлено ли ваше приложение для 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 Store или на любой другой платформе распространения приложений для Android.

Расскажите своему сайту о вашем приложении для Android

Затем расскажите о своём приложении для Android на сайте, добавив на страницу манифест веб-приложения . Манифест должен включать свойство related_applications — массив, содержащий информацию о вашем приложении, включая platform и id .

  • platform должна быть play
  • id — это идентификатор пакета Android. 
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome"
  }]
}

Проверьте, установлено ли ваше приложение.

Наконец, вызовите асинхронную функцию navigator.getInstalledRelatedApps() , чтобы проверить, установлено ли ваше приложение для Android.

Проверьте, установлено ли ваше приложение Windows (UWP)

Ваш веб-сайт может проверить, установлено ли приложение Windows (созданное с использованием UWP).

Поддерживается на:

  • Только для Windows: Chrome 85 или более поздняя версия, Edge 85 или более поздняя версия

Расскажите приложению Windows о своем веб-сайте

Вам необходимо обновить приложение Windows, чтобы определить связь между вашим веб-сайтом и приложением Windows с помощью обработчиков URI . Это гарантирует, что только ваш веб-сайт сможет проверить, установлено ли ваше приложение Windows.

Добавьте регистрацию расширения 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/ . Имя семейства пакетов можно найти в разделе «Упаковка» конструктора манифеста приложения.

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

Подробную информацию о настройке обработчиков URI см. в разделе Включение приложений для веб-сайтов с помощью обработчиков URI приложений .

Расскажите своему сайту о вашем приложении для Windows

Затем расскажите о своём приложении для Windows на сайте, добавив на страницу манифест веб-приложения . Манифест должен включать свойство related_applications — массив, содержащий информацию о вашем приложении, включая platform и id .

  • platform должна быть windows
  • id — это имя семейства пакетов вашего приложения, добавленное к значению <Application> Id в файле Package.appxmanifest . 
{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App"
  }]
}

Проверьте, установлено ли ваше приложение.

Наконец, вызовите асинхронную функцию navigator.getInstalledRelatedApps() , чтобы проверить, установлено ли ваше приложение Windows.

Посмотрите эту демо-версию .

Проверьте, установлено ли уже ваше Progressive Web App (в рамках области действия)

Ваш PWA может проверить, установлено ли приложение. В этом случае страница, отправляющая запрос, должна находиться в том же домене и в области действия вашего PWA, как определено в манифесте веб-приложения.

Поддерживается на:

  • Android: Chrome 84 или более поздняя версия
  • Настольные компьютеры (Windows, macOS, Linux, ChromeOS): Chrome 140 или более поздняя версия, Edge 140 или более поздняя версия

Расскажите о своей PWA

Расскажите о своем PWA, добавив запись related_applications в манифест веб-приложения PWA.

  • platform должна быть webapp
  • url — это путь (может быть относительным) к манифесту веб-приложения вашего PWA.
  • id — это идентификатор веб-приложения, объявленный в поле id манифеста веб-приложения или вычисленный браузером (обязательно для настольных компьютеров, необязательно для Android) 
{
  …
  "scope": "/",
  "start_url": "/?utm_source=home_screen",
  "related_applications": [{
    "platform": "webapp",
    "url": "/manifest.json",
    "id": "https://example.com/?utm_source=home_screen"
  }],
  …
}

Проверьте, установлен ли ваш PWA

Наконец, вызовите асинхронную функцию navigator.getInstalledRelatedApps() из области действия вашего PWA, чтобы проверить, установлено ли приложение. Если navigator.getInstalledRelatedApps() вызывается вне области действия вашего PWA, функция вернёт [] . Подробности см. в следующем разделе.

Проверьте, установлено ли ваше приложение Progressive Web (вне области применения)

Ваш веб-сайт может проверить, установлен ли ваш 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 на StackOverflow, чтобы узнать, есть ли у кого-нибудь похожие вопросы. Если нет, задайте свой вопрос там, обязательно добавив тег progressive-web-apps . Наша команда регулярно отслеживает этот тег и старается отвечать на ваши вопросы.

Обратная связь

Вы обнаружили ошибку в реализации Chrome? Или реализация отличается от спецификации?

  • Сообщите об ошибке на сайте https://new.crbug.com. Опишите её как можно подробнее, предоставьте инструкции по воспроизведению ошибки и введите Mobile>WebAPKs в поле «Компоненты» .

Полезные ссылки

Спасибо

Особая благодарность Сунгуку Чу из Microsoft за помощь с деталями тестирования приложений для Windows и Райану Кансо за помощь с деталями Chrome.