È importante capire come si presenta l'utilizzo della tua app o del tuo sito quando la connettività è scarsa o instabile e sviluppare di conseguenza. Esiste una serie di strumenti che possono aiutarti.
Esegui test con larghezza di banda ridotta e latenza elevata
Una percentuale crescente di persone utilizza il web su dispositivi mobili. Anche a casa, molte persone stanno abbandonando la banda larga fissa per quella mobile.
In questo contesto, è importante capire come viene percepito l'utilizzo della tua app o del tuo sito quando la connettività è scarsa o inaffidabile. Una serie di strumenti software può aiutarti a emulare e simulare una larghezza di banda ridotta e una latenza elevata.
Emula la limitazione della larghezza di banda della rete
Quando crei o aggiorni un sito, devi garantire prestazioni adeguate in una varietà di condizioni di connettività. Esistono diversi strumenti che possono aiutarti.
Strumenti del browser
Chrome DevTools ti consente di testare il tuo sito con una varietà di velocità di caricamento/download e tempi di round trip, utilizzando preset o impostazioni personalizzate dal riquadro Rete. Per informazioni di base, consulta Inizia ad analizzare le prestazioni della rete.
Strumenti di sistema
Network Link Conditioner è un pannello delle preferenze disponibile su Mac se installi Hardware IO Tools per Xcode:
Emulazione del dispositivo
Emulatore Android consente di simulare varie condizioni di rete durante l'esecuzione di app (tra cui browser web e app web ibride) su Android:
Per iPhone, è possibile utilizzare Network Link Conditioner per simulare condizioni di rete compromesse (vedi sopra).
Esegui test da località e reti diverse
Le prestazioni della connettività dipendono dalla posizione del server e dal tipo di rete.
WebPagetest è un servizio online che consente di eseguire una serie di test delle prestazioni per il tuo sito utilizzando una varietà di reti e località host. Ad esempio, puoi provare il tuo sito da un server in India su una rete 2G o tramite cavo da una città degli Stati Uniti.
Seleziona una località e, dalle impostazioni avanzate, seleziona un tipo di connessione. Puoi anche automatizzare i test utilizzando script (ad esempio, per accedere a un sito) o utilizzando le loro API RESTful. In questo modo, puoi includere i Connectivity Tests nei processi di compilazione o nel logging delle prestazioni.
Fiddler supporta il proxying globale tramite GeoEdge e le sue regole personalizzate possono essere utilizzate per simulare le velocità del modem:
Esegui i test su una rete con problemi
I proxy software e hardware ti consentono di emulare condizioni problematiche della rete mobile, come la limitazione della larghezza di banda, il ritardo dei pacchetti e la perdita casuale di pacchetti. Un proxy condiviso o una rete con problemi può consentire a un team di sviluppatori di incorporare test di rete reali nel proprio workflow.
Augmented Traffic Control (ATC) di Facebook è un insieme di applicazioni con licenza BSD che può essere utilizzato per modellare il traffico ed emulare condizioni di rete compromesse:
Facebook ha persino istituito i 2G Tuesdays per capire meglio come le persone con connessione 2G utilizzano il suo prodotto. Il martedì, i dipendenti ricevono un popup che offre loro la possibilità di simulare una connessione 2G.
Il proxy HTTP/HTTPS Charles può essere utilizzato per regolare la larghezza di banda e la latenza. Charles è un software commerciale, ma è disponibile una prova senza costi.
Ulteriori informazioni su Charles sono disponibili su codewithchris.com.
Gestisci la connettività non affidabile e la "lie-fi"
Che cos'è il lie-fi?
Il termine lie-fi risale almeno al 2008 (quando i telefoni avevano questo aspetto) e si riferisce a una connettività che non è ciò che sembra. Il browser si comporta come se avesse connettività quando, per qualsiasi motivo, non ce l'ha.
Una connettività interpretata in modo errato può comportare un'esperienza negativa, poiché il browser (o JavaScript) continua a tentare di recuperare le risorse anziché rinunciare e scegliere un'alternativa sensata. Il lie-fi può essere peggiore dell'offline; almeno se un dispositivo è sicuramente offline, il tuo JavaScript può intraprendere un'azione evasiva appropriata.
È probabile che il problema del lie-fi diventi più grave man mano che un numero maggiore di persone passa ai dispositivi mobili e abbandona la banda larga fissa. I dati recenti del censimento degli Stati Uniti mostrano un allontanamento dalla banda larga fissa. Il seguente grafico mostra l'utilizzo di internet mobile a casa nel 2015 rispetto al 2013:
Utilizza i timeout per gestire la connettività intermittente
In passato, per testare la connettività intermittente venivano utilizzati metodi di hacking con XHR, ma il service worker consente di utilizzare metodi più affidabili per impostare i timeout di rete. Per farlo, puoi utilizzare Workbox con poche righe di codice:
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
Puoi scoprire di più su Workbox nel discorso di Jeff Posnick al Chrome Dev Summit, Workbox: Flexible PWA Libraries.
È in fase di sviluppo anche la funzionalità di timeout per l'API Fetch e l'API Streams dovrebbe aiutare ottimizzando l'importazione dei contenuti ed evitando richieste monolitiche. Jake Archibald fornisce ulteriori dettagli su come affrontare il problema della connettività lie-fi in Supercharging page load.