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

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

Pete LePage

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

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

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

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

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

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

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

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

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

Проверьте, установлено ли ваше приложение для 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"
    }
  }
]

Примечание. Дважды проверьте имя файла при создании файла assetlinks.json . Я потратил много часов на отладку только для того, чтобы понять, что добавил лишнюю букву «s» в имя файла.

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