Метод getInstalledRelatedApps()
позволяет вашему веб-сайту проверить, установлено ли ваше приложение iOS/Android/настольное приложение или PWA на устройстве пользователя.
Что такое API getInstalledRelatedApps()?
getInstalledRelatedApps()
позволяет вашей странице проверить, установлено ли ваше мобильное или настольное приложение или, в некоторых случаях, ваше прогрессивное веб-приложение (PWA) на устройстве пользователя, и позволяет вам настроить взаимодействие с пользователем, если оно является.
Например, если ваше приложение уже установлено:
- Перенаправление пользователя со страницы маркетинга продукта прямо в ваше приложение.
- Централизация некоторых функций, таких как уведомления, в другом приложении, чтобы предотвратить дублирование уведомлений.
- Не рекламировать установку вашего PWA, если другое ваше приложение уже установлено.
Чтобы использовать API getInstalledRelatedApps()
, вам необходимо сообщить приложению о своем сайте, а затем сообщить сайту о своем приложении. Определив связь между ними, вы можете проверить, установлено ли приложение.
Поддерживаемые типы приложений, которые вы можете проверить
Тип приложения | Можно проверить с |
---|---|
Android-приложение | только для Android Chrome 80 или новее |
Приложение для Windows (UWP) | только для Windows Chrome 85 или новее Край 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
своим доменом. Обязательно включите экранирующие символы.
<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
— это имя семейства пакетов вашего приложения, к которому добавляется значениеId
<Application>
в файле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).
// 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()
Вызов 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
в поле «Компоненты» . Glitch отлично подходит для быстрого и простого обмена репродукциями.
Показать поддержку API
Планируете ли вы использовать API getInstalledRelatedApps()
? Ваша публичная поддержка помогает команде Chrome расставлять приоритеты для функций и показывает другим поставщикам браузеров, насколько важно их поддерживать.
- Расскажите о том, как вы планируете использовать API, в теме обсуждения WICG .
- Отправьте твит @ChromiumDev, используя хэштег
#getInstalledRelatedApps
, и сообщите нам, где и как вы его используете.
Полезные ссылки
- Публичное объяснение API
getInstalledRelatedApps()
- Проект спецификации
- Ошибка отслеживания
- Запись ChromeStatus.com
- Компонент Blink:
Mobile>WebAPKs
Спасибо
Особая благодарность Сунгуку Чу из Microsoft за помощь с деталями тестирования приложений для Windows и Райану Кансо за помощь с деталями Chrome.