Deze pagina is vertaald door de Cloud Translation API.

Is je app geïnstalleerd? De Get Installed Related Apps API vertelt het je!

Pete LePage

Alexey Rodionov

Met de API Get Installed Related Apps kunt u een lijst opvragen van de geïnstalleerde gerelateerde apps, inclusief details hierover.

Hiermee kunt u controleren of uw Progressive Web App (PWA), Android-app of Universal Windows Platform (UWP)-app op het huidige apparaat is geïnstalleerd, zowel vanaf de PWA zelf als vanaf een gerelateerde webpagina (bijvoorbeeld een website voor productmarketing).

Bubblewrap is een open source set bibliotheken en een commandline tool (CLI) voor Node.js. Bubblewrap is ontwikkeld door het Google Chrome-team om ontwikkelaars te helpen bij het genereren, bouwen en ondertekenen van een Android-project dat je PWA start als een Trusted Web Activity (TWA) .

PWABuilder is een open sourceproject dat is ontwikkeld door Microsoft. Hiermee kunnen ontwikkelaars hun PWA's verpakken en ondertekenen voor publicatie in verschillende winkels, waaronder Microsoft Store, Google Play Store, App Store en Meta Quest Store. Dit doen ze door de URL van een PWA in te voeren, de metagegevens voor de app in te voeren/te bewerken en op de knop Genereren te klikken.

PWABuilder maakt gebruik van Bubblewrap om PWA's voor Android en ChromeOS te verpakken.

Als de app al is geïnstalleerd, kunt u de gebruikerservaring aanpassen.

Bijvoorbeeld:

De installatie van uw PWA niet promoten als uw andere app al is geïnstalleerd.
De gebruiker rechtstreeks van een productmarketingwebsite naar uw app doorverwijzen.
Centraliseer bepaalde functionaliteiten, zoals meldingen, in de andere app om dubbele meldingen te voorkomen.

Om de API 'Get Installed Related Apps' te gebruiken, moet je je app over je pagina vertellen en vervolgens je pagina over je app. Nadat je de relatie tussen beide hebt gedefinieerd, kun je controleren of de gerelateerde app is geïnstalleerd.

Om te voorkomen dat sites een te brede set van hun eigen apps testen, worden alleen de eerste drie apps die in het web-appmanifest zijn gedeclareerd, in aanmerking genomen.

Net als de meeste andere krachtige web-API's is de Get Installed Related Apps API alleen beschikbaar wanneer deze via HTTPS wordt aangeboden.

Wat is de Get Installed Related Apps API?

Als u de asynchrone methode navigator.getInstalledRelatedApps() aanroept, wordt er een belofte geretourneerd die wordt omgezet in een reeks objecten met details over apps die:

geïnstalleerd op het huidige apparaat,
gedefinieerd in het veld related_applications van het web-app-manifest,
een geverifieerde relatie hebben met een pagina waar de methode navigator.getInstalledRelatedApps() wordt aangeroepen (zie de volgende secties voor details).

const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

Als console.log(installedRelatedApps) aanroept, wordt er iets als volgt geretourneerd:

[
  {
    platform: "webapp",
    id: "https://example.com/?utm_source=home_screen",
    url: "https://example.com/manifest.json"
  },
  {
    platform: "play",
    id: "com.example.twa",
    url: "https://play.google.com/store/apps/details?id=com.example.twa",
    version: "0.1.0"
  }
]

Om bijvoorbeeld te controleren of er gerelateerde apps op het apparaat van de gebruiker zijn geïnstalleerd, kunt u de volgende regel gebruiken:

const hasInstalledRelatedApps = !!(await navigator.getInstalledRelatedApps?.())?.length;

Als u de pakket-ID kent, kunt u het volgende tekstbestand gebruiken om het versienummer van de geïnstalleerde bijbehorende Android-app te achterhalen:

const installedRelatedAndroidAppVersion = (await navigator.getInstalledRelatedApps?.())?.find(app => app.id === 'com.example.twa')?.version;

Dit betekent dat de methode navigator.getInstalledRelatedApps() nog steeds geïnstalleerde gerelateerde apps retourneert, zelfs als hun versie lager is dan min_version of als hun ondertekeningscertificaat niet overeenkomt met de fingerprints die zijn gedeclareerd in het veld related_applications van het web-appmanifest.

Ondersteunde app-typen die u kunt controleren

App-type	Controleerbaar vanaf
Android-app	Alleen Android: Chrome 80 of hoger
Universal Windows Platform (UWP)-app	Alleen Windows: Chrome 85 of hoger Edge 85 of later
Progressieve web-app (PWA) geïnstalleerd in dezelfde scope op dezelfde oorsprong	Android: Chrome 84 of later Bureaublad (Windows, macOS, Linux, ChromeOS): Chrome 140 of later Edge 140 of later
Progressieve web-app (PWA) geïnstalleerd in de verschillende scope op dezelfde of verschillende oorsprong	Alleen Android: Chrome 84 of later

Controleer of uw Android-app is geïnstalleerd

Uw website kan controleren of uw Android-app is geïnstalleerd.

Alleen Android: Chrome 80 of hoger

Vertel uw Android-app over uw website

Eerst moet u uw Android-app bijwerken om de relatie tussen uw website en Android-applicatie te definiëren met behulp van het Digital Asset Links-systeem . Hiermee verifieert u dat alleen uw website kan controleren of uw Android-app is geïnstalleerd.

Voeg in de AndroidManifest.xml van uw Android-app een asset_statements item toe:

<manifest>
  <application>
   …
    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
   …
  </application>
</manifest>

Voeg vervolgens de volgende asset-instructie toe aan strings.xml , waarbij u site bijwerkt met uw domein. Zorg ervoor dat u de escape-tekens toevoegt.

<string name="asset_statements">
  [{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
      \"namespace\": \"web\",
      \"site\": \"https://example.com\"
    }
  }]
</string>

Zodra u klaar bent, installeert u de bijgewerkte app op het apparaat of publiceert u deze in de Google Play Store of een van de andere Android-appdistributieplatforms.

Vertel uw website over uw Android-app

Vertel je website vervolgens over je Android-app door een webapp-manifest aan je pagina toe te voegen . Het manifest moet de eigenschap related_applications bevatten, een array met details over je app, inclusief platform en id .

platform moet play worden
id is de Android-pakket-ID

{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome"
  }]
}

Controleer of uw app is geïnstalleerd

Roep ten slotte de asynchrone functie navigator.getInstalledRelatedApps() aan om te controleren of uw Android-app is geïnstalleerd.

Controleer of uw Windows (UWP)-app is geïnstalleerd

Uw website kan controleren of uw Windows-app (gebouwd met UWP) is geïnstalleerd.

Alleen Windows: Chrome 85 of hoger, Edge 85 of hoger

Vertel uw Windows-app over uw website

U moet uw Windows-app bijwerken om de relatie tussen uw website en uw Windows-applicatie te definiëren met behulp van URI-handlers . Hiermee wordt geverifieerd dat alleen uw website kan controleren of uw Windows-app is geïnstalleerd.

Voeg de extensieregistratie Windows.appUriHandler toe aan het manifestbestand Package.appxmanifest van uw app. Als het adres van uw website bijvoorbeeld example.com is, voegt u de volgende vermelding toe aan het manifest van uw app:

<Applications>
  <Application Id="App" ... >
      ...
      <Extensions>
         <uap3:Extension Category="windows.appUriHandler">
          <uap3:AppUriHandler>
            <uap3:Host Name="example.com" />
          </uap3:AppUriHandler>
        </uap3:Extension>
      </Extensions>
  </Application>
</Applications>

Let op: het kan nodig zijn om de uap3 naamruimte toe te voegen aan uw <Package> -kenmerk.

Maak vervolgens een JSON-bestand (zonder de extensie .json ) met de naam windows-app-web-link en geef de pakketfamilienaam van je app op. Plaats dat bestand in de root van je server of in de map /.well-known/ . Je vindt de pakketfamilienaam in de sectie 'Packaging' in de app-manifestontwerper.

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

Zie Apps voor websites inschakelen met behulp van app-URI-handlers voor volledige informatie over het instellen van URI-handlers.

Vertel uw website over uw Windows-app

Vertel uw website vervolgens over uw Windows-app door een webapp-manifest aan uw pagina toe te voegen . Het manifest moet de eigenschap related_applications bevatten, een array met details over uw app, inclusief platform en id .

platform moet windows zijn
id is de pakketfamilienaam van uw app, aangevuld met de waarde <Application> Id in uw bestand Package.appxmanifest .

{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App"
  }]
}

Controleer of uw app is geïnstalleerd

Roep ten slotte de asynchrone functie navigator.getInstalledRelatedApps() aan om te controleren of uw Windows-app is geïnstalleerd.

Bekijk deze demo .

Controleer of uw Progressive Web App al is geïnstalleerd (in scope)

Je PWA kan controleren of deze al geïnstalleerd is. In dat geval moet de pagina die de aanvraag doet zich op hetzelfde domein bevinden en binnen de scope van je PWA vallen, zoals gedefinieerd door de scope in het manifest van de webapp.

Ondersteund op:

Android: Chrome 84 of hoger

Desktop (Windows, macOS, Linux, ChromeOS): Chrome 140 of hoger, Edge 140 of hoger

Vertel je PWA over zichzelf

Vertel uw PWA over zichzelf door een related_applications -item toe te voegen aan het webappmanifest van uw PWA.

platform moet webapp zijn
url is het pad (kan relatief zijn) naar het web-app-manifest van uw PWA
id is de web-app-id die is gedeclareerd in het id veld van het web-app-manifest of die is berekend door de browser (vereist voor desktop, niet vereist voor Android)

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

Controleer of uw PWA is geïnstalleerd

Roep ten slotte de asynchrone functie navigator.getInstalledRelatedApps() aan vanuit de scope van je PWA om te controleren of deze is geïnstalleerd. Als navigator.getInstalledRelatedApps() buiten de scope van je PWA wordt aangeroepen, retourneert deze [] . Zie de volgende sectie voor details.

Controleer of uw Progressive Web App is geïnstalleerd (buiten bereik)

Uw website kan controleren of uw PWA is geïnstalleerd, zelfs als de pagina zich buiten het bereik van uw PWA bevindt. Een landingspagina die wordt weergegeven via /landing/ kan bijvoorbeeld controleren of de PWA die wordt weergegeven via /pwa/ is geïnstalleerd, of of uw landingspagina wordt weergegeven via www.example.com en uw PWA wordt weergegeven via app.example.com .

Ondersteund op:

Alleen Android: Chrome 84 of hoger

Vertel uw PWA over uw website

Eerst moet je digitale assetlinks toevoegen aan de server waar je PWA vandaan komt. Dit helpt de relatie tussen je website en je PWA te definiëren en verifieert dat alleen je website kan controleren of je PWA is geïnstalleerd.

Voeg een assetlinks.json -bestand toe aan de map /.well-known/ van het domein waar de PWA zich bevindt, bijvoorbeeld app.example.com . Geef in de site eigenschap het volledige pad op naar het webapp-manifest dat de controle uitvoert (niet het webapp-manifest van uw 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"
    }
  }
]

Vertel je website vervolgens over je PWA-app door een webapp-manifest aan je pagina toe te voegen . Het manifest moet de eigenschap related_applications bevatten, een array met details over je PWA, inclusief platform en url .

platform moet webapp zijn
url is het volledige pad naar het web-app-manifest van uw PWA

{
  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json"
  }]
}

Controleer of uw PWA is geïnstalleerd

Roep ten slotte de asynchrone functie navigator.getInstalledRelatedApps() aan om te controleren of uw PWA is geïnstalleerd.

Heeft u nog vragen?

Heb je nog vragen? Bekijk de tag getInstalledRelatedApps op StackOverflow om te zien of iemand anders soortgelijke vragen heeft. Zo niet, stel je vraag dan daar en zorg ervoor dat je de tag progressive-web-apps gebruikt. Ons team controleert die tag regelmatig en probeert je vragen te beantwoorden.

Feedback

Heb je een bug gevonden in de implementatie van Chrome? Of wijkt de implementatie af van de specificatie?

Meld een bug op https://new.crbug.com. Geef zoveel mogelijk details, instructies voor het reproduceren van de bug en voer Mobile>WebAPKs in het vak Componenten in.

Nuttige links

Bedankt

Speciale dank aan Sunggook Chue van Microsoft voor zijn hulp met de details voor het testen van Windows-apps, en aan Rayan Kanso voor zijn hulp met de Chrome-details.

Is je app geïnstalleerd? De Get Installed Related Apps API vertelt het je! Stay organized with collections Save and categorize content based on your preferences.

Wat is de Get Installed Related Apps API?

Ondersteunde app-typen die u kunt controleren

Controleer of uw Android-app is geïnstalleerd

Vertel uw Android-app over uw website

Vertel uw website over uw Android-app

Controleer of uw app is geïnstalleerd

Controleer of uw Windows (UWP)-app is geïnstalleerd

Vertel uw Windows-app over uw website

Vertel uw website over uw Windows-app

Controleer of uw app is geïnstalleerd

Controleer of uw Progressive Web App al is geïnstalleerd (in scope)

Vertel je PWA over zichzelf

Controleer of uw PWA is geïnstalleerd

Controleer of uw Progressive Web App is geïnstalleerd (buiten bereik)

Vertel uw PWA over uw website

Controleer of uw PWA is geïnstalleerd

Heeft u nog vragen?

Feedback

Nuttige links

Bedankt

Is je app geïnstalleerd? De Get Installed Related Apps API vertelt het je!