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:
- Installare la PWA dal browser.
- Installare la PWA dallo 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 impegnativo.
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 illustrate includono le PWA installate sia dal browser sia 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. e possono essere lanciate dalla schermata Home, dal dock, dalla barra delle applicazioni o dalla barra delle 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 piattaforma può creare confusione per gli utenti. Per alcuni utenti le app specifiche per piattaforma possono essere la scelta migliore, ma per altri possono presentare alcuni svantaggi:
- Limite di spazio di archiviazione:l'installazione di una nuova app potrebbe comportare l'eliminazione di altre app o la liberazione di spazio tramite 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, ancora di più per gli utenti con connessioni lente e piani dati costosi.
- Attrito: abbandonare un sito web e recarti in un negozio per scaricare un'app crea ulteriori problemi e ritarda un'azione utente che può essere eseguita direttamente sul web.
- Ciclo di aggiornamento: le modifiche apportate ad app specifiche per una piattaforma potrebbero richiedere una procedura di revisione dell'app, che può rallentare le modifiche e gli esperimenti (ad esempio, i test A/B).
In alcuni casi, la percentuale di utenti che non scaricherà la tua applicazione specifica per una piattaforma potrebbe essere elevata, ad esempio gli utenti che pensano di non utilizzare l'applicazione molto spesso o non sono in grado di giustificare l'utilizzo di diversi megabyte di spazio di archiviazione o dati. È possibile determinare la dimensione di questo segmento in diversi modi, ad esempio utilizzando un sistema di analisi per monitorare la percentuale di "solo web mobile" utenti.
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 disponi di una PWA di alta qualità, potrebbe essere meglio promuoverne l'installazione sull'app specifica per la tua piattaforma. Ad esempio, se nell'app specifica per piattaforma manca la funzionalità offerta dalla tua 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 l'installazione di app specifiche per piattaforma è una parte fondamentale del modello di business; in questo caso, ha senso promuovere l'installazione di un'app per una piattaforma specifica. Tuttavia, alcuni utenti potrebbero essere più a loro agio a rimanere sul web. Se questo segmento può essere identificato, il prompt della PWA può essere mostrato solo a questo utente (quello che chiamiamo "PWA di riserva").
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 è definire un'euristica in base al momento in cui mostrerai all'utente una promozione per l'installazione della tua PWA.
Ad esempio: un utente PWA è un utente che ha visualizzato la richiesta di installazione di un'app specifica della piattaforma, ma non ha installato l'app in questione. Sono tornati sul sito almeno cinque volte o hanno fatto clic sul banner dell'app, ma hanno continuato a utilizzare il sito web.
Quindi, l'euristica può essere implementata nel seguente modo:
- Mostra il banner per l'installazione di app specifico per la piattaforma.
- Se un utente chiude il banner, imposta un cookie con questa informazione (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 compie un'azione significativa, richiama
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 Combinare la 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 piattaforma: queste app sono create per lo più con codice specifico della 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 negli store. Questo argomento verrà discusso più avanti in questo articolo. Alcune aziende scelgono di fornirli in modalità "lite" e altri hanno usato 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 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 questo problema, alcune aziende stanno sfruttando la propria PWA per fornire una versione leggera della propria app nel Play Store utilizzando le attività web attendibili (TWA). Le variabili personalizzate raggruppano la PWA in un componente simile a WebView e le dimensioni dell'app risultanti 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. Al momento in cui questo articolo è stato scritto, l'app Oyo aveva solo 850 KB, ovvero il 7% delle dimensioni dell'app Android. Una volta installata, non è distinguibile dalla relativa app per Android:
Oyo ha mantenuto sia il fiore all'occhiello che il "leggero" versioni dell'app nello store, 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, potresti dare la priorità al banner di installazione dell'app semplificato rispetto alla versione dell'app specifica per la piattaforma, più pesante.
Sul web è possibile ottenere indicatori dei dispositivi e mapparli approssimativamente a 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';`
Utilizzo dei client hint
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 visualizzare 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 degli store sarebbe 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.