In passato, l'installazione delle app era possibile solo nel contesto di applicazioni specifiche della piattaforma. Oggi, le moderne app web offrono esperienze installabili che forniscono lo stesso livello di integrazione e affidabilità delle app specifiche per piattaforma.
Puoi farlo in diversi modi:
- Installare la PWA dal browser.
- Installare la PWA dall'app store.
Avere diversi canali di distribuzione è un modo efficace per raggiungere un ampio numero 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 le tariffe di installazione ed evitare la concorrenza e la cannibalizzazione della piattaforma. Le offerte di installazione trattate includono le PWA installate sia dal browser che dall'App Store, nonché app specifiche per piattaforma.
Perché rendere la tua app web installabile?
Le app web progressive installate vengono eseguite in una finestra autonoma anziché in una scheda del browser. Possono essere avviati dalla schermata Home, dal dock, dalla barra delle applicazioni o dalla barra delle app dell'utente. È possibile cercarle su un dispositivo e passare da una all'altra con il selettore di app, in modo da farle sentire parte del dispositivo su cui sono installate.
Tuttavia, avere sia un'app web installabile sia un'app specifica per la piattaforma può confondere gli utenti. Per alcuni utenti le app specifiche della piattaforma possono essere la scelta migliore, ma per altri possono presentare alcuni svantaggi:
- Vincoli relativi allo spazio di archiviazione: l'installazione di una nuova app potrebbe comportare l'eliminazione di altre app o la liberazione di spazio mediante la rimozione di 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.
- Attrito: l'uscita da un sito web e lo spostamento in uno store per scaricare un'app crea ulteriore attrito e ritarda un'azione dell'utente che potrebbe essere eseguita direttamente sul web.
- Ciclo di aggiornamento: per apportare modifiche in app specifiche per piattaforma potrebbe essere necessario svolgere un processo di revisione delle app, che può rallentare le modifiche e gli esperimenti (ad es. test A/B).
In alcuni casi, la percentuale di utenti che non scaricano l'app specifica per la tua piattaforma potrebbe essere elevata, ad esempio: gli utenti che ritengono di non utilizzare l'app molto spesso o che non sono in grado di giustificare l'acquisto 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, significa che devi fornire metodi alternativi per installare le tue esperienze.
Promozione dell'installazione della PWA tramite il browser
Se disponi di una PWA di alta qualità, potrebbe essere meglio promuoverne l'installazione rispetto all'app specifica per la tua piattaforma, ad esempio se nell'app specifica per la piattaforma non sono presenti funzionalità offerte dalla PWA o se non viene aggiornata da un po' di tempo. Può anche essere utile promuovere l'installazione della tua PWA se l'app specifica della piattaforma non è stata ottimizzata per gli schermi più grandi, come ad esempio ChromeOS.
Per alcune app, promuovere installazioni di app specifiche per piattaforma è una parte fondamentale del modello di business; in questo caso, ha senso dal punto di vista commerciale promuovere l'installazione dell'app specifica per la tua piattaforma. Tuttavia, alcuni utenti potrebbero essere più a proprio agio sul web. Se è possibile identificare questo segmento, il prompt PWA può essere mostrato solo a loro (quello che chiamiamo "PWA come riserva").
PWA come esperienza principale installabile
Quando una PWA soddisfa i criteri di installazione, la maggior parte dei browser mostra un'indicazione che la PWA è installabile. Ad esempio, nella barra degli indirizzi di Chrome per computer desktop viene visualizzata un'icona installabile, mentre sui dispositivi mobili viene visualizzata una mini-barra delle informazioni:
Anche se questo potrebbe essere sufficiente per alcune esperienze, se il tuo obiettivo è aumentare le installazioni della tua PWA, ti consigliamo vivamente di ascoltare BeforeInstallPromptEvent e di seguire i pattern per promuovere l'installazione della PWA.
Impedisci alla tua PWA di "cannibalizzare" la percentuale di installazione delle app specifica per la tua piattaforma
In alcuni casi, puoi scegliere di promuovere l'installazione dell'app specifica della piattaforma rispetto alla 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 della piattaforma di usufruire di un'esperienza installata simile.
Il primo passaggio per implementare questa strategia è definire un'euristica per mostrare all'utente una promozione di installazione della tua PWA.
Ad esempio: un utente PWA è un utente che ha visto la richiesta di installazione dell'app specifica per la piattaforma e non ha installato l'app specifica per la piattaforma. È tornato sul sito almeno cinque volte oppure ha fatto clic sul banner dell'app, ma ha continuato a utilizzare il sito web.
Quindi, l'euristica può essere implementata nel seguente modo:
- Mostra il banner di installazione dell'app specifico per la piattaforma.
- Se un utente chiude 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, come
isPWAUser(), che utilizzi le informazioni precedentemente memorizzate 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.
Promozione dell'installazione della PWA tramite uno store
Le app per gli store possono essere create con diverse tecnologie, incluse le tecniche delle PWA. In Combinazione di PWA negli ambienti nativi, puoi trovare un riepilogo delle tecnologie che puoi utilizzare a questo scopo.
In questa sezione classificheremo le app nello store in due gruppi:
- App specifiche per piattaforma: queste app sono prevalentemente create con un codice specifico per la piattaforma. Le loro dimensioni dipendono dalla piattaforma, ma di solito superano i 10 MB su Android e i 30 MB su iOS. Potresti voler promuovere la tua app specifica per piattaforma se non hai una PWA o se l'app specifica per la piattaforma presenta un insieme di funzionalità più completo.
- App leggere: anche queste app possono essere create con un codice specifico per la piattaforma, ma in genere sono progettate con tecnologia web e pacchettizzati in un wrapper specifico per la piattaforma. Anche le PWA complete possono essere caricate negli store. Questo argomento viene affrontato più avanti nell'articolo. Alcune aziende scelgono di offrire queste esperienze come "lite" e altre hanno utilizzato questo approccio anche per le loro app di punta (principali).
Promozione di app leggere
Secondo uno studio di Google Play, per ogni aumento di 6 MB alle dimensioni di un APK, il tasso di conversione delle installazioni diminuisce dell'1%. Ciò significa che la percentuale di completamento dei download di un'app di 10 MB potrebbe essere di circa il 30% superiore rispetto a quella di un'app di 100 MB.
Per risolvere questo problema, alcune aziende stanno sfruttando la loro PWA per fornire una versione leggera della loro app nel Play Store utilizzando le attività web attendibili (TWA). Le TWA eseguono l'aggregazione della PWA in un componente simile a WebView e le dimensioni dell'app risultanti sono di solito di pochi megabyte.
Oyo, una delle più grandi società di ospitalità indiana, ha creato una versione Lite della propria app e l'ha resa disponibile nel Play Store utilizzando un TWA. Al momento della stesura di questo articolo, l'app Oyo era di soli 850 kB, solo il 7% delle dimensioni dell'app Android. Una volta installata, non è distinguibile dall'app per Android:
Oyo ha mantenuto nello store sia la versione principale sia la versione "lite" dell'app, offrendo così la possibilità di scegliere 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 telefoni di fascia alta. Pertanto, se riesci a identificare il dispositivo di un utente, potresti dare la priorità al banner leggero per l'installazione dell'app rispetto alla versione più pesante dell'app specifica per la piattaforma.
Sul web è possibile ottenere i segnali dei dispositivi 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 sullo stato di CPU, memoria e rete del dispositivo. Ad esempio:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
Utilizzo dei suggerimenti client
Gli indicatori dei dispositivi possono essere dedotti anche nelle intestazioni delle richieste HTTP, tramite i suggerimenti del client. Ecco come implementare il codice precedente per la memoria del dispositivo con i suggerimenti client:
Per prima cosa, 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 le informazioni relative a 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 una logica personalizzata 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 questo era possibile solo per le app installate dagli store, le aziende potrebbero pensare che mostrare un banner di installazione dello store sarebbe sufficiente per convincere gli utenti a installare le loro esperienze. Attualmente esistono altre opzioni per consentire agli utenti di installare un'app, tra cui offrire esperienze di app leggere negli store e consentire agli utenti di aggiungere PWA alla schermata Home chiedendo loro di farlo direttamente dal sito web.