In passato, l'installazione delle app era possibile solo nel contesto di applicazioni specifiche delle piattaforme. Oggi, le app web moderne offrono esperienze installabili che forniscono lo stesso livello di integrazione e affidabilità delle app specifiche per piattaforma.
Puoi farlo in diversi modi:
- Installazione della PWA dal browser.
- Installare la PWA dallo 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 esplora le best practice per combinare diverse opzioni di installazione al fine di aumentare i tassi di installazione ed evitare la concorrenza e la cannibalizzazione della piattaforma. 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 cercarli su un dispositivo e passare da uno all'altro con il selettore di app, facendoli sentire parte del dispositivo su cui sono installati.
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 per piattaforma possono 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. Ciò è particolarmente svantaggio per gli utenti di 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 la dimensione di questo segmento in diversi modi, ad esempio utilizzando un sistema di analisi per monitorare la percentuale di utenti "solo web mobile".
Se le dimensioni di questo segmento sono considerevoli, significa che devi fornire metodi alternativi per installare le tue esperienze.
Promuovere l'installazione della PWA tramite il browser
Se hai una PWA di alta qualità, potrebbe essere meglio promuoverne l'installazione sull'app specifica per la piattaforma, ad esempio se nell'app specifica della piattaforma manca la funzionalità offerta dalla PWA o se non viene aggiornata da un po' di tempo. Può anche essere utile promuovere l'installazione della PWA se l'app specifica per piattaforma non è stata ottimizzata per gli 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
Quando una PWA soddisfa i criteri di installabilità, la maggior parte dei browser mostra un'indicazione che la PWA è installabile. Ad esempio, nella barra degli indirizzi di Chrome per computer viene visualizzata un'icona installabile, mentre sui dispositivi mobili viene visualizzata una mini-barra delle informazioni:
Anche se questo può essere sufficiente per alcune esperienze, se il tuo obiettivo è promuovere le installazioni della tua PWA, ti consigliamo vivamente di ascoltare il BeforeInstallPromptEvent e seguire i pattern per promuovere l'installazione della PWA.
Impedisci alla tua PWA di cannibalizzare il tasso di installazioni di app specifiche per la tua piattaforma
In alcuni casi, puoi scegliere di promuovere l'installazione dell'app specifica per una piattaforma sulla PWA, ma in questo caso ti consigliamo comunque di fornire un meccanismo per consentire agli utenti di installare la PWA. Questa opzione di riserva consente agli utenti che non possono o non vogliono installare la tua app specifica per la piattaforma di avere 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 PWA è stata salvata in precedenza, puoi mostrare il pulsante di installazione PWA.
Promuovere l'installazione della PWA tramite uno store
Le app per gli store possono essere create con diverse tecnologie, tra cui 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 loro dimensioni dipendono dalla piattaforma, ma in genere superano i 10 MB su Android e i 30 MB su iOS. Ti consigliamo di promuovere l'app specifica per la tua piattaforma se non disponi di 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 della piattaforma, ma di solito sono sviluppate con tecnologia web e confezionate 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 la percentuale di completamento di un download di un'app da 10 MB potrebbe essere superiore di circa il 30% rispetto a un'app da 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 società alberghiere dell'India, ha creato una versione Lite dell'app e l'ha resa disponibile nel Play Store tramite una TWA. All'epoca in cui è stato scritto questo articolo, l'app Oyo aveva solo 850 kB, ovvero il 7% delle dimensioni dell'app per Android. Una volta installata, non è distinguibile dalla relativa app per Android:
Oyo ha conservato nello store sia la versione di punta che quella "lite" dell'app, offrendo così agli utenti la possibilità di scegliere.
Offrire un'esperienza web leggera
Intuitivamente, gli utenti di dispositivi di fascia bassa potrebbero essere più inclini a scaricare versioni leggere delle app rispetto agli utenti di telefoni 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 le API JavaScript o i client hint.
Utilizzo di JavaScript
Utilizzando proprietà JavaScript come navigator.hardwareConcurrency, navigator.deviceMemory e navigator.connection puoi ottenere informazioni rispettivamente su CPU, memoria e stato della rete del dispositivo. Ad esempio:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
Utilizzare i suggerimenti client
Gli indicatori dei dispositivi possono essere dedotti anche nelle intestazioni delle richieste HTTP tramite client hint. Ecco come puoi implementare il codice precedente per la memoria del dispositivo con i suggerimenti del 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
Dopodiché 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 mostrare la corrispondente richiesta di installazione dell'app 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. Attualmente ci sono altre opzioni per consentire agli utenti di installare un'app, tra cui offrire esperienze app leggere negli store e consentire agli utenti di aggiungere PWA alla schermata Home chiedendo loro di farlo direttamente dal sito web.