In passato, l'installazione di app era possibile solo nel contesto di applicazioni specifiche della piattaforma. Oggi, le app web moderne offrono esperienze installabili che forniscono lo stesso livello di integrazione e affidabilità delle app specifiche della piattaforma.
Puoi farlo in diversi modi:
- Installazione della PWA dal browser.
- Installazione della PWA dall'app store.
Avere diversi canali di distribuzione è un ottimo modo per raggiungere un numero elevato di utenti, ma scegliere la strategia giusta per promuovere l'installazione della tua PWA può essere difficile.
Questa guida illustra le best practice per combinare diverse opzioni di installazione al fine di aumentare i tassi di installazione ed evitare la concorrenza e la cannibalizzazione delle piattaforme. Le offerte di installazione coperte includono le PWA installate sia dal browser sia dall'App Store, nonché le app specifiche della piattaforma.
Perché rendere installabile la tua app web?
Le app web progressive installate vengono eseguite in una finestra autonoma anziché in una scheda del browser. Possono essere avviati dalla schermata Home, dalla barra delle app, dalla barra delle app o dalla sezione App dell'utente. È possibile cercarle su un dispositivo e passare da una all'altra con il selettore di app, in modo che sembrino parte del dispositivo su cui sono installate.
Tuttavia, avere sia un'app web installabile sia un'app specifica per la piattaforma può creare confusione negli utenti. Per alcuni utenti le app specifiche della piattaforma potrebbero essere la scelta migliore, ma per altri possono presentare alcuni svantaggi:
- Limiti di spazio di archiviazione: l'installazione di una nuova app potrebbe comportare l'eliminazione di altre app o la pulizia dello spazio rimuovendo contenuti importanti. Questo è particolarmente svantaggioso per gli utenti che utilizzano dispositivi di fascia bassa.
- Larghezza di banda disponibile:il download di un'app può essere un processo costoso e lento, soprattutto per gli utenti con connessioni lente e piani dati costosi.
- Frizione: uscire da un sito web e passare a uno store per scaricare un'app crea ulteriore frizione e ritarda un'azione dell'utente che potrebbe essere eseguita direttamente sul web.
- Ciclo di aggiornamento:apportare modifiche alle app specifiche della piattaforma potrebbe richiedere la procedura di revisione dell'app, il che può rallentare le modifiche e gli esperimenti (ad esempio i test A/B).
In alcuni casi, la percentuale di utenti che non scaricano la tua app specifica per la piattaforma potrebbe essere elevata, ad esempio quelli che pensano di non utilizzare l'app molto spesso o che non possono giustificare l'utilizzo di diversi megabyte di spazio di archiviazione o dati. Puoi determinare le dimensioni di questo segmento in diversi modi, ad esempio utilizzando una configurazione di analisi per monitorare la percentuale di utenti "solo web mobile".
Se le dimensioni di questo segmento sono considerevoli, è un buon indicatore del fatto che devi fornire modi alternativi per installare le tue esperienze.
Promuovere l'installazione della PWA tramite il browser
Se hai una PWA di alta qualità, potrebbe essere meglio promuovere la sua installazione rispetto all'app specifica della piattaforma. Ad esempio, se nell'app specifica della piattaforma mancano le funzionalità offerte dalla tua PWA o se non è stata aggiornata da un po' di tempo. Può essere utile promuovere l'installazione della tua PWA anche se l'app specifica per la piattaforma non è stata ottimizzata per schermi più grandi, ad esempio su ChromeOS.
Per alcune app, promuovere le installazioni di app specifiche della piattaforma è una parte fondamentale del modello di business. In questo caso, ha senso promuovere l'installazione della tua app specifica della piattaforma. Tuttavia, alcuni utenti potrebbero preferire rimanere sul web. Se questo segmento può essere identificato, la richiesta relativa alla PWA può essere mostrata solo a questo segmento (ovvero "PWA come alternativa").
PWA come esperienza installabile principale
Una volta che una PWA soddisfa i criteri di installabilità, la maggior parte dei browser mostra un'indicazione che indica che la PWA è installabile. Ad esempio, Chrome per computer mostra un'icona installabile nella barra degli indirizzi, mentre su dispositivo mobile viene visualizzata una mini barra delle informazioni:
Sebbene questo possa essere sufficiente per alcune esperienze, se il tuo obiettivo è aumentare le installazioni della tua PWA, ti consigliamo vivamente di ascoltare l'evento BeforeInstallPromptEvent e di seguire gli schemi per promuovere l'installazione della tua PWA.
Impedire alla PWA di cannibalizzare il tasso di installazioni di app specifico della piattaforma
In alcuni casi, puoi scegliere di promuovere l'installazione della tua app specifica per la piattaforma rispetto alla tua PWA, ma in questo caso ti consigliamo comunque di fornire un meccanismo per consentire agli utenti di installare la tua PWA. Questa opzione di riserva consente agli utenti che non possono o non vogliono installare la tua app specifica per la piattaforma di usufruire di un'esperienza installata simile.
Il primo passaggio per implementare questa strategia consiste nel definire un'euristica per stabilire quando mostrare all'utente una promozione di installazione per la tua PWA.
Ad esempio: un utente PWA è un utente che ha visto la richiesta di installazione dell'app specifica per la piattaforma e non l'ha installata. È tornato sul sito almeno cinque volte o ha fatto clic sul banner dell'app, ma ha continuato a utilizzare il sito web.
L'euristica può essere implementata nel seguente modo:
- Mostra il banner di installazione dell'app specifico per la piattaforma.
- Se un utente ignora il banner, imposta un cookie con queste informazioni (ad es.
document.cookie = "app-install-banner=dismissed"). - Utilizza un altro cookie per monitorare il numero di visite degli utenti al sito (ad es.
document.cookie = "user-visits=1"). - Scrivi una funzione, ad esempio
isPWAUser(), che utilizzi le informazioni memorizzate in precedenza nei cookie insieme all'APIgetInstalledRelatedApps()per determinare se un utente è considerato un "utente PWA". - Quando l'utente esegue un'azione significativa, chiama
isPWAUser(). Se la funzione restituisce true e la richiesta di installazione della PWA è stata salvata in precedenza, puoi mostrare il pulsante di installazione della PWA.
Promuovere l'installazione della tua PWA tramite uno store
Le app per gli store possono essere create con tecnologie diverse, tra cui le tecniche PWA. In Integrazione delle PWA negli ambienti nativi puoi trovare un riepilogo delle tecnologie che possono essere utilizzate a questo scopo.
In questa sezione classificheremo le app nello store in due gruppi:
- App specifiche per la piattaforma:queste app sono create principalmente con codice specifico per la piattaforma. Le dimensioni dipendono dalla piattaforma, ma in genere sono superiori a 10 MB su Android e 30 MB su iOS. Potresti voler promuovere la tua app specifica per la piattaforma se non hai una PWA o se l'app specifica per la piattaforma presenta un insieme di funzionalità più completo.
- App leggere:queste app possono essere create anche con codice specifico per la piattaforma, ma in genere vengono create con tecnologia web e pacchettizzate in un wrapper specifico per la piattaforma. Anche le PWA complete possono essere caricate nei negozi. (Questo argomento viene trattato più avanti in questo articolo). Alcune aziende scelgono di offrire queste esperienze come "lite", mentre altre hanno utilizzato questo approccio anche per le loro app principali (di base).
Promozione di app leggere
Secondo uno studio di Google Play, per ogni aumento di 6 MB delle dimensioni di un APK, il tasso di conversione delle installazioni diminuisce dell'1%. Ciò significa che il tasso di completamento del download di un'app di 10 MB potrebbe essere approssimativamente il 30% più alto rispetto a un'app di 100 MB.
Per risolvere il problema, alcune aziende stanno sfruttando le proprie PWA per fornire una versione leggera della propria app nel Play Store utilizzando le Attività web attendibili (TWA). Le TWA inseriscono la tua PWA in un componente simile a WebView e le dimensioni dell'app risultante sono in genere di pochi megabyte.
Oyo, una delle più grandi aziende di servizi alberghieri in India, ha creato una versione Lite della propria app e l'ha resa disponibile nel Play Store utilizzando una TWA. Al momento della stesura di questo articolo, l'app Oyo pesava solo 850 KB, ovvero solo il 7% delle dimensioni dell'app per Android. Una volta installata, è indistinguibile dall'app per Android:
Oyo ha mantenuto nello store sia la versione principale che quella "lite" dell'app, offrendo una scelta agli utenti.
Offrire un'esperienza web leggera
Intuitivamente, gli utenti che utilizzano dispositivi di fascia bassa potrebbero essere più inclini a scaricare versioni leggere delle app rispetto agli utenti che utilizzano smartphone di fascia alta. Pertanto, se è possibile identificare il dispositivo di un utente, puoi dare la priorità al banner di installazione dell'app leggera rispetto alla versione dell'app specifica per la piattaforma più pesante.
Sul web è possibile ottenere indicatori del dispositivo e mapparli approssimativamente alle categorie di dispositivi (ad es. "alto", "medio" o "basso"). Puoi ottenere queste informazioni in diversi modi, utilizzando API JavaScript o suggerimenti client.
Utilizzo di JavaScript
Utilizzando proprietà JavaScript come navigator.hardwareConcurrency, navigator.deviceMemory e navigator.connection puoi ottenere informazioni rispettivamente sulla CPU, sulla memoria e sullo stato della rete del dispositivo. Ad esempio:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
Utilizzare i suggerimenti client
Gli indicatori del dispositivo possono essere dedotti anche nelle intestazioni delle richieste HTTP, tramite i suggerimenti per i client. Ecco come implementare il codice precedente per la memoria del dispositivo con i suggerimenti per i client:
Innanzitutto, comunica al browser che ti interessa ricevere suggerimenti sulla memoria del dispositivo nell'intestazione della risposta HTTP per qualsiasi richiesta proprietaria:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
A questo punto, inizierai a ricevere informazioni su Device-Memory nell'intestazione della richiesta delle richieste HTTP:
GET /main.js HTTP/1.1
Device-Memory: 0.5
Puoi utilizzare queste informazioni nei tuoi backend per memorizzare un cookie con la categoria del dispositivo dell'utente:
app.get('/route', (req, res) => {
// Determine device category
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Set cookie
res.setCookie('Device-Category', deviceCategory);
…
});
Infine, crea la tua logica per mappare queste informazioni alle categorie di dispositivi e mostra la richiesta di installazione dell'app corrispondente in ogni caso:
if (isDeviceMidOrLowEnd()) {
// show "Lite app" install banner or PWA A2HS prompt
} else {
// show "Core app" install banner
}
Conclusione
La possibilità di avere un'icona nella schermata Home dell'utente è una delle funzionalità più coinvolgenti delle applicazioni. Dato che in passato questa opzione era possibile solo per le app installate dagli store, le aziende potrebbero pensare che mostrare un banner di installazione dello store sia sufficiente per convincere gli utenti a installare le loro esperienze. Al momento sono disponibili più opzioni per consentire agli utenti di installare un'app, tra cui offrire esperienze con app leggere nei negozi e consentire agli utenti di aggiungere PWA alla schermata Home chiedendo loro di farlo direttamente dal sito web.