La tua app è installata? L'API Get Installed Related Apps ti dirà quali sono.

Pete LePage
Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

L'API Get Installed Related Apps consente di ottenere l'elenco delle app correlate installate insieme ai relativi dettagli.

Ti consente di verificare se la tua app web progressiva (PWA), la tua app per Android o la tua app Universal Windows Platform (UWP) è installata sul dispositivo attuale, sia dalla PWA stessa sia da una pagina web correlata (ad es. un sito web di marketing del prodotto).

Se l'app è già installata, puoi personalizzare l'esperienza utente.

Ad esempio:

  • Non promuovere l'installazione della PWA se l'altra app è già installata.
  • Reindirizzare l'utente da un sito web di marketing del prodotto direttamente alla tua app.
  • Centralizzare alcune funzionalità, come le notifiche, nell'altra app per evitare notifiche duplicate.

Che cos'è l'API Get Installed Related Apps?

La chiamata al metodo asincrono navigator.getInstalledRelatedApps() restituisce una promessa che viene risolta con un array di oggetti contenenti dettagli sulle app che:

  • sono installate sul dispositivo attuale,
  • sono definite nel campo related_applications del file manifest dell'app web,
  • hanno una relazione verificata con una pagina in cui viene chiamato il metodo navigator.getInstalledRelatedApps() (per maggiori dettagli, consulta le sezioni successive).
const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

La chiamata a console.log(installedRelatedApps) restituisce un risultato simile al seguente:

[
  {
    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"
  }
]

Ad esempio, per verificare se sono installate app correlate sul dispositivo dell'utente, puoi utilizzare la seguente riga di codice:

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

Se conosci l'ID pacchetto, per ottenere il numero di versione dell'app per Android correlata installata, puoi utilizzare la seguente riga di codice:

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

Tipi di app supportati che puoi controllare

Tipo di app Controllabile da
App per Android Solo Android:
Chrome 80 o versioni successive
App Universal Windows Platform (UWP) Solo Windows:
Chrome 85 o versioni successive
Edge 85 o versioni successive
App web progressiva (PWA) installata nello stesso ambito sulla stessa origine Android:
Chrome 84 o versioni successive
Computer (Windows, macOS, Linux, ChromeOS):
Chrome 140 o versioni successive
Edge 140 o versioni successive
App web progressiva (PWA)
installata in un ambito diverso sulla stessa origine o su un'origine diversa 		Solo Android:
Chrome 84 o versioni successive

Verificare se l'app per Android è installata

Il tuo sito web può verificare se la tua app per Android è installata.

Supportato su:

  • Solo Android: Chrome 80 o versioni successive

Indicare alla tua app per Android il tuo sito web

Innanzitutto, dovrai aggiornare la tua app per Android per definire la relazione verificata tra il tuo sito web e l'applicazione per Android utilizzando il sistema Digital Asset Links. In questo modo, solo il tuo sito web potrà verificare se la tua app per Android è installata.

Nel file AndroidManifest.xml della tua app per Android, aggiungi una voce asset_statements:

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

Poi, in strings.xml, aggiungi la seguente dichiarazione di asset, aggiornando site con il tuo dominio. Assicurati di includere i caratteri di escape.

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

Suggerimento avanzato: si tratta di un array. Ciò significa che puoi definire una relazione verificata tra la tua app per Android e più di uno dei tuoi siti web.

Una volta completata l'operazione, installa l'app aggiornata sul dispositivo o pubblicala su Google Play Store o su una delle altre piattaforme di distribuzione di app per Android.

Indicare al tuo sito web la tua app per Android

Poi, indica al tuo sito web la tua app per Android aggiungendo un file manifest dell'app web alla tua pagina. Il file manifest deve includere la proprietà related_applications, un array che fornisce i dettagli della tua app, inclusi platform e id.

  • platform deve essere play
  • id è l'ID pacchetto Android
{
  ...
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.twa"
    }
  ]
  ...
}

Suggerimento avanzato: si tratta di un array. Ciò significa che puoi definire una relazione verificata tra il tuo sito web e più di una delle tue app per Android.

Verificare se l'app è installata

Infine, chiama la funzione asincrona navigator.getInstalledRelatedApps() per verificare se la tua app per Android è installata.

Verificare se l'app per Windows (UWP) è installata

Il tuo sito web può verificare se la tua app per Windows (creata utilizzando UWP) è installata.

Supportato su:

  • Solo Windows: Chrome 85 o versioni successive, Edge 85 o versioni successive

Indicare alla tua app per Windows il tuo sito web

Dovrai aggiornare la tua app per Windows per definire la relazione verificata tra il tuo sito web e l'applicazione per Windows utilizzando i gestori di URI. In questo modo, solo il tuo sito web potrà verificare se la tua app per Windows è installata.

Aggiungi la registrazione dell'estensione Windows.appUriHandler al file manifest dell'app AppxManifest.xml o Package.appxmanifest. Ad esempio, se l'indirizzo del tuo sito web è example.com, aggiungi la seguente voce nel file manifest dell'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>

Tieni presente che potrebbe essere necessario aggiungere lo uap3 spazio dei nomi all'attributo <Package>.

Se il tuo sito web ha più indirizzi, aggiungi una voce <uap3:Host Name=... /> separata all'interno di <uap3:AppUriHandler> per ogni indirizzo.

Poi, crea un file JSON (senza l'estensione .json) denominato windows-app-web-link e fornisci il nome della famiglia di pacchetti dell'app. Inserisci il file nella directory /.well-known/ o nella root del server.

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

Suggerimento avanzato: si tratta di un array. Ciò significa che puoi definire una relazione verificata tra il tuo sito web e più di una delle tue app per Windows.

Per trovare il nome della famiglia di pacchetti, puoi installare l'app, eseguire il seguente comando in PowerShell e trovare l'app nell'elenco:

Get-AppxPackage | Select-Object PackageFamilyName

Per informazioni complete sulla configurazione dei gestori di URI, consulta l'articolo Attivare le app per i siti web utilizzando i gestori di URI dell'app.

Indicare al tuo sito web la tua app per Windows

Poi, indica al tuo sito web la tua app per Windows aggiungendo un file manifest dell'app web alla tua pagina. Il file manifest deve includere la proprietà related_applications, un array che fornisce i dettagli della tua app, inclusi platform e id.

  • platform deve essere windows
  • id è il nome della famiglia di pacchetti dell'app con !App aggiunto come suffisso alla fine
{
  ...
  "related_applications": [
    {
      "platform": "windows",
      "id": "MyApp_9jmtgj1pbbz6e!App"
    }
  ]
  ...
}

Suggerimento avanzato: si tratta di un array. Ciò significa che puoi definire una relazione verificata tra il tuo sito web e più di una delle tue app per Windows.

Verificare se l'app è installata

Infine, chiama la funzione asincrona navigator.getInstalledRelatedApps() per verificare se la tua app per Windows è installata.

Dai un'occhiata a questa demo.

Verificare se l'app web progressiva è già installata (nell'ambito)

La tua PWA può verificare se è già installata. In questo caso, la pagina che effettua la richiesta deve trovarsi nello stesso dominio e nell'ambito scope della PWA, come definito dall'ambito nel file manifest dell'app web.

Supportato su:

  • Android: Chrome 84 o versioni successive
  • Computer (Windows, macOS, Linux, ChromeOS): Chrome 140 o versioni successive, Edge 140 o versioni successive

Indicare alla tua PWA se stessa

Indica alla tua PWA se stessa aggiungendo una voce related_applications nel file manifest dell'app web della PWA.

  • platform deve essere webapp
  • url è il percorso (può essere relativo) al file manifest dell'app web della PWA
  • id è l'ID dell'app web dichiarato nel campo id del file manifest dell'app web o calcolato dal browser (obbligatorio per computer, non necessario per Android)
{
  ...
  "scope": "/",
  "start_url": "/?utm_source=home_screen",
  "related_applications": [
    {
      "platform": "webapp",
      "url": "/manifest.json",
      "id": "https://example.com/?utm_source=home_screen"
    }
  ],
  ...
}

Verificare se la PWA è installata

Infine, chiama la funzione asincrona navigator.getInstalledRelatedApps() dall'ambito della PWA per verificare se è installata. Se navigator.getInstalledRelatedApps() viene chiamata al di fuori dell'ambito della PWA, restituirà []. Per maggiori dettagli, consulta la sezione successiva.

Verificare se l'app web progressiva è installata (al di fuori dell'ambito)

Il tuo sito web può verificare se la tua PWA è installata, anche se la pagina si trova al di fuori dell'ambito della PWA. Ad esempio, una pagina di destinazione pubblicata da /landing/ può verificare se la PWA pubblicata da /pwa/ è installata oppure se la pagina di destinazione viene pubblicata da www.example.com e la PWA da app.example.com.

Supportato su:

  • Solo Android: Chrome 84 o versioni successive

Indicare alla tua PWA il tuo sito web

Innanzitutto, dovrai aggiungere i link di asset digitali al server da cui viene pubblicata la PWA. In questo modo, potrai definire la relazione verificata tra il tuo sito web e la tua PWA e verificare che solo il tuo sito web possa verificare se la tua PWA è installata.

Aggiungi un assetlinks.json file alla directory /.well-known/ del dominio in cui si trova la PWA, ad esempio app.example.com. Nella proprietà site, fornisci il percorso completo al file manifest dell'app web che eseguirà il controllo (non il file manifest dell'app web della 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"
    }
  }
]

Suggerimento avanzato: si tratta di un array. Ciò significa che puoi definire una relazione verificata tra la tua PWA e più di uno dei tuoi siti web.

Indicare al tuo sito web la tua PWA

Poi, indica al tuo sito web la tua app PWA aggiungendo un file manifest dell'app web alla tua pagina. Il file manifest deve includere la proprietà related_applications, un array che fornisce i dettagli della tua PWA, inclusi platform e url.

  • platform deve essere webapp
  • url è il percorso completo al file manifest dell'app web della PWA
{
  ...
  "related_applications": [
    {
      "platform": "webapp",
      "url": "https://app.example.com/manifest.json"
    }
  ]
  ...
}

Suggerimento avanzato: si tratta di un array. Ciò significa che puoi definire una relazione verificata tra il tuo sito web e più di una delle tue PWA.

Verificare se la PWA è installata

Infine, chiama la funzione asincrona navigator.getInstalledRelatedApps() per verificare se la tua PWA è installata.

Hai altre domande?

Hai altre domande? Controlla il tag getInstalledRelatedApps su StackOverflow per verificare se qualcun altro ha posto domande simili. In caso contrario, poni la tua domanda lì e assicurati di contrassegnarla con il tag progressive-web-apps. Il nostro team monitora spesso questo tag e cerca di rispondere alle tue domande.

Feedback

Hai trovato un bug nell'implementazione di Chrome? L'implementazione è diversa dalla specifica?

  • Segnala un bug all'indirizzo https://new.crbug.com. Includi il maggior numero possibile di dettagli, fornisci istruzioni per riprodurre il bug e inserisci Mobile>WebAPKs nella casella Componenti.

Link utili

Grazie

Un ringraziamento speciale a Sunggook Chue di Microsoft per averci aiutato con i dettagli per il test delle app per Windows e a Rayan Kanso per l'aiuto con i dettagli di Chrome.