Установлено ли ваше приложение? getInstalledRelatedApps() покажет!

Метод getInstalledRelatedApps() позволяет вашему веб-сайту проверять, установлено ли ваше приложение для iOS/Android/десктопа или PWA на устройстве пользователя.

Dec 20, 2018 — Обновлено Sep 16, 2021

Available in: English, 日本語, and 한국어

Appears in: Прогрессивные веб-приложения

Pete LePage

Twitter GitHub Glitch Homepage

Что такое API getInstalledRelatedApps()? #

Веб-сайт, использующий `getInstalledRelatedApps()`, чтобы определить, установлено ли его приложение для Android.

getInstalledRelatedApps() позволяет вашей странице проверять, установлено ли ваше мобильное или десктопное приложение или, в некоторых случаях, прогрессивное веб-приложение (PWA) на устройстве пользователя, и позволяет настраивать взаимодействие с пользователем, когда приложение установлено.

Например, если ваше приложение уже установлено:

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

Чтобы использовать API getInstalledRelatedApps(), вам необходимо сообщить своему приложению о своем сайте, а затем сообщить своему сайту о своем приложении. Определив связь между ними, вы можете проверить, установлено ли приложение.

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

Тип приложения	Проверяется с
Приложение для Android	Только Android Chrome 80 или новее
Приложение для Windows (UWP)	Только Windows Chrome 85 или новее Edge 85 или новее
Прогрессивное веб-приложение Установлено в той же или другой области определения.	Только Android Chrome 84 или новее

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

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

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

Android: Chrome 80 или новее

Сообщите своему Android-приложению о своем веб-сайте #

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

В AndroidManifest.xml вашего Android-приложения добавьте запись asset_statements:

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

Затем в strings.xml добавьте следующую инструкцию ресурса, обновляя site со своим доменом. Не забудьте добавить escape-символы.

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

После завершения опубликуйте обновленное приложение для Android в магазине Play.

Сообщите своему сайту о своем приложении для Android #

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

Значение platform должно быть play
id — это идентификатор приложения GooglePlay для вашего 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.

Проверка, установлено ли ваше прогрессивное веб-приложение (в области определения) #

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

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

Android: Chrome 84 или новее

Сообщите своему PWA о нем #

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

Значение platform должно быть webapp
url — это полный путь к манифесту веб-приложения вашего PWA

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

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

Наконец, вызовите navigator.getInstalledRelatedApps() из области определения вашего PWA, чтобы проверить, установлено ли оно. Если getInstalledRelatedApps() вызывается вне области определения вашего PWA, метод вернет false. См. подробности в следующем разделе.

Попробуйте демонстрацию

Проверка, установлено ли ваше прогрессивное веб-приложение (вне области определения) #

Ваш сайт может проверить, установлено ли ваше 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).

// Обслуживается с 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() #

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

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

Чтобы сайты не тестировали слишком широкий набор собственных приложений, во внимание будут приниматься только первые три приложения, объявленные в манифесте веб-приложения.

Как и большинство других мощных веб-API, API getInstalledRelatedApps() доступен только при обслуживании по HTTPS.

Остались вопросы? #

Остались вопросы? Поищите записи с тегом getInstalledRelatedApps на StackOverflow, чтобы узнать, были ли у кого-нибудь похожие вопросы. Если нет, задайте там свой вопрос и обязательно пометьте его тегом progressive-web-apps. Наша команда часто отслеживает этот тег и старается ответить на ваши вопросы.

Отзывы #

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

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

Поддержите API #

Собираетесь использовать API getInstalledRelatedApps()? Ваша публичная поддержка помогает команде Chrome расставлять функции в порядке приоритетности и показывает другим поставщикам браузеров, насколько важно их поддерживать.

Расскажите, как вы планируете использовать API, в ветке обсуждения WICG .
Отправьте твит на @ChromiumDev с хэштегом #getInstalledRelatedApps и сообщите нам, где и как вы его используете.

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

Благодарности #

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

Последнее обновление

Sep 16, 2021 — Улучшить статью

Return to all articles