Questa pagina è stata tradotta dall'API Cloud Translation.

Pubblicazione adattiva basata sulla qualità della rete

Milica Mihajlija

Il caricamento di un sito web può essere un'esperienza molto diversa a seconda della rete le condizioni di traffico. Con una rete veloce, tutto è uniforme, ma quando sei in viaggio con un piano dati limitato e la connessione instabile o blocchi con un laptop su una rete Wi-Fi lenta in bar, è tutta un'altra storia.

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

Supporto dei browser

Origine

Utilizzo

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

Passa dalla pubblicazione di contenuti in alta definizione a quella a bassa definizione e viceversa in base al rete dell'utente.
Decidi se precaricare le risorse.
Rimanda caricamenti e 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à.
Avvisare gli utenti che fare qualcosa (ad esempio, guardare un video) tramite rete mobile potrebbe costare denaro.
Utilizzalo in Analytics per raccogliere i dati sui tuoi utenti qualità della rete.

Molte applicazioni stanno già facendo qualcosa di simile. Ad esempio, YouTube, Netflix e la maggior parte degli altri servizi di video (o videochiamate) si regolano automaticamente la risoluzione durante lo streaming. Durante il caricamento di Gmail, fornisce agli utenti una link a "carica HTML di base (per connessioni lente)".

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

Come funziona

L'oggetto navigator.connection contiene informazioni sull'infrastruttura connessione. Le sue proprietà sono spiegate nella tabella seguente.

Proprietà	Spiegazione
`downlink`	La stima della larghezza di banda in megabit al secondo.
`effectiveType`	Il tipo di connessione effettivo, con i possibili valori `'slow-2g'`, `'2g'`, `'3g'` o `'4g'` (copre 4 g e superiori). Determinate in base alla combinazione di tempo di round trip e velocità del downlink. Ad esempio, un downlink veloce combinato con un'alta latenza avrà un valoreeffectiveType inferiore a causa della latenza.
`onchange`	Un gestore di eventi che si attiva 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 ridotto.

Ecco come appare quando lo esegui nella console del browser:

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

I valori effectiveType sono disponibili anche tramite Client hint e ti consentono di comunicare il tipo di connessione del browser ai server.

Il listener di eventi onchange ti consente di adattarti in modo dinamico alle modifiche qualità della rete. Se hai differito i caricamenti o i download a causa di una rete scadente condizioni, 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 modifiche alla qualità della rete. Ad esempio, se hanno perso il segnale Wi-Fi e sono su una rete mobile, questo 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 agli utenti di reti e applicazioni lente che richiedono molta larghezza di banda. Il meglio tutti, può essere utilizzata come tecnica di miglioramento progressivo.