アプリはインストールされていますか?getInstalledRelatedApps() が表示されます。

getInstalledRelatedApps() メソッドを使用すると、ウェブサイトで ユーザーのデバイスに iOS、Android、デスクトップ アプリ、PWA がインストールされていること。

getInstalledRelatedApps() API とは何ですか?

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> getInstalledRelatedApps() を使用してウェブサイトが Android アプリはすでにインストールされています。

getInstalledRelatedApps() を使用すると、ページで次のことが可能になります。 モバイルアプリかデスクトップ アプリか、場合によってはプログレッシブ アプリの ウェブアプリ(PWA)はユーザーのデバイスにすでにインストールされており、次のことができます。 カスタマイズが可能です。

たとえば、アプリがすでにインストールされている場合は、次のようにします。

  • プロダクトのマーケティング ページからアプリに直接ユーザーをリダイレクトする。
  • 他のアプリで通知などの一部の機能を一元化して、 通知の重複を防止できます。
  • PWA のインストールを促進していない 他のアプリがすでにインストールされています。

getInstalledRelatedApps() API を使用するには、アプリに以下の情報を伝える必要があります。 サイトにアプリについて伝えましょうルールを アプリがインストールされているかどうかを確認できます。

確認可能なサポート対象のアプリの種類

アプリの種類 確認元
Android アプリ Android のみ
Chrome 80 以降
Windows(UWP)アプリ Windows のみ
Chrome 85 以降
Edge 85 以降
プログレッシブ ウェブアプリ
同じスコープでインストールされているか、 異なるスコープです。
Android のみ
Chrome 84 以降

Android アプリがインストールされているかどうかを確認する

ウェブサイトで、Android アプリがインストールされているかどうかを確認できます。

サポート対象

Android: Chrome 80 以降

Android アプリにウェブサイトについて設定する

まず、Android アプリを更新して関係を定義する必要があります。 ウェブサイトと Android アプリ間の デジタル アセット リンク システム。これにより ウェブサイトで Android アプリがインストールされているかどうかを確認できます。

Android アプリの AndroidManifest.xmlasset_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 アプリを Google Play ストアに公開します。

Android アプリに関する情報をウェブサイトに掲載する

次に、Android アプリについてウェブサイトに ページにウェブアプリ マニフェストを追加します。マニフェストでは、 related_applications プロパティを含めます。これは、詳細を指定する配列です。 アプリに関する情報(platformid など)が表示されます。

  • platformplay にする必要があります。
  • id は、Android アプリの Google Play アプリケーション ID です。
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

アプリがインストールされているかどうかを確認する

最後に、navigator.getInstalledRelatedApps() を呼び出して、 Android アプリがインストールされている。

デモを試す

Windows(UWP)アプリがインストールされているかどうかを確認する

ウェブサイトで、Windows アプリ(UWP を使用して構築)がインストールされているかどうかを確認できます。

サポート対象

Windows: Chrome 85 以降、Edge 85 以降

Windows アプリにウェブサイトについて設定する

Windows アプリを更新して、 URI ハンドラを使用して、ウェブサイトと Windows アプリケーションにアクセスできます。この 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/ ディレクトリにあります。マイページ パッケージ ファミリー名はアプリ マニフェストの [Packageaging] セクションで確認できます。 デザイナーです。

[{
  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
  "paths": [ "*" ]
}]

詳しくは、アプリ URI ハンドラを使用してウェブサイトに対してアプリを有効にするをご覧ください。 URI ハンドラの設定に関する詳細をすべて記載しています。

Windows アプリに関する情報をウェブサイトに設定してください

次に、Windows アプリについてウェブサイトに ページにウェブアプリ マニフェストを追加します。マニフェストでは、 related_applications プロパティを含める。これは、詳細を指定する配列です。 アプリに関する情報(platformid など)が表示されます。

  • platformwindows にする必要があります。
  • id は、アプリのパッケージ ファミリー名に <Application> Id を付加したものです の値をPackage.appxmanifestファイルに含めます。
{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App",
  }]
}

アプリがインストールされているかどうかを確認する

最後に、navigator.getInstalledRelatedApps() を呼び出して、 Windows アプリがインストールされている。

プログレッシブ ウェブアプリがすでにインストールされているかどうかを確認する(サポート範囲内)

PWA は、インストールがすでにインストールされているかどうかを確認できます。この例では リクエストの発行は、同じドメイン上かつスコープ内に存在する必要があります。 ウェブアプリ マニフェストのスコープで定義された PWA のスコープに基づいて作成されます。

サポート対象

Android: Chrome 84 以降

PWA に自身について言及する

related_applications エントリを PWA のウェブアプリ マニフェスト

  • platformwebapp にする必要があります。
  • url は、PWA のウェブアプリ マニフェストのフルパスです。
{
  
  "scope": "/",
  "start_url": "/",
  "related_applications": [{
    "platform": "webapp",
    "url": "https://example.com/manifest.json",
  }],
  
}

PWA がインストールされているかどうかを確認する

最後に、Python 内から navigator.getInstalledRelatedApps() を呼び出します。 PWA のスコープを調べて、インストールされているかどうかを確認します。条件 getInstalledRelatedApps() が PWA の範囲外で呼び出された場合は、 false を返します。詳細については、次のセクションをご覧ください。

デモを試す

プログレッシブ ウェブアプリがインストールされているかどうかを確認する(サポート範囲外)

PWA がインストールされているかどうかをウェブサイトで確認できます(ページが外部にあってもかまいません) PWA の範囲を確認します。たとえば、ランディングページが /landing/ は、/pwa/ から配信される PWA がインストールされているか、または ランディング ページは www.example.com から配信され、PWA は app.example.com

サポート対象

Android: Chrome 84 以降

PWA にウェブサイトに関する情報を伝える

まず、PWA がインストールされているサーバーにデジタル アセット リンクを追加する必要があります。 指定します。これにより、ウェブサイトと Google の また、PWA がインストールされているかどうかをウェブサイトのみが確認できるようにします。

assetlinks.json ファイルを /.well-known/ ディレクトリに追加します。 (例: 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 プロパティを含めます。これは、詳細を指定する配列です。 platformurl など)。

  • platformwebapp にする必要があります。
  • url は、PWA のウェブアプリ マニフェストのフルパスです。
{
  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json",
  }]
}

PWA がインストールされているかどうかを確認する

最後に、navigator.getInstalledRelatedApps() を呼び出して、 PWA がインストールされていること。

デモを試す

getInstalledRelatedApps() を呼び出す

navigator.getInstalledRelatedApps() を呼び出すと、次の Promise が返されます。 は、ユーザーのデバイスにインストールされているアプリの配列で解決されます。

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

サイトが独自にテストする範囲が広すぎるのを防ぐために、 ウェブアプリ マニフェストで宣言されている最初の 3 つのアプリのみが 考慮されません。

他の多くの強力なウェブ API と同様に、getInstalledRelatedApps() API は HTTPS 経由で配信される場合にのみ使用できます。

ご不明な点がある場合

ご不明な点がありましたら、StackOverflow の getInstalledRelatedApps タグを確認します。 同様の質問が他にないか確認しましょうわからない場合は、 質問を検索し、必ず progressive-web-apps タグ。当社のチームは 質問に回答します。

フィードバック

Chrome の実装にバグは見つかりましたか?それとも どうなるでしょうか

  • https://new.crbug.com でバグを報告します。できるだけ多くの バグを再現するための簡単な手順を提供する。 [コンポーネント] ボックスに「Mobile>WebAPKs」と入力します。グリッチ すばやく簡単に再現を共有するのに最適です。

API のサポートを表示する

getInstalledRelatedApps() API を使用する予定はありますか?公開 サポートにより、Chrome チームは機能の優先順位付けを行い、他の サポートの重要性を認識しています。

関連情報

ありがとう

Microsoft の Sunggook Chue に詳細に協力してくれてありがとう をご覧ください。Chrome の詳細については、Rayan Kanso をご覧ください。