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

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

Pete LePage

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

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

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

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

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

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

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

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

Расскажите приложению 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 о своем веб-сайте

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

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

Расскажите 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.