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.
Che cos'è l'API getInstallaRelatedApps()?
![](https://web.developers.google.cn/static/articles/get-installed-related-apps/image/vjamv2uyz6NxBPxPIm11.jpg?authuser=5&hl=it)
getInstalledRelatedApps()
per determinare se
L'app per Android è già installata.
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
Tipo di app | Controllabile da |
---|---|
App per Android |
Solo per 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 uno ambito diverso. |
Solo per Android Chrome 84 o versioni successive |
Controllare se la tua app per Android è installata
Il tuo sito web può controllare se la tua app per Android è installata.
Android: Chrome 80 o versioni successive
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 essereplay
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.
Windows: Chrome 85 o versioni successive, Edge 85 o versioni successive
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 esserewindows
id
è il nome della famiglia di pacchetti dell'app, aggiunto dalId
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 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.
Android: Chrome 84 o versioni successive
Racconta di se stessa alla tua PWA
Racconta di se stessa alla tua PWA aggiungendo una voce related_applications
nel tuo
File manifest dell'app web per le PWA.
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",
}],
…
}
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
.
Android: Chrome 84 o versioni successive
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 esserewebapp
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.