Il caricamento di un sito web può essere un'esperienza molto diversa a seconda delle condizioni della rete. Di solito è tutto senza problemi quando si è connessi a una rete veloce, ma quando si è in movimento con un piano dati limitato e una connessione instabile o si è bloccati su un laptop con una rete Wi-Fi lenta in un bar, la storia è diversa.
Un modo per affrontare questo problema è adattare gli asset che mostri agli utenti in base alla qualità della loro connessione. Ciò è ora possibile con l'API Network Information, che consente alle applicazioni web di accedere alle informazioni sulla rete dell'utente.
Utilizzo
Esistono molti modi per utilizzare queste informazioni di rete per migliorare l'esperienza utente:
- Passa dalla pubblicazione di contenuti ad alta definizione a quelli a bassa definizione in base alla rete dell'utente.
- Decidi se precaricare le risorse.
- Rimanda i caricamenti e i download quando la connessione degli utenti è lenta.
- Attiva la modalità offline se la qualità della rete non è sufficiente per caricare l'app e utilizzare le funzionalità.
- Avvisa gli utenti che compiere un'azione (ad esempio guardare un video) tramite la rete cellulare potrebbe costare loro un costo.
- Utilizzalo nelle tue analisi per raccogliere dati sulla qualità della rete degli utenti.
Molte applicazioni stanno già facendo qualcosa di simile. Ad esempio, YouTube, Netflix e la maggior parte degli altri servizi di video (o videochiamate) regolano automaticamente la risoluzione durante lo streaming. Durante il caricamento di Gmail, fornisce agli utenti un link per "caricare HTML di base (per connessioni lente)".
Come funziona
L'oggetto navigator.connection contiene informazioni sulla connessione di un client. Le proprietà sono spiegate nella seguente tabella.
| Proprietà | Spiegazione |
|---|---|
downlink |
La stima della larghezza di banda in megabit al secondo. |
effectiveType |
Il tipo effettivo di connessione, con i valori possibili 'slow-2g', '2g', '3g' o '4g' (copre 4g e successivi). Determinato in base alla combinazione di tempo di round trip e velocità di downlink. Ad esempio, un downlink veloce combinato con un'alta latenza avrà un valore efficace inferiore a causa della latenza. |
onchange |
Un gestore di eventi che si attiva quando le informazioni sulla connessione cambiano. |
rtt |
La latenza di andata e ritorno stimata della connessione in millisecondi. |
saveData |
Un valore booleano che definisce se l'utente ha richiesto una modalità di utilizzo dei dati ridotto. |
Ecco l'aspetto che appare quando lo esegui nella console del browser:
I valori effectiveType sono disponibili anche tramite
client client
e ti consentono di comunicare il tipo di connessione del browser ai server.
Il listener di eventi onchange consente di adattarsi in modo dinamico ai cambiamenti nella
qualità della rete. Se hai differito i caricamenti o i download a causa di condizioni di rete scadenti, puoi fare affidamento sul listener di eventi per riavviare il trasferimento quando rileva condizioni di rete migliori. Puoi utilizzarlo anche per informare gli utenti quando la qualità della rete cambia. Ad esempio, se hanno perso il segnale Wi-Fi e sono stati indirizzati a una rete mobile, è possibile evitare trasferimenti di dati accidentali (e addebiti 💸.
Utilizza il listener di eventi onchange come qualsiasi altro listener di eventi:
navigator.connection.addEventListener('change', doSomethingOnChange);
Conclusione
I potenziali vantaggi dell'API Network Information sono notevoli, in particolare per gli utenti con reti e applicazioni lente che richiedono molta larghezza di banda. Inoltre, può essere utilizzato come tecnica di miglioramento progressivo.