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

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

Pete LePage

Che cos'è l'API getInstallRelatedApps()?

L'getInstalledRelatedApps() consente alla tua pagina di controllare se la tua app mobile o desktop o, in alcuni casi, se la tua app web progressiva (PWA) è già installata sul dispositivo di un utente, e consente di personalizzare l'esperienza utente, se presente.

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 PWA se l'altra app è già installata.

Per utilizzare l'API getInstalledRelatedApps(), devi fornire informazioni sul sito all'app e poi sull'app. Dopo aver definito la relazione tra i due, puoi verificare se l'app è installata.

Tipi di app supportati che puoi controllare

Controlla se la tua app per Android è installata

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

Descrivi il tuo sito web all'app Android

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

Aggiungi una voce asset_statements nel campo AndroidManifest.xml dell'app Android:

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

Poi, in strings.xml, aggiungi la seguente dichiarazione degli asset, aggiornando site con il tuo dominio. Accertati 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>

Al termine, pubblica la tua app per Android aggiornata sul Play Store.

Descrivi la tua app per Android al tuo sito web

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

• Il valore platform deve essere play
• id è l'ID applicazione Google Play della tua app Android

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

Controllare se l'app è installata

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

Prova la demo

Controllare se l'app Windows (UWP) è installata

Il tuo sito web può controllare se la tua app Windows (realizzata utilizzando UWP) è installata.

Descrivi il tuo sito web all'app Windows

Devi aggiornare l'app Windows per definire la relazione tra il tuo sito web e l'applicazione Windows utilizzando i gestori URI. Questo garantisce che solo il tuo sito web possa controllare se la tua app 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 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>

Nota: potresti dover aggiungere lo spazio dei nomi uap3 all'attributo <Package>.

Quindi, crea un file JSON (senza estensione .json) denominato windows-app-web-link e fornisci il nome della famiglia di pacchetti dell'app. Inserisci il file nella directory radice del server o nella directory /.well-known/. Puoi trovare il nome della famiglia di pacchetti nella sezione Packaging del designer del manifest dell'app.

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

Per i dettagli completi sulla configurazione dei gestori dell'URI, consulta Attivare le app per i siti web che utilizzano gestori degli URI delle app.

Comunica al tuo sito web la tua app Windows

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

• Il valore platform deve essere windows
• id è il nome della famiglia di pacchetti dell'app, aggiunto dal valore Id di <Application> nel file Package.appxmanifest.

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

Controllare se l'app è installata

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

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

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

Parla di se stesso alla PWA

Indica la tua PWA aggiungendo una voce related_applications nel manifest dell'app web delle PWA.

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

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

Verificare se la PWA è installata

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

Prova la demo

Controllare se l'app web progressiva è installata (fuori dall'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ò controllare se la PWA pubblicata da /pwa/ è installata o se la pagina di destinazione viene pubblicata da www.example.com e la PWA pubblicata da app.example.com.

Descrivi il tuo sito web alla PWA

Per prima cosa, devi aggiungere link agli asset digitali al server da cui viene pubblicata la PWA. In questo modo, potrai definire la relazione tra il tuo sito web e la PWA e assicurarti che solo il sito web possa verificare se la 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 del manifest dell'app web che eseguirà il controllo (non il 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"
    }
  }
]

Indica al tuo sito web la tua PWA

Quindi, indica al tuo sito web l'app PWA aggiungendo un manifest di un'app web alla pagina. Il manifest deve includere la proprietà related_applications, un array che fornisce i dettagli sulla PWA, tra cui platform e url.

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

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

Verificare se la PWA è installata

Infine, chiama il numero navigator.getInstalledRelatedApps() per verificare se la PWA è installata.

Prova la demo

Chiamata a get InstallRelatedApps()

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

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

Per evitare che i siti testino un insieme troppo ampio di app, verranno prese in considerazione solo le prime tre app dichiarate nel file manifest dell'app web.

Come la maggior parte delle altre API web efficaci, l'API getInstalledRelatedApps() è disponibile solo se viene gestita tramite HTTPS.

Hai altre domande?

Hai altre domande? Controlla il tag getInstalledRelatedApps su StackOverflow per sapere se altri hanno avuto domande simili. Se la risposta è no, poni la tua domanda e assicurati di taggarla con il tag progressive-web-apps. Il nostro team monitora spesso il tag e prova a rispondere alle tue domande.

Feedback

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalle specifiche?

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

Mostra il supporto dell'API

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

• Condividi come prevedi di utilizzare l'API nel thread del discorso WiCG.
• Invia un tweet a @ChromiumDev usando l'hashtag #getInstalledRelatedApps e facci sapere dove e come lo stai usando.

Link utili

• Spiegazione pubblica per l'API getInstalledRelatedApps()
• Bozza delle specifiche
• Bug di monitoraggio
• Voce ChromeStatus.com
• Componente Blink: Mobile>WebAPKs

Grazie per aver deciso

Un ringraziamento speciale a Sunggook Chue di Microsoft per l'aiuto con i dettagli relativi al test delle app Windows e a Rayan Kanso per l'assistenza in merito ai dettagli di Chrome.