La gamma di funzionalità dei dispositivi che possono connettersi al web è più ampia che mai. La stessa applicazione web utilizzata su un computer desktop di fascia alta può essere fornita anche su uno smartphone, uno smartwatch o un tablet dalle prestazioni ridotte e può essere estremamente difficile creare esperienze avvincenti che funzionino perfettamente su qualsiasi dispositivo.
L'API Device Memory è una nuova funzionalità della piattaforma web pensata per aiutare gli sviluppatori web ad affrontare il panorama dei dispositivi moderni. Aggiunge una proprietà di sola lettura all'oggetto navigator,
navigator.deviceMemory, che restituisce la quantità di RAM a disposizione del dispositivo in
gigabyte, arrotondata per difetto al valore più vicino a due. L'API include anche un'intestazione Client Hints,
Device-Memory, che riporta lo stesso valore.
L'API Device Memory consente agli sviluppatori di eseguire due operazioni principali:
- Prendi decisioni di runtime sulle risorse da pubblicare in base al valore di memoria del dispositivo restituito (ad esempio, fornisci una versione "lite" di un'app agli utenti con dispositivi con memoria insufficiente).
- Segnala questo valore a un servizio di analisi in modo da poter comprendere meglio la correlazione tra la memoria del dispositivo e il comportamento degli utenti, le conversioni o altre metriche importanti per la tua attività.
Personalizzazione dinamica dei contenuti in base alla memoria del dispositivo
Se esegui il tuo server web e sei in grado di modificare la logica che pubblica risorse, puoi rispondere in modo condizionale alle richieste che contengono l'intestazione dei suggerimenti client Device-Memory.
GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*
Con questa tecnica puoi creare una o più versioni degli script dell'applicazione e rispondere alle richieste del client in modo condizionale in base al valore impostato nell'intestazione Device-Memory. Queste versioni non devono contenere
un codice completamente diverso (dal momento che è più difficile da gestire). La maggior parte delle volte, la versione "lite" escluderà solo le funzionalità che potrebbero essere costose e non fondamentali per l'esperienza utente.
Utilizzo dell'intestazione Client hint
Per attivare l'intestazione Device-Memory, aggiungi il tag <meta> dei suggerimenti client a <head> del documento:
<meta http-equiv="Accept-CH" content="Device-Memory">
In alternativa, includi "Device-Memory" nelle intestazioni della risposta Accept-CH del tuo server:
HTTP/1.1 200 OK
Date: Thu Dec 07 2017 11:44:31 GMT
Content-Type: text/html
Accept-CH: Device-Memory, Downlink, Viewport-Width
Questo indica al browser di inviare l'intestazione Device-Memory con tutte le richieste di risorse secondarie per la pagina corrente.
In altre parole, dopo che hai implementato una delle opzioni precedenti per il tuo sito web, se un utente visita un dispositivo con 0, 5 GB di RAM, tutte le richieste di immagine, CSS e JavaScript da questa pagina includeranno l'intestazione Device-Memory con il valore impostato su "0,5" e il tuo server potrà rispondere a queste richieste come preferisci.
Ad esempio, la seguente route Express pubblica una versione "lite" di uno script se l'intestazione Device-Memory è impostata e il suo valore è inferiore a 1, oppure pubblica una versione "completa" se il browser non supporta l'intestazione Device-Memory o il valore è pari o superiore a 1:
app.get('/static/js/:scriptId', (req, res) => {
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `scriptVersion` to "lite" if (and only if)
// `Device-Memory` isn't undefined and returns a number less than 1.
const scriptVersion = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Respond with the file based on `scriptVersion` above.
res.sendFile(`./path/to/${req.params.scriptId}.${scriptVersion}.js`);
});
Utilizzo dell'API JavaScript
In alcuni casi (come con un file server statico o una rete CDN) non potrai rispondere alle richieste in base a un'intestazione HTTP in modo condizionale. In questi casi, puoi utilizzare l'API JavaScript per effettuare richieste condizionali nel codice JavaScript.
La seguente logica è simile alla route Express riportata sopra, ad eccezione del fatto che determina dinamicamente l'URL dello script nella logica lato client:
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `componentVersion` to "lite" if (and only if)
// deviceMemory isn't undefined and returns a number less than 1.
const componentVersion = navigator.deviceMemory < 1 ? 'lite' : 'full';
const component = await import(`path/to/component.${componentVersion}.js`);
component.init();
Anche se pubblicare diverse versioni dello stesso componente in modo condizionale in base alle funzionalità del dispositivo è una buona strategia, a volte può essere ancora meglio non pubblicare un componente.
In molti casi, i componenti sono puramente miglioramenti. Apportano un tocco di design all'esperienza, ma non sono necessari per la funzionalità di base dell'app. In questi casi, potrebbe essere opportuno non caricare subito questi componenti. Se un componente destinato a migliorare l'esperienza utente rende l'app lenta o non reattiva, non raggiunge l'obiettivo.
Ogni volta che prendi una decisione che influisce sull'esperienza utente, è fondamentale misurarne l'impatto. È inoltre fondamentale avere un quadro chiaro delle prestazioni attuali della tua app.
Comprendere in che modo la memoria del dispositivo è correlata al comportamento degli utenti per la versione corrente dell'app fornirà informazioni più dettagliate sull'azione da intraprendere e ti fornirà una base di riferimento in base al quale misurare l'efficacia delle modifiche future.
Monitoraggio della memoria del dispositivo con l'analisi
L'API Device Memory è nuova e la maggior parte dei provider di analisi non la monitora per impostazione predefinita. Fortunatamente, la maggior parte dei fornitori di soluzioni di analisi offre un modo per monitorare i dati personalizzati. Ad esempio, Google Analytics offre la funzionalità Dimensioni personalizzate, che puoi utilizzare per monitorare la memoria del dispositivo per i dispositivi degli utenti.
Utilizzare una dimensione personalizzata della memoria del dispositivo
L'utilizzo delle dimensioni personalizzate in Google Analytics è una procedura in due passaggi.
- Configura la dimensione personalizzata in Google Analytics.
- Aggiorna il codice di monitoraggio impostandolo su
setil valore della memoria del dispositivo per la dimensione personalizzata appena creata.
Durante la creazione della dimensione personalizzata, assegnale il nome "Memoria dispositivo" e scegli un ambito di "sessione", poiché il valore non cambia nel corso della sessione di navigazione dell'utente:
Successivamente, aggiorna il codice di monitoraggio. Ecco un esempio di come potrebbe presentarsi. Tieni presente che per i browser che non supportano l'API Device Memory, il valore della dimensione sarà "(not set)".
// Create the tracker from your tracking ID.
// Replace "UA-XXXXX-Y" with your Google Analytics tracking ID.
ga('create', 'UA-XXXXX-Y', 'auto');
// Set the device memory value as a custom dimension on the tracker.
// This will ensure it gets sent with all future data to Google Analytics.
// Note: replace "XX" with the index of the custom dimension you created
// in the Google Analytics admin.
ga('set', 'dimensionXX', navigator.deviceMemory || '(not set)');
// Do any other other custom setup you want...
// Send the initial pageview.
ga('send', 'pageview');
Report sui dati di memoria del dispositivo
Quando la dimensione della memoria del dispositivo si trova
set sull'oggetto
tracker, tutti i dati inviati a Google Analytics includeranno questo valore.
In questo modo potrai suddividere qualsiasi metrica di tuo interesse (ad es. tempi di caricamento della pagina, percentuale di completamento degli obiettivi e così via) per memoria del dispositivo e vedere se ci sono correlazioni.
Poiché la memoria del dispositivo è una dimensione personalizzata anziché integrata, non la vedrai nei report standard. Per accedere a questi dati, devi creare un report personalizzato. Ad esempio, la configurazione di un report personalizzato che confronta i tempi di caricamento in base alla memoria del dispositivo potrebbe avere il seguente aspetto:
Il report che genera potrebbe avere il seguente aspetto:
Dopo aver raccolto i dati della memoria del dispositivo e avere una base di riferimento per l'esperienza degli utenti in tutti gli intervalli dello spettro della memoria, puoi sperimentare la pubblicazione di risorse diverse per utenti diversi (utilizzando le tecniche descritte nella sezione precedente). Successivamente, potrai osservare i risultati e vedere se sono migliorati.
In sintesi
Questo post illustra come utilizzare l'API Device Memory per personalizzare l'applicazione in base alle funzionalità dei dispositivi degli utenti e spiega come misurare l'esperienza di questi utenti con la tua app.
Anche se questo post è incentrato sull'API Device Memory, la maggior parte delle tecniche descritte qui potrebbe essere applicata a qualsiasi API che segnali le funzionalità del dispositivo o le condizioni di rete.
Con l'espansione del panorama dei dispositivi, è più importante che mai che gli sviluppatori web prendano in considerazione l'intero spettro di utenti quando prendono decisioni che influiranno sulla loro esperienza.