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.
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
Tipo di app | Controllabile da |
---|---|
App per Android |
Solo Android Chrome 80 o versioni successive |
App Windows (UWP) |
Solo Windows Chrome 85 o versioni successive Edge 85 o versioni successive |
App web progressiva Installata nello stesso ambito o in un ambito diverso. |
Solo Android Chrome 84 o versioni successive |
Controlla se la tua app per Android è installata
Il tuo sito web può controllare se la tua app Android è installata.
Android: Chrome 80 o versioni successive
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 essereplay
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.
Windows: Chrome 85 o versioni successive, Edge 85 o versioni successive
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 esserewindows
id
è il nome della famiglia di pacchetti dell'app, aggiunto dal valoreId
di<Application>
nel filePackage.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.
Android: Chrome 84 o versioni successive
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 esserewebapp
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
.
Android: Chrome 84 o versioni successive
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 esserewebapp
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.