No hay nada peor que cuando se cocina con un dispositivo móvil que la pantalla que se apaga en medio de un paso de la receta. Descubre cómo el sitio de cocina BettyCrocker.com usó la API de Wake Lock para evitar que esto suceda.
Las apps para iOS y Android descontinuadas
Betty Crocker se lanzó recientemente para fantasía en 2014 y, recientemente, sacó sus apps de la App Store de Apple y de Google Play Store, cuando ya no se las había priorizado. Durante mucho tiempo, el equipo de Betty Crocker prefirió agregar funciones nuevas al sitio móvil en lugar de las apps para iOS/Android. La plataforma técnica en la que se crearon las apps para iOS y Android estaba desactualizada, y la empresa no tenía los recursos para admitir la actualización y el mantenimiento de las apps en el futuro. La app web también era objetivamente más grande en cuanto al tráfico, más moderna y más fácil de mejorar.
Sin embargo, las apps para iOS y Android tenían una función excelente que les encantaba a los usuarios:
Sugerencia profesional para la cocina millennial: la app para dispositivos móviles @BettyCrocker no se atenúa ni se bloquea cuando sigues una receta. @AvaBeilke
El 80% de las personas cocinan con un dispositivo en la cocina, pero la atenuación y el bloqueo de la pantalla son un problema. ¿Qué hizo @BettyCrocker? Se actualizó la app para que NO se atenúe cuando los usuarios estén en una receta. —@KatieTweedy
Cómo llevar la función exitosa a la Web con la API de Wake Lock
Cuando cocinas con un dispositivo, no hay nada más frustrante que tener que tocar la pantalla con las manos sucias o incluso la nariz cuando se apaga. Betty Crocker se preguntó cómo podía transferir la mejor función de sus apps para iOS/Android a la app web. Fue cuando conoció Project Fugu y la API de Wake Lock.
La API de Wake Lock proporciona una manera de evitar que el dispositivo atenúe o bloquee la pantalla. Esta función habilita nuevas experiencias que, hasta ahora, requerían una app para iOS/Android. La API de Wake Lock reduce la necesidad de soluciones alternativas ingeniosas y que podrían consumir mucha energía.
Cómo solicitar un bloqueo de activación
Para solicitar un bloqueo de activación, debes llamar al método navigator.wakeLock.request() que muestra un objeto WakeLockSentinel. Usarás este objeto como valor centinela.
El navegador puede rechazar la solicitud por varios motivos (por ejemplo, porque el nivel de batería es demasiado bajo), por lo que se recomienda unir la llamada en una declaración try…catch.
Cómo liberar un bloqueo de activación
También necesitas una forma de liberar un bloqueo de activación, que se logra llamando al método release() del objeto WakeLockSentinel.
Si quieres liberar automáticamente el bloqueo de activación después de un período determinado, puedes usar window.setTimeout() para llamar a release(), como se muestra en el siguiente ejemplo.
// 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);
La implementación
Con la nueva app web, los usuarios deberían poder navegar fácilmente por una receta, completar pasos o incluso salir sin el bloqueo de pantalla. Para lograr este objetivo, el equipo primero creó un prototipo de frontend rápido como prueba de concepto y para recopilar información sobre la UX.
Cuando el prototipo demostró ser útil, diseñó un componente Vue.js que podía compartirse con todas sus marcas (BettyCrocker, Pillsbury y Tablespoon). Aunque solo Betty Crocker tenía apps para iOS y Android, los tres sitios tienen una base de código compartida, por lo que pudieron implementar el componente una vez y en todas partes, como se muestra en las siguientes capturas de pantalla.
Cuando se desarrollaba el componente basado en el framework modernizado del sitio nuevo, se enfocaba mucho en la capa ViewModel del patrón de MVVM.
El equipo también realizó la programación teniendo en cuenta la interoperabilidad para habilitar la funcionalidad en frameworks nuevos y heredados del sitio.
Para realizar un seguimiento de la visibilidad y la usabilidad, Betty Crocker integró el seguimiento de estadísticas de eventos principales en el ciclo de vida del bloqueo de activación. El equipo utilizó la administración de funciones para implementar el componente de bloqueo de activación en un solo sitio para el lanzamiento inicial en producción y, luego, implementó la función en el resto de los sitios después de supervisar el uso y el estado de la página. Continúa supervisando los datos de estadísticas según el uso de este componente.
Como un mecanismo de seguridad para los usuarios, el equipo creó un tiempo de espera forzado con el fin de inhabilitar el bloqueo de activación después de una hora de inactividad. La implementación final que definieron fue, a corto plazo, un interruptor de activación en todas las páginas de recetas de sus sitios. A largo plazo, imagina una vista de página de recetas renovada.
El contenedor de bloqueo de activación
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');
}
},
},
};
El componente de bloqueo de activación
<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
El componente Vue.js se implementó en los tres sitios y proporcionó excelentes resultados. Durante el período del 10 de diciembre de 2019 al 10 de enero de 2020, BettyCrocker.com informó las siguientes métricas:
- De todos los usuarios de Betty Crocker que tienen un navegador compatible con la API de Wake Lock, el 3.5% habilitó la función de inmediato, lo que la convierte en una de las 5 acciones principales.
- La duración de la sesión para los usuarios que habilitaron el bloqueo de activación fue 3.1 veces mayor que para los usuarios que no lo hicieron.
- El porcentaje de rebote de los usuarios que habilitaron el bloqueo de activación fue un 50% más bajo que el de aquellos que no la usaron.
- Los indicadores de intención de compra fueron aproximadamente un 300% más altos para los usuarios de bloqueos de activación en comparación con todos los usuarios.
3.1×
Mayor duración de la sesión
El 50%
Porcentaje de rebote más bajo
El 300%
Indicadores de intención de compra más altos
Conclusiones
Betty Crocker obtuvo resultados increíbles con la API de Wake Lock. Para probar la función, busca tu receta favorita en cualquiera de sus sitios (BettyCrocker, Pillsbury o Tablespoon) y habilita el botón de activación Evita que la pantalla se oscurezca mientras cocinas.
Los casos de uso de los bloqueos de activación no se limitan en los sitios de recetas. Otros ejemplos son las apps de tarjetas de embarque o entradas que deben mantener la pantalla encendida hasta que se haya escaneado el código de barras, las apps de estilo kiosco que mantienen la pantalla encendida continuamente o las apps de presentación basadas en la Web que evitan que la pantalla se suspenda durante una presentación.
En este sitio, recopilamos todo lo que necesitas saber sobre la API de Wake Lock. ¡Feliz lectura y feliz cocina!
Agradecimientos
Foto de la persona amasando cortesía de Julian Hochgesang en Unsplash.