Nada é pior ao cozinhar com um dispositivo móvel do que a tela apagar no meio de uma etapa de uma receita. Saiba como o site de culinária BettyCrocker.com usou a API Wake Lock para evitar que isso acontecesse.
Os apps iOS e Android desativados
Lançado para muito fãs em 2014, Betty Crocker recentemente removeu os apps da Apple App Store e da Google Play Store depois que a prioridade deles foi reduzida. Por muito tempo, a equipe da Betty Crocker preferiu adicionar novos recursos ao site para dispositivos móveis em vez dos apps iOS/Android. A plataforma técnica em que os apps iOS/Android foram criados estava desatualizada, e a empresa não tinha os recursos para dar suporte à atualização e à manutenção dos apps. O app da Web também era, objetivamente, muito maior em termos de tráfego, mais moderno e mais fácil de melhorar.
No entanto, os apps iOS/Android tinham um recurso assassino que os usuários adoravam:
Dica profissional de culinária do Millennial: o app para dispositivos móveis @BettyCrocker não escurece nem fica bloqueado quando você segue uma receita. —@AvaBeilke
80% das pessoas cozinham com um dispositivo na cozinha, mas o escurecimento e bloqueio da tela são um problema. O que @BettyCrocker fez? O app foi atualizado para NÃO escurecer quando os usuários estiverem em uma receita. —@KatieTweedy
Levando o recurso incrível para a Web com a API Wake Lock
Ao cozinhar com um dispositivo, não há nada mais frustrante do que ter que tocar na tela com as mãos bagunçadas ou até mesmo com o nariz quando a tela apagar. Betty Crocker perguntou como poderia transferir o recurso assassino dos apps iOS/Android para o app da Web. Foi quando eles aprenderam sobre o Project Fugu e a API Wake Lock.
A API Wake Lock oferece uma maneira de impedir que o dispositivo esmaeça ou bloqueie a tela. Esse recurso permite novas experiências que, até agora, exigiam um app iOS/Android. A API Wake Lock reduz a necessidade de soluções alternativas que, até agora, exigem muita energia.
Como solicitar um wake lock
Para solicitar um wake lock, você precisa chamar o método navigator.wakeLock.request(),
que retorna um objeto WakeLockSentinel. Você usará esse objeto como um valor de sentinela.
O navegador pode recusar a solicitação por vários motivos,
por exemplo, porque a bateria está muito fraca.
Por isso, é recomendável unir a chamada em uma instrução try…catch.
Liberar um wake lock
Você também precisa de uma maneira de liberar um wake lock,
o que é possível chamando o método release() do objeto WakeLockSentinel.
Se você quiser liberar automaticamente o wake lock após um determinado período,
poderá usar window.setTimeout() para chamar release(), conforme mostrado no exemplo abaixo.
// The wake lock sentinel.
let wakeLock = null;
// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released');
});
console.log('Wake Lock is active');
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
};
// Request a wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
wakeLock.release();
wakeLock = null;
}, 5000);
A implementação
Com o novo app da Web, os usuários podem navegar facilmente por uma receita, concluir etapas e até mesmo sair sem o bloqueio de tela. Para alcançar esse objetivo, a equipe primeiro construiu um protótipo de front-end rápido como prova de conceito e para coletar informações de UX.
Depois que o protótipo se mostrou útil, eles projetaram um componente Vue.js que poderia ser compartilhado entre todas as marcas (BettyCrocker, Pillsbury e Tablespoon). Embora apenas a Betty Crocker tivesse apps para iOS e Android, os três sites tinham uma base de código compartilhada. Assim, foi possível implementar o componente uma vez e implantá-lo em todos os lugares, como mostrado nas capturas de tela abaixo.
Ao desenvolver o componente com base no framework modernizado do novo site,
houve um foco forte na
camada ViewModel do padrão MVVM.
A equipe também programou a interoperabilidade em mente para ativar a funcionalidade em frameworks legados e novos do site.
Para acompanhar a visibilidade e a usabilidade, a Betty Crocker integrou o rastreamento de análise para eventos principais no ciclo de vida do wake lock. A equipe usou o gerenciamento de recursos para implantar o componente de wake lock em um único local para o lançamento inicial de produção e, em seguida, implantou o recurso no restante dos sites após monitorar o uso e a integridade da página. Ele continua monitorando os dados de análise com base no uso desse componente.
Como uma segurança para os usuários, a equipe criou um tempo limite forçado para desativar o wake lock após uma hora de inatividade. A implementação final que eles definiram foi uma chave de ativação de curto prazo em todas as páginas de receitas dos sites. No longo prazo, eles imaginam uma nova visualização da página de receitas.
O contêiner do wake lock
var wakeLockControl = () => {
return import(/* webpackChunkName: 'wakeLock' */ './wakeLock');
};
export default {
components: {
wakeLockControl: wakeLockControl,
},
data() {
return {
config: {},
wakeLockComponent: '',
};
},
methods: {
init: function(config) {
this.config = config || {};
if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
this.wakeLockComponent = 'wakeLockControl';
} else {
console.log('Browser not supported');
}
},
},
};
O componente do wake lock
<template>
<div class="wakeLock">
<div class="textAbove"></div>
<label class="switch" :aria-label="settingsInternal.textAbove">
<input type="checkbox" @change="onChange()" v-model="isChecked">
<span class="slider round"></span>
</label>
</div>
</template>
<script type="text/javascript">
import debounce from 'lodash.debounce';
const scrollDebounceMs = 1000;
export default {
props: {
settings: { type: Object },
},
data() {
return {
settingsInternal: this.settings || {},
isChecked: false,
wakeLock: null,
timerId: 0,
};
},
created() {
this.$_raiseAnalyticsEvent('Wake Lock Toggle Available');
},
methods: {
onChange: function() {
if (this.isChecked) {
this.$_requestWakeLock();
} else {
this.$_releaseWakeLock();
}
},
$_requestWakeLock: async function() {
try {
this.wakeLock = await navigator.wakeLock.request('screen');
//Start new timer
this.$_handleAbortTimer();
//Only add event listeners after wake lock is successfully enabled
document.addEventListener(
'visibilitychange',
this.$_handleVisibilityChange,
);
window.addEventListener(
'scroll',
debounce(this.$_handleAbortTimer, scrollDebounceMs),
);
this.$_raiseAnalyticsEvent('Wake Lock Toggle Enabled');
} catch (e) {
this.isChecked = false;
}
},
$_releaseWakeLock: function() {
try {
this.wakeLock.release();
this.wakeLock = null;
//Clear timer
this.$_handleAbortTimer();
//Clean up event listeners
document.removeEventListener(
'visibilitychange',
this.$_handleVisibilityChange,
);
window.removeEventListener(
'scroll',
debounce(this.$_handleAbortTimer, scrollDebounceMs),
);
} catch (e) {
console.log(`Wake Lock Release Error: ${e.name}, ${e.message}`);
}
},
$_handleAbortTimer: function() {
//If there is an existing timer then clear it and set to zero
if (this.timerId !== 0) {
clearTimeout(this.timerId);
this.timerId = 0;
}
//Start new timer; Will be triggered from toggle enabled or scroll event
if (this.isChecked) {
this.timerId = setTimeout(
this.$_releaseWakeLock,
this.settingsInternal.timeoutDurationMs,
);
}
},
$_handleVisibilityChange: function() {
//Handle navigating away from page/tab
if (this.isChecked) {
this.$_releaseWakeLock();
this.isChecked = false;
}
},
$_raiseAnalyticsEvent: function(eventType) {
let eventParams = {
EventType: eventType,
Position: window.location.pathname || '',
};
Analytics.raiseEvent(eventParams);
},
},
};
</script>
Resultados
O componente Vue.js foi implantado nos três sites e forneceu ótimos resultados. Durante o período de 10 de dezembro de 2019 a 10 de janeiro de 2020, a BettyCrocker.com relatou as seguintes métricas:
- De todos os usuários da Betty Crocker com um navegador compatível com a API Wake Lock, 3,5% deles ativaram o recurso imediatamente, o que a torna uma das cinco principais ações.
- A duração da sessão para os usuários que ativaram o wake lock foi 3,1× maior do que a dos usuários que não o fizeram.
- A taxa de rejeição para usuários que ativaram o wake lock foi 50% menor do que para aqueles que não usavam o recurso de wake lock.
- Os indicadores de intenção de compra foram cerca de 300% maiores para os usuários de wake lock em comparação com todos os usuários.
3,1×
Sessão mais longa
50%
Menor taxa de rejeição
300%
Indicadores de maior intenção de compra
Conclusões
Betty Crocker teve resultados fantásticos usando a API Wake Lock. Para testar o recurso, pesquise sua receita favorita em qualquer um dos sites deles (BettyCrocker, Pillsbury ou Tablespoon) e ative a opção Evitar que a tela apague enquanto você cozinha.
Os casos de uso de wake locks não param em locais de receitas. Outros exemplos são apps de cartões de embarque ou de ingressos, que precisam manter a tela ativada até que o código de barras seja digitalizado. Apps em estilo quiosque, que mantêm a tela ligada continuamente, ou apps de apresentação baseados na Web que impedem a tela de entrar em suspensão durante uma apresentação.
Reunimos tudo o que você precisa saber sobre a API Wake Lock em um artigo abrangente neste mesmo site. Boa leitura e boa culinária!
Agradecimentos
A foto da pessoa sovando a massa foi cedida por Julian Hochgesang no Unsplash (links em inglês).