La tua app è installata? getInstallRelatedApps() te lo comunicherà.

Il metodo getInstalledRelatedApps() consente al tuo sito web di verificare se la tua app per Android/UWP o PWA è installata sul dispositivo di un utente.

Pete LePage

Alexey Rodionov

Che cos'è l'API getInstalledRelatedApps()?

Il metodo getInstalledRelatedApps() restituisce l'elenco delle app correlate installate.

La chiamata a navigator.getInstalledRelatedApps() restituisce una promessa che si risolve con un array di app correlate installate sul dispositivo dell'utente.

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

Consente alla tua pagina di verificare se la tua app per Android, l'app Universal Windows Platform (UWP) o l'app web progressiva (PWA) è già installata sul dispositivo di un utente e ti consente di personalizzare l'esperienza utente in caso affermativo.

Ad esempio, se la tua app è già installata:

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

Tipi di app supportati che puoi controllare

Controllare se l'app per Android è installata

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

Comunicare alla tua app per Android informazioni sul tuo sito web

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

Nel 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>

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

Informare il tuo sito web della tua app per Android

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

• platform deve essere play
• id è l'ID pacchetto Android

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

Controllare se l'app è installata

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

Controllare se l'app Windows (UWP) è installata

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

Comunicare alla tua app per Windows informazioni sul tuo sito web

Devi aggiornare l'app Windows per definire la relazione tra il tuo sito web e l'applicazione Windows utilizzando i gestori URI. In questo modo viene verificato che solo il tuo sito web possa controllare se la tua app per Windows è installata.

Aggiungi la registrazione dell'estensione Windows.appUriHandler al file manifest della tua app Package.appxmanifest. Ad esempio, se l'indirizzo del tuo sito web è example.com, devi aggiungere la seguente voce nel 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 potresti dover aggiungere lo spazio dei nomi uap3 all'attributo <Package>.

Poi, crea un file JSON (senza l'estensione .json) denominato windows-app-web-link e fornisci il nome della famiglia di pacchetti dell'app. Posiziona il file nella directory principale del server o nella directory /.well-known/. Puoi trovare il nome della famiglia di pacchetti nella sezione Packaging del progettista del manifesto dell'app.

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

Guarda questa demo.

Per informazioni dettagliate sulla configurazione dei gestori di URI, vedi Abilitare le app per i siti web utilizzando i gestori di URI delle app.

Comunicare al tuo sito web la tua app per Windows

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

• platform deve essere windows
• id è il nome della famiglia di pacchetti della tua app, a cui viene aggiunto il valore <Application> Id nel file Package.appxmanifest.

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

Controllare se l'app è installata

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

Controllare se la PWA è già installata (in 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 della tua PWA, come definito dall'ambito nel manifest dell'app web.

Fornire informazioni sulla PWA

Comunica alla tua PWA le sue caratteristiche aggiungendo una voce related_applications nel manifest dell'app web della PWA.

• platform deve essere webapp
• url è il percorso (può essere relativo) al manifest dell'app web della tua PWA
• id è il percorso completo dell'app web (obbligatorio per il computer, non necessario per Android)

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

Controllare se la PWA è installata

Infine, chiama la funzione asincrona navigator.getInstalledRelatedApps() dall'ambito della tua PWA per verificare se è installata. Se getInstalledRelatedApps() viene chiamato al di fuori dell'ambito della tua PWA, restituirà []. Consulta la sezione seguente per ulteriori dettagli.

Controllare se la tua app web progressiva è installata (fuori ambito)

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

Comunicare alla PWA informazioni sul tuo sito web

Innanzitutto, devi aggiungere i link Digital Asset Links al server da cui viene pubblicata la tua PWA. In questo modo, viene definita la relazione tra il tuo sito web e la tua PWA e viene verificato che solo il tuo sito web possa controllare se la tua PWA è installata.

Aggiungi un file assetlinks.json 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 tua 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"
    }
  }
]

Informare il tuo sito web della tua PWA

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

• platform deve essere webapp
• url è il percorso completo al manifest dell'app web della tua PWA

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

Controllare 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 Stack Overflow per vedere 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? O l'implementazione è diversa dalla specifica?

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

Mostra il tuo sostegno all'API

Intendi utilizzare l'API getInstalledRelatedApps()? Il tuo supporto pubblico aiuta il team di Chrome a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto sia fondamentale supportarle.

• Condividi come intendi utilizzare l'API nel thread di discussione WICG.
• Invia un tweet a @ChromiumDev utilizzando l'hashtag #getInstalledRelatedApps e facci sapere dove e come lo utilizzi.

Link utili

• Spiegazione pubblica dell'API getInstalledRelatedApps()
• Spec draft
• Bug di monitoraggio
• Voce di ChromeStatus.com
• Componente Blink: Mobile>WebAPKs

Grazie

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