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

Pete LePage
Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

De Get Installed Related Apps API maakt het mogelijk om een ​​lijst te krijgen van geïnstalleerde gerelateerde apps, inclusief details over die apps.

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

Als de app al is geïnstalleerd, kun je de gebruikerservaring aanpassen.

Bijvoorbeeld:

  • Het is niet aan te raden om je PWA te installeren als je andere app al geïnstalleerd is.
  • De gebruiker rechtstreeks vanaf een productmarketingwebsite doorverwijzen naar uw app.
  • Het centraliseren van bepaalde functionaliteiten, zoals meldingen, in de andere app om dubbele meldingen te voorkomen.

Wat is de Get Installed Related Apps API?

Het aanroepen van de asynchrone methode navigator.getInstalledRelatedApps() retourneert een promise die wordt opgelost met een array van objecten die details bevatten over de volgende apps:

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

Als je console.log(installedRelatedApps) aanroept, krijg je zoiets als:

[
  {
    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 opdrachtregel gebruiken:

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

Als je de pakket-ID kent, kun je het versienummer van de bijbehorende geïnstalleerde Android-app achterhalen met de volgende opdrachtregel:

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

Ondersteunde app-typen die u kunt bekijken

App-type Controleerbaar vanaf
Android-app Alleen voor Android:
Chrome 80 of later
Universal Windows Platform (UWP) app Alleen voor Windows:
Chrome 85 of later
Edge 85 of later
Progressive Web App (PWA) geïnstalleerd in hetzelfde bereik op dezelfde oorsprong Android:
Chrome 84 of later
Desktop (Windows, macOS, Linux, ChromeOS):
Chrome 140 of later
Edge 140 of later
Progressieve web-app (PWA)
geïnstalleerd in een ander toepassingsgebied, van dezelfde of verschillende oorsprong.		 Alleen voor Android:
Chrome 84 of later

Controleer of je Android-app is geïnstalleerd.

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

Ondersteund op:

  • Alleen voor Android: Chrome 80 of later.

Vertel je Android-app over je website.

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

Voeg in het AndroidManifest.xml bestand 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 in strings.xml de volgende asset-instructie toe en werk site bij met uw domein. Vergeet niet de escape-tekens op te nemen.

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

Pro-tip: Dit is een array. Dit betekent dat je een geverifieerde relatie kunt definiëren tussen je Android-app en meerdere van je websites.

Installeer na voltooiing de bijgewerkte app op het apparaat of publiceer deze in de Google Play Store of een van de andere Android-appdistributieplatformen.

Vertel je website over je Android-app.

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

  • platform moet play zijn
  • id is de Android-pakket-ID 
{
  ...
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.twa"
    }
  ]
  ...
}

Pro-tip: Dit is een array. Dit betekent dat je een geverifieerde relatie kunt definiëren tussen je website en meerdere van je Android-apps.

Controleer of uw app is geïnstalleerd.

Roep tot slot de asynchrone functie navigator.getInstalledRelatedApps() aan om te controleren of je 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.

Ondersteund op:

  • Alleen voor Windows: Chrome 85 of later, Edge 85 of later

Vertel je Windows-app over je website.

Je moet je Windows-app bijwerken om de geverifieerde relatie tussen je website en Windows-applicatie te definiëren met behulp van URI-handlers . Dit zorgt ervoor dat alleen jouw website kan controleren of je Windows-app is geïnstalleerd.

Voeg de extensieregistratie Windows.appUriHandler toe aan het manifestbestand van uw app AppxManifest.xml of Package.appxmanifest ). Als het adres van uw website bijvoorbeeld example.com is, voegt u de volgende regel 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: mogelijk moet u de namespace uap3 toevoegen aan uw <Package> -attribuut.

Als uw website meerdere adressen heeft, voeg dan voor elk adres een aparte <uap3:Host Name=... /> vermelding toe binnen de <uap3:AppUriHandler> .

Maak vervolgens een JSON-bestand (zonder de extensie .json ) met de naam windows-app-web-link en geef de Package Family Name van uw app op. Plaats dit bestand in de map /.well-known/ of in de rootmap van uw server.

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

Pro-tip: Dit is een array. Dit betekent dat je een geverifieerde relatie kunt definiëren tussen je website en meerdere van je Windows-apps.

Om de pakketfamilienaam te achterhalen waarmee je de app kunt installeren, voer je de volgende opdracht uit in PowerShell en zoek je je app in de lijst: 

Get-AppxPackage | Select-Object PackageFamilyName

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

Vertel uw website over uw Windows-app.

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

  • platform moet windows zijn.
  • id is de pakketfamilienaam van je app met !App als achtervoegsel. 
{
  ...
  "related_applications": [
    {
      "platform": "windows",
      "id": "MyApp_9jmtgj1pbbz6e!App"
    }
  ]
  ...
}

Pro-tip: Dit is een array. Dit betekent dat je een geverifieerde relatie kunt definiëren tussen je website en meerdere van je Windows-apps.

Controleer of uw app is geïnstalleerd.

Roep tot slot 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 (binnen het toepassingsgebied).

Je PWA kan controleren of deze al is geïnstalleerd. In dat geval moet de pagina die het verzoek indient zich op hetzelfde domein bevinden en binnen het bereik van je PWA vallen, zoals gedefinieerd in het web-app-manifest.

Ondersteund op:

  • Android: Chrome 84 of later
  • Desktop (Windows, macOS, Linux, ChromeOS): Chrome 140 of later, Edge 140 of later

Vertel je PWA over zichzelf.

Vertel je PWA over zichzelf door een related_applications vermelding toe te voegen aan het web-app-manifest van je 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 opgegeven in het id veld van het web-app-manifest of die door de browser wordt berekend (vereist voor desktop, niet nodig 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 tot slot de asynchrone functie navigator.getInstalledRelatedApps() aan vanuit de scope van uw PWA om te controleren of de app is geïnstalleerd. Als navigator.getInstalledRelatedApps() buiten de scope van uw PWA wordt aangeroepen, retourneert deze [] . Zie de volgende sectie voor meer informatie.

Controleer of uw Progressive Web App is geïnstalleerd (valt buiten het bestek).

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

Ondersteund op:

  • Alleen voor Android: Chrome 84 of later.

Vertel je PWA over je website

Allereerst moet u digitale assetlinks toevoegen aan de server waarop uw PWA wordt gehost. Dit helpt bij het definiëren van de geverifieerde relatie tussen uw website en uw PWA, en zorgt ervoor dat alleen uw website kan controleren of uw 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 eigenschappen het volledige pad op naar het web-app-manifest dat de controle uitvoert (niet het web-app-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"
    }
  }
]

Pro-tip: Dit is een array. Dit betekent dat je een geverifieerde relatie kunt definiëren tussen je PWA en meerdere van je websites.

Vertel je website over je PWA

Vertel uw website vervolgens over uw PWA-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 PWA, waaronder platform en url .

  • platform moet webapp zijn.
  • url is het volledige pad naar het webapp-manifest van uw PWA. 
{
  ...
  "related_applications": [
    {
      "platform": "webapp",
      "url": "https://app.example.com/manifest.json"
    }
  ]
  ...
}

Pro-tip: Dit is een array. Dit betekent dat je een geverifieerde relatie kunt definiëren tussen je website en meerdere van je PWA's.

Controleer of uw PWA is geïnstalleerd.

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

Heb je nog vragen?

Heb je nog vragen? Kijk dan eens bij de tag getInstalledRelatedApps op StackOverflow om te zien of iemand anders soortgelijke vragen heeft gehad. Zo niet, stel je vraag dan daar en vergeet niet de tag progressive-web-apps toe te voegen. Ons team houdt die tag regelmatig in de gaten 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, beschrijf hoe de bug gereproduceerd kan worden en vul Mobile>WebAPKs in bij Components .

Handige 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 details voor Chrome.