Há quase um século, a Betty Crocker é a fonte de instruções de culinária moderna e desenvolvimento de receitas confiáveis nos EUA. Lançado em 1997, o site BettyCrocker.com recebe mais de 12 milhões de visitantes por mês. Depois que eles implementaram a API Wake Lock, os indicadores de intenção de compra foram cerca de 300% maiores para usuários do Wake Lock em comparação com todos os usuários.
Os apps desativados para iOS e Android
Lançado com muita repercussão em 2014, o app da Betty Crocker foi removido recentemente da Apple App Store e da Google Play Store depois de perder prioridade. Por muito tempo, a equipe da Betty Crocker preferiu adicionar novos recursos ao site para dispositivos móveis em vez dos apps para iOS/Android. A plataforma técnica em que os apps iOS/Android foram criados estava desatualizada, e a empresa não tinha recursos para atualizar e manter os apps no futuro. O web app também era objetivamente muito maior em termos de tráfego, mais moderno e mais fácil de melhorar.
No entanto, os apps para iOS/Android tinham um recurso incrível que os usuários adoravam:
Dica de culinária para millennials: o app para dispositivos móveis @BettyCrocker não escurece nem bloqueia quando você está seguindo uma receita. —@AvaBeilke
80% das pessoas cozinham com um dispositivo na cozinha, mas o escurecimento e o bloqueio da tela são um problema. O que @BettyCrocker fez? Atualizaram o app para NÃO diminuir a tela quando os usuários estão em uma receita. —@KatieTweedy
Como trazer 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 sujas ou até mesmo com o nariz quando ela desliga. A Betty Crocker se perguntou como poderia transferir o recurso incrível dos apps iOS/Android para o web app. Foi quando eles conheceram o Projeto Fugu e a API Wake Lock.
A API Wake Lock oferece uma maneira de impedir que o dispositivo escureça ou bloqueie a tela. Essa capacidade permite novas experiências que, até agora, exigiam um app iOS/Android. A API Wake Lock reduz a necessidade de soluções alternativas complicadas e potencialmente consumidoras de energia.
Solicitar um wake lock
Para solicitar um bloqueio de despertar, chame o método navigator.wakeLock.request()
que retorna um objeto WakeLockSentinel. Você vai usar esse objeto como um valor sentinela.
O navegador pode recusar a solicitação por vários motivos
(por exemplo, porque a bateria está muito baixa).
Por isso, é recomendável incluir a chamada em uma instrução try…catch.
Como liberar um wake lock
Você também precisa de uma maneira de liberar um bloqueio de despertar, o que é feito chamando o método release() do objeto WakeLockSentinel.
Se você quiser liberar automaticamente o bloqueio de despertar após um determinado período,
use 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 web app, os usuários podem navegar facilmente por uma receita, concluir etapas e até sair sem que a tela seja bloqueada. Para alcançar essa meta, a equipe primeiro criou um protótipo rápido de front-end 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 em todas as marcas (BettyCrocker, Pillsbury e Tablespoon). Embora apenas a Betty Crocker tivesse apps para iOS e Android, os três sites têm uma base de código compartilhada. Assim, eles puderam 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 na estrutura modernizada do novo site,
o foco principal foi na
camada ViewModel do padrão MVVM.
A equipe também programou com 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álises para eventos principais no ciclo de vida do wake lock. A equipe usou o gerenciamento de recursos para implantar o componente de bloqueio de ativação em um único site para o lançamento inicial da produção e, em seguida, implantou o recurso no restante dos sites após monitorar o uso e a integridade da página. Eles continuam monitorando os dados de análise com base no uso desse componente.
Como proteção 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 escolheram foi um botão de alternância de curto prazo em todas as páginas de receitas nos sites. A longo prazo, eles imaginam uma visualização de página de receita reformulada.
O contêiner de 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 de 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 em todos os três sites e gerou ótimos resultados. No período de 10 de dezembro de 2019 a 10 de janeiro de 2020, o site BettyCrocker.com informou as seguintes métricas:
- De todos os usuários da Betty Crocker com um navegador compatível com a API Wake Lock, 3,5% ativaram o recurso imediatamente, o que o tornou uma das cinco principais ações.
- A duração da sessão para usuários que ativaram o bloqueio de despertar foi 3,1 vezes maior do que para usuários que não ativaram.
- A taxa de rejeição para usuários que ativaram o bloqueio de despertar foi 50% menor do que para aqueles que não usaram o recurso.
- Os indicadores de intenção de compra foram cerca de 300% maiores para usuários de bloqueio de despertar em comparação com todos os usuários.
3,1×
Maior duração da sessão
50%
Reduzir a taxa de rejeição
300%
Indicadores de maior intenção de compra
Conclusões
A Betty Crocker teve resultados fantásticos usando a API Wake Lock. Para testar o recurso, pesquise sua receita favorita em qualquer um dos sites (BettyCrocker, Pillsbury ou Tablespoon) e ative a opção Impedir que a tela fique escura enquanto você cozinha.
Os casos de uso de bloqueios de despertar não se limitam a sites de receitas. Outros exemplos são apps de cartão de embarque ou de ingressos que precisam manter a tela ativada até que o código de barras seja digitalizado, apps de estilo quiosque que mantêm a tela ativada continuamente ou apps de apresentação baseados na Web que impedem que a tela entre em modo de espera durante uma apresentação.
Reunimos tudo o que você precisa saber sobre a API Wake Lock em um artigo abrangente neste site. Boa leitura e boa cozinha!