A gama de recursos de dispositivos que podem se conectar à Web é maior hoje em dia do que nunca. O mesmo aplicativo da Web usado em um sistema também pode ser veiculado para celulares, relógios ou tablets de baixa potência, e pode ser muito desafiador criar experiências envolventes que funcionem com facilidade em qualquer dispositivo.
A API Device Memory é uma nova versão da Web
recurso de plataforma destinado a ajudar os desenvolvedores Web a lidar com o dispositivo moderno
cenário. Ela adiciona uma propriedade somente leitura ao objeto navigator.
navigator.deviceMemory, que retorna a quantidade de RAM no dispositivo
gigabytes, arredondado para a potência de dois mais próxima. A API também apresenta
Cabeçalho de dicas do cliente,
Device-Memory, que informa o mesmo valor.
A API Device Memory oferece aos desenvolvedores a capacidade de fazer duas coisas principais:
- Tomar decisões de tempo de execução sobre quais recursos exibir com base nos resultados valor da memória do dispositivo (por exemplo, exibir uma versão "lite" de um aplicativo para os usuários em e dispositivos com pouca memória).
- Informe esse valor a um serviço de análise para entender melhor como a memória do dispositivo se correlaciona com o comportamento do usuário, conversões ou outras métricas importante para sua empresa.
Personalização dinâmica de conteúdo com base na memória do dispositivo
Se você estiver executando seu próprio servidor da Web e puder modificar a lógica que
exibe recursos, você pode responder condicionalmente a solicitações que contenham os
Device-Memory Cabeçalho de dicas do cliente.
GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*
Com essa técnica, é possível criar uma ou mais versões do seu aplicativo
scripts e responder condicionalmente às solicitações do cliente com base nos
definido no cabeçalho Device-Memory. Essas versões não precisam conter
códigos completamente diferentes (porque são mais difíceis de manter). Na maioria das vezes,
"leve" versão exclui apenas recursos que podem ser caros e não essenciais
na experiência do usuário.
Como usar o cabeçalho de dicas do cliente
Para ativar o cabeçalho Device-Memory, adicione a tag <meta> das dicas do cliente
ao <head> do seu documento:
<meta http-equiv="Accept-CH" content="Device-Memory">
Ou inclua "Memória do dispositivo" nos cabeçalhos de resposta Accept-CH do servidor:
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
Isso informa ao navegador para enviar o cabeçalho Device-Memory com todos os sub-recursos.
para a página atual.
Em outras palavras, depois de implementar uma das opções acima para seus
se um usuário acessar o site em um dispositivo com 0,5 GB de RAM, todos os elementos de imagem, CSS e
As solicitações JavaScript desta página vão incluir o cabeçalho Device-Memory com
o valor definido como "0.5", e seu servidor pode responder a essas solicitações, independentemente
mais adequado.
Por exemplo, a rota Express a seguir atende uma
"leve" de um script se o cabeçalho Device-Memory estiver definido e o valor for
menos de 1, ou exibe "cheio" versão se o navegador não for compatível com a
cabeçalho Device-Memory ou o valor for 1 ou maior:
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`);
});
Como usar a API JavaScript
Em alguns casos (como em um servidor de arquivos estático ou um CDN), você não vai conseguir responder condicionalmente a solicitações com base em um cabeçalho HTTP. Nesses casos, pode usar a API JavaScript para fazer solicitações condicionais em seu código JavaScript.
A lógica a seguir é semelhante à rota expressa acima, mas ela determina o URL do script na lógica do lado do cliente:
// 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();
Ao exibir condicionalmente versões diferentes do mesmo componente com base no recursos do dispositivo é uma boa estratégia, mas às vezes pode ser ainda melhor não exibir um componente.
Em muitos casos, os componentes são meramente melhorias. Eles dão alguns toques legais mas não são necessários para a funcionalidade principal do app. Em nesses casos, é recomendável não carregar esses componentes. Se um componente destinado a melhorar a experiência do usuário deixar o app lento ou não responde, ele não está atingindo a meta.
Qualquer decisão tomada que afete a experiência do usuário é essencial que você medir seu impacto. Também é essencial que você tenha uma imagem clara de como seus do aplicativo funciona hoje.
Entenda como a memória do dispositivo se relaciona com o comportamento do usuário para o versão do seu app vai informar melhor qual ação precisa ser tomada fornecem uma linha de base com a qual você pode medir o sucesso de mudanças futuras.
Como rastrear a memória do dispositivo com análises
A API Device Memory é nova, e a maioria dos provedores de análise não a rastreia. por padrão. Felizmente, a maioria dos provedores de análise oferece uma maneira de rastrear dados (por exemplo, o Google Analytics tem um recurso chamado Dimensões personalizadas), que você pode usar para rastrear a memória do dispositivo para os dados dispositivos.
Usar uma dimensão personalizada de memória do dispositivo
O uso de dimensões personalizadas no Google Analytics é um processo de duas etapas.
- Configure a dimensão personalizada no Google Analytics.
- Atualize seu código de acompanhamento para
seto valor da memória do dispositivo para a dimensão personalizada que você acabou de criar.
Ao criar a dimensão personalizada, dê a ela o nome "Memória do dispositivo". e escolha o escopo de "sessão" já que o valor não mudará durante a sessão de navegação de um usuário:
Em seguida, atualize seu código de acompanhamento. Aqui está um exemplo de como pode ser. Para navegadores não compatíveis com a API Device Memory, a dimensão o valor será "(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');
Geração de relatórios sobre dados de memória do dispositivo
Quando a dimensão da memória do dispositivo
set no
objeto de acompanhamento, todos os dados que você enviar ao Google Analytics incluirão esse valor.
Isso permite que você detalhe as métricas desejadas (por exemplo, tempos de carregamento da página, taxa de conclusão da meta etc.) por dispositivo.
na memória para ver se há correlações.
Como a memória do dispositivo é uma dimensão personalizada, e não integrada, você ele não vai aparecer nos relatórios padrão. Para acessar esses dados, você terá que criar um relatório personalizado. Por exemplo, a configuração de um relatório personalizado que compara os tempos de carregamento da memória do dispositivo pode ser assim:
O relatório gerado pode ter esta aparência:
Ao coletar dados de memória do dispositivo e ter um valor de referência de como os usuários testar seu aplicativo em todas as faixas do espectro de memória, será possível testar a disponibilização de diferentes recursos para diferentes usuários (usando o descritas na seção acima). Depois, você poderá olhar para os resultados e ver se melhoraram.
Conclusão
Esta postagem descreve como usar a API Device Memory para personalizar seu aplicativo dos recursos dos usuários dispositivos e mostra como medir o quanto esses usuários interagem com seu app.
Embora o foco desta postagem seja a API Device Memory, a maioria das técnicas descritas aqui podem ser aplicadas a qualquer API que informe os recursos ou condições da rede.
À medida que o cenário dos dispositivos continua a ampliar, é mais importante do que nunca que os desenvolvedores web levam todo o espectro de usuários ao tomar decisões que afetar a experiência deles.