Ваше приложение установлено? getInstalledRelatedApps() сообщит вам об этом!

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

Pete LePage

Alexey Rodionov

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

Метод getInstalledRelatedApps() возвращает список установленных связанных приложений.

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

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

Это позволяет вашей странице проверять, установлено ли уже на устройстве пользователя приложение Android, приложение универсальной платформы Windows (UWP) или прогрессивное веб-приложение (PWA), и позволяет настраивать пользовательский интерфейс, если это так.

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

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

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

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

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

Расскажите своему 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 о своем веб-сайте

Вам необходимо обновить приложение 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, как определено в манифесте веб-приложения.

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

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

• platform должна быть webapp
• url — это путь (может быть относительным) к манифесту веб-приложения вашего PWA.
• id — полный путь к веб-приложению (обязательно для настольного компьютера, необязательно для Android)

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

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

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

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

Ваш веб-сайт может проверить, установлен ли ваш PWA, даже если страница находится за пределами области действия вашего PWA. Например, целевая страница, обслуживаемая с /landing/ может проверить, установлен ли PWA, обслуживаемый с /pwa/ , или обслуживается ли ваша целевая страница с www.example.com , а ваш PWA — с app.example.com .

Расскажите 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 в поле «Компоненты» .

Показать поддержку API

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

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

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

• Публичное объяснение для API getInstalledRelatedApps()
• Проект спецификации
• Ошибка отслеживания
• Запись ChromeStatus.com
• Компонент Blink: Mobile>WebAPKs

Спасибо

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