Oggi la gamma di funzionalità dei dispositivi in grado di connettersi al web è più ampia che in passato. La stessa applicazione web pubblicata per un computer desktop possono essere pubblicati su telefoni, orologi o tablet a basso consumo, e può essere estremamente difficile creare esperienze avvincenti che funzionino agevolmente su qualsiasi dispositivo.
L'API Device Memory è una nuova
funzionalità della piattaforma con lo scopo di aiutare gli sviluppatori web ad affrontare i dispositivi moderni
in un paesaggio. Aggiunge una proprietà di sola lettura all'oggetto navigator,
navigator.deviceMemory, che restituisce la quantità di RAM occupata dal dispositivo
gigabyte, arrotondati per difetto alla potenza più vicina a due. L'API include anche
Intestazione dei client hint,
Device-Memory, che riporta lo stesso valore.
L'API Device Memory offre agli sviluppatori la possibilità di eseguire due operazioni principali:
- Prendi decisioni di runtime sulle risorse da pubblicare in base ai valore di memoria del dispositivo (ad es. pubblica una versione "lite" di un'app per gli utenti su dispositivi con poca memoria).
- Segnala questo valore a un servizio di analisi per capire meglio come La memoria del dispositivo è correlata al comportamento degli utenti, alle conversioni o ad 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
le risorse, puoi rispondere in modo condizionale alle richieste che contengono
Device-Memory Intestazione dei client hint.
GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*
Con questa tecnica, puoi creare una o più versioni della tua applicazione
gli script e rispondere alle richieste del client in modo condizionale in base al
impostato nell'intestazione Device-Memory. Queste versioni non devono contenere
completamente diverso (perché è più difficile da mantenere). La maggior parte delle volte
"lite" la versione escluderà solo le funzionalità che possono essere costose e non critiche
all'esperienza utente.
Utilizzo dell'intestazione Client Hints
Per attivare l'intestazione Device-Memory, aggiungi il tag <meta> dei client hint
alla <head> del documento:
<meta http-equiv="Accept-CH" content="Device-Memory">
Oppure includi "Memoria dispositivo" nelle intestazioni di 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 risorse secondarie
richieste per la pagina corrente.
In altre parole, una volta implementata una delle opzioni sopra indicate per il tuo
sul sito web, se un utente visita un dispositivo con 0, 5 GB di RAM, vengono visualizzate tutte le immagini, i file CSS
Le richieste JavaScript da questa pagina includeranno l'intestazione Device-Memory con
il valore impostato su "0.5" e il server potrà rispondere a queste richieste
che tu ritenga opportuno.
Ad esempio, la seguente route Espressa serve una
"lite" di uno script se l'intestazione Device-Memory è impostata e il suo valore è
meno di 1 o serve una se il browser non supporta
Intestazione Device-Memory o il valore è 1 o maggiore:
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, ad esempio con un file server statico o una rete CDN, non potrai rispondere in modo condizionale alle richieste in base a un'intestazione HTTP. In questi casi puoi usare l'API JavaScript per effettuare richieste condizionali nel tuo codice JavaScript.
La seguente logica è simile alla route Express indicata sopra, con l'eccezione che è dinamica determina 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();
Pubblicando versioni diverse dello stesso componente in modo condizionale in base a le funzionalità del dispositivo è una buona strategia, a volte può essere ancora meglio non pubblicare un componente.
In molti casi, i componenti sono puramente miglioramenti. Aggiungono un tocco di originalità a l'esperienza, ma non sono necessarie per la funzionalità di base dell'app. Nella in questi casi potrebbe essere opportuno non caricare tali componenti. Se un componente destinato a migliorare l'esperienza utente rende l'app lenta o non reagisce, non sta raggiungendo il suo obiettivo.
Qualsiasi decisione presa che influenza l'esperienza utente è fondamentale a misurarne l'impatto. È fondamentale anche avere un quadro chiaro di come attualmente in uso.
Comprendere in che modo la memoria del dispositivo è correlata al comportamento dell'utente per il periodo attuale dell'app per sapere meglio quale azione è necessario intraprendere e forniscono una base di riferimento per 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 dati e analisi offre la possibilità di monitorare dati (ad esempio, in Google Analytics è disponibile la funzionalità Dimensioni personalizzate), che puoi per tenere traccia della memoria del dispositivo per gli utenti dispositivi mobili.
Utilizzare una dimensione di memoria del dispositivo personalizzata
L'utilizzo delle dimensioni personalizzate in Google Analytics è un processo in due passaggi.
- Configura la dimensione personalizzata in Google Analytics.
- Aggiorna il codice di monitoraggio a
setil valore della memoria del dispositivo per la dimensione personalizzata appena creata.
Quando crei la 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 essere. Tieni presente che per i browser che non supportano l'API Device Memory, la 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
Una volta che la dimensione Memoria del dispositivo
set il
tracker, tutti i dati inviati a Google Analytics includeranno questo valore.
In questo modo potrai suddividere qualsiasi metrica desiderata (ad es. tempi di caricamento della pagina, percentuale di completamento dell'obiettivo e così via) in base al dispositivo
per vedere se ci sono correlazioni.
Poiché la memoria del dispositivo è una dimensione personalizzata anziché integrata, non verrà visualizzato in nessuno dei report standard. Per accedere a questi dati, devi crea un report personalizzato. Ad esempio, la configurazione di un report personalizzato che confronta i tempi di caricamento la memoria del dispositivo potrebbe avere il seguente aspetto:
Il report che genera potrebbe essere simile al seguente:
Dopo aver raccolto i dati sulla memoria del dispositivo e avere una base di riferimento per il modo in cui gli utenti sono la tua applicazione in tutti gli intervalli dello spettro di memoria, puoi provare a offrire risorse diverse a utenti diversi (utilizzando tecniche descritte nella sezione precedente). Dopodiché potrai osservare i risultati e vedere se sono migliorati.
In sintesi
Questo post descrive come utilizzare l'API Device Memory per personalizzare la tua applicazione le capacità dei tuoi utenti dispositivi e mostra come misurare come a questi utenti l'esperienza della tua app.
Questo post si concentra sull'API Device Memory, ma gran parte delle tecniche qui descritti può essere applicata a qualsiasi API che segnala le funzionalità del dispositivo o condizioni di rete.
Man mano che il panorama dei dispositivi continua ad espandersi, è più importante che mai gli sviluppatori web prendono in considerazione l'intero spettro di utenti quando prendono decisioni ne influenzano l'esperienza.