Pubblicazione adattiva basata sulla qualità della rete

Milica Mihajlija
Milica Mihajlija

Il caricamento di un sito web può essere un'esperienza molto diversa a seconda delle condizioni della rete. Di solito tutto funziona bene quando sei su una rete veloce, ma se sei in viaggio con un piano dati limitato e una connessione intermittente o se sei bloccato con un laptop su una rete Wi-Fi lenta di un bar, la situazione è diversa.

Un modo per risolvere questo problema è adattare gli asset che pubblichi agli utenti in base alla qualità della loro connessione. Questo è ora possibile con l'API Network Information che consente alle applicazioni web di accedere alle informazioni sulla rete dell'utente.

Supporto dei browser

  • Chrome: 61.
  • Edge: 79.
  • Firefox: non supportato.
  • Safari: non supportato.

Origine

Utilizzo

Esistono molti modi per utilizzare queste informazioni sulla rete per migliorare l'esperienza utente:

  • Passare dalla pubblicazione di contenuti ad alta definizione a quella di contenuti a bassa definizione in base alla rete dell'utente.
  • Decidi se precaricare le risorse.
  • Ritarda i caricamenti e i download quando gli utenti sono connessi a una rete lenta.
  • Attiva la modalità offline se la qualità della rete non è sufficiente per caricare l'app e utilizzare le funzionalità.
  • Avvisare gli utenti che fare un'azione (ad esempio guardare un video) tramite rete mobile potrebbe comportare dei costi.
  • Utilizzalo nei tuoi dati e analisi per raccogliere dati sulla qualità della rete dei tuoi utenti.

Molte applicazioni fanno già qualcosa di simile. Ad esempio, YouTube, Netflix e la maggior parte degli altri servizi video (o di videochiamate) regolano automaticamente la risoluzione durante lo streaming. Durante il caricamento di Gmail, viene fornito agli utenti un link per "caricare HTML di base (per connessioni lente)".

Un link per caricare la versione HTML di base di Gmail quando gli utenti sono su connessioni lente

Come funziona

L'oggetto navigator.connection contiene informazioni sulla connessione di un cliente. Le sue proprietà sono spiegate nella tabella seguente.

Proprietà Spiegazione
downlink La stima della larghezza di banda in megabit al secondo.
effectiveType Il tipo effettivo della connessione, con possibili valori 'slow-2g', '2g', '3g' o '4g' (copre 4G e versioni successive). Determinato in base alla combinazione di tempo di andata e ritorno e velocità in downlink. Ad esempio, un downlink veloce combinato con un'alta latenza avrà un valoreeffectiveType inferiore a causa della latenza.
onchange Un gestore eventi che viene attivato quando le informazioni di 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 ridotta.

Ecco come appare quando lo esegui nella console del browser:

Console di Chrome DevTools che mostra i valori delle proprietà dell'oggetto navigator.connection

I valori effectiveType sono disponibili anche tramite suggerimenti 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 alle variazioni della qualità della rete. Se hai posticipato i caricamenti o i download a causa di cattive condizioni di rete, puoi fare affidamento sull'ascoltatore di eventi per riavviare il trasferimento quando vengono rilevate condizioni di rete migliori. Puoi utilizzarlo anche per avvisare gli utenti quando la qualità della rete cambia. Ad esempio, se perde il segnale Wi-Fi e passa a una rete mobile, può impedire trasferimenti accidentali di dati (e addebiti 💸).

Utilizza il listener di eventi onchange come faresti con 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 su reti lente e applicazioni che richiedono molta larghezza di banda. Il meglio di tutto è che può essere utilizzata come tecnica di miglioramento progressivo.