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

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

Pete LePage

Che cos'è l'API getInstallaRelatedApps()?

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

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

• Reindirizzare l'utente da una pagina di marketing del prodotto direttamente alla tua app.
• Centralizzazione di alcune funzionalità, come le notifiche nell'altra app, per impedire la duplicazione delle notifiche.
• Non promuovi l'installazione della PWA se le tue è già installata un'altra app.

Per utilizzare l'API getInstalledRelatedApps(), devi comunicare alla tua app tuo sito, poi fornisci informazioni sulla tua app. Dopo aver definito tra i due, puoi controllare se l'app è installata.

Tipi di app supportati che puoi controllare

Controllare se la tua app per Android è installata

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

Descrivi il tuo sito web all'app Android

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

In AndroidManifest.xml della tua app per Android, aggiungi un asset_statements voce:

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

Poi, in strings.xml, aggiungi la seguente dichiarazione della risorsa, 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>

Al termine, pubblica l'app per Android aggiornata sul Play Store.

Descrivi la tua app per Android al tuo sito web

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

• platform deve essere play
• id è l'ID applicazione Google Play per la 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 le tue App per Android installata.

Prova la demo

Verificare se l'app Windows (UWP) è installata

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

Comunica il tuo sito web all'app Windows

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

Aggiungi la registrazione dell'estensione Windows.appUriHandler al file manifest dell'app file 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 potresti dover aggiungere lo spazio dei nomi uap3 al tuo <Package>.

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

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

Vedi Abilitare le app per i siti web che utilizzano gestori URI delle app per tutti i dettagli sulla configurazione dei gestori URI.

Descrivi la tua app Windows al tuo sito web

Quindi, parla della tua app Windows al tuo sito web aggiungendo un file manifest dell'app web alla tua pagina. Il file manifest deve includi 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 dell'app, aggiunto dal 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 le tue L'app Windows è installata.

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

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

Racconta di se stessa alla tua PWA

Racconta la tua PWA su se stessa aggiungendo una voce related_applications nel tuo File manifest dell'app web per le PWA.

• 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",
  }],
  …
}

Controllare se la PWA è installata

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

Prova la demo

Verificare se la tua app web progressiva è installata (fuori dall'ambito)

Il tuo sito web può controllare se la PWA è installata, anche se la pagina si trova all'esterno l'ambito della tua PWA. Ad esempio, una pagina di destinazione pubblicata /landing/ può controllare se la PWA pubblicata da /pwa/ è installata o se la pagina di destinazione viene pubblicata da www.example.com, mentre la PWA viene pubblicata da app.example.com.

Parla del tuo sito web con la tua PWA

Innanzitutto, dovrai aggiungere i link agli asset digitali al server in cui si trova la tua PWA fornito da. In questo modo, potrai definire la relazione tra il tuo sito web e la tua PWA e assicurarti che solo il tuo sito web possa controllare 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. In site , fornisci il percorso completo del 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"
    }
  }
]

Descrivi la tua PWA al tuo sito web

Quindi, parla della tua app PWA al tuo sito web aggiungendo un file manifest dell'app web alla tua pagina. Il file manifest deve includi 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 del 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 il numero navigator.getInstalledRelatedApps() per verificare se le tue La PWA è installata.

Prova la demo

Chiamata a getInstallaRelatedApps()

La chiamata a navigator.getInstalledRelatedApps() restituisce una promessa che si risolve con un array delle 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 testano un insieme troppo ampio di proprie app, solo le prime tre app dichiarate nel file manifest dell'app web presi in considerazione.

Come la maggior parte delle altre potenti API web, l'API getInstalledRelatedApps() viene disponibili solo se pubblicati tramite HTTPS.

Hai altre domande?

Hai altre domande? Controlla il tag getInstalledRelatedApps su StackOverflow per vedere se altri hanno domande simili. In caso contrario, chiedi question utilizzando il tag Tag progressive-web-apps. Il nostro team monitora frequentemente il tag e prova a rispondere alle tue domande.

Feedback

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione rispetto alle specifiche?

• Segnala un bug all'indirizzo https://new.crbug.com. Includi il più possibile fornire maggiori dettagli possibili, fornire semplici istruzioni per riprodurre il bug e inserisci Mobile>WebAPKs nella casella Componenti. Glitch è la soluzione ideale per condividere riproduzioni in modo facile e veloce.

Mostra il supporto per l'API

Intendi utilizzare l'API getInstalledRelatedApps()? I tuoi contenuti pubblici aiuta il team di Chrome a dare priorità alle funzionalità e mostra ai fornitori di browser su quanto sia fondamentale supportarli.

• Illustra come intendi utilizzare l'API nel thread del discorso di WicG.
• Invia un tweet a @ChromiumDev utilizzando l'hashtag #getInstalledRelatedApps: e facci sapere dove e come lo utilizzi.

Link utili

• Spiegazione pubblica per l'API getInstalledRelatedApps()
• Bozza delle specifiche
• Monitoraggio del bug
• Voce ChromeStatus.com
• Componente Blink: Mobile>WebAPKs

Grazie

Un ringraziamento speciale a Sunggook Chue di Microsoft per l'aiuto nei dettagli per testare le app Windows e Rayan Kanso per assistenza sui dettagli di Chrome.