Durante casi un siglo, Betty Crocker ha sido la fuente de instrucciones de cocina moderna y el desarrollo de recetas confiables en Estados Unidos. Lanzado en 1997, su sitio BettyCrocker.com recibe hoy más de 12 millones de visitantes por mes. Después de implementar la API de Wake Lock, sus indicadores de intención de compra fueron aproximadamente un 300% más altos para los usuarios de Wake Lock en comparación con todos los usuarios.
Las apps para iOS y Android que se retiraron
Lanzadas con gran entusiasmo en 2014, las apps de Betty Crocker se quitaron recientemente de Apple App Store y Google Play Store después de que se les quitó prioridad. Durante mucho tiempo, el equipo de Betty Crocker prefirió agregar funciones nuevas al sitio para dispositivos móviles en lugar de a las apps para iOS y 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 actualizar y mantener las apps en el futuro. Además, la app web tenía objetivamente mucho más tráfico, era más moderna y más fácil de mejorar.
Sin embargo, las apps para iOS y Android tenían una función estrella que encantaba a los usuarios:
Truco de cocina para millennials: La app para dispositivos móviles @BettyCrocker no se atenúa ni se bloquea cuando sigues una receta. —@AvaBeilke
El 80% de las personas cocina con un dispositivo en la cocina, pero el bloqueo y la atenuación de la pantalla son un problema. ¿Qué hizo @BettyCrocker? Actualizó su app para que NO se atenúe cuando los usuarios están en una receta. —@KatieTweedy
Cómo llevar la función estrella 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 con la nariz cuando se apaga. Betty Crocker se preguntó cómo podía portar la función estrella de sus apps para iOS y Android a la app web. Fue entonces cuando descubrió Project Fugu y la API de Wake Lock.
La API de Wake Lock proporciona una forma de evitar que el dispositivo atenúe o bloquee la pantalla. Esta capacidad permite nuevas experiencias que, hasta ahora, requerían una app para iOS o Android. La API de Wake Lock reduce la necesidad de soluciones alternativas poco prácticas y que consumen 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 devuelve un objeto WakeLockSentinel. Usarás este objeto como un valor centinela.
El navegador puede rechazar la solicitud por varios motivos (por ejemplo, porque la batería está demasiado baja), por lo que es una buena práctica incluir la llamada en una instrucción try…catch.
Cómo liberar un bloqueo de activación
También necesitas una forma de liberar un bloqueo de activación, lo 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 los pasos y hasta alejarse sin que se bloquee la pantalla. Para lograr este objetivo, el equipo primero creó un prototipo de frontend rápido como prueba de concepto y para recopilar comentarios sobre la UX.
Después de que el prototipo demostró ser útil, diseñaron un componente de Vue.js que se podía compartir entre 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, luego, implementarlo en todas partes, como se muestra en las siguientes capturas de pantalla.
Cuando se desarrolló el componente basado en el marco modernizado del sitio nuevo, se hizo un gran hincapié en la capa ViewModel del patrón MVVM.
El equipo también programó teniendo en cuenta la interoperabilidad para habilitar la funcionalidad en los frameworks heredados y nuevos del sitio.
Para hacer un seguimiento de la visibilidad y la usabilidad, Betty Crocker integró el seguimiento de análisis para los 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 de 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. Siguen supervisando los datos de análisis en función del uso de este componente.
Como medida de seguridad para los usuarios, el equipo creó un tiempo de espera forzado para inhabilitar el bloqueo de activación después de una hora de inactividad. La implementación final que acordaron fue, a corto plazo, un botón de activación en todas las páginas de recetas de sus sitios. A largo plazo, prevén 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 de Vue.js se implementó en los tres sitios y generó excelentes resultados. Durante el período comprendido entre el 10 de diciembre de 2019 y el 10 de enero de 2020, BettyCrocker.com informó las siguientes métricas:
- De todos los usuarios de Betty Crocker con un navegador compatible con la API de Wake Lock, el 3.5% habilitó la función de inmediato, lo que la convirtió 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.
- La tasa de rebote de los usuarios que habilitaron el bloqueo de activación fue un 50% más baja que la de los que no usaron la función de bloqueo de activación.
- Los indicadores de intención de compra fueron aproximadamente un 300% más altos para los usuarios de bloqueo de activación en comparación con todos los usuarios.
3.1×
Mayor duración de la sesión
50%
Menor porcentaje de rebote
300%
Indicadores de mayor intención de compra
Conclusiones
Betty Crocker ha obtenido resultados fantásticos con la API de Wake Lock. Puedes probar la función tú mismo buscando tu receta favorita en cualquiera de sus sitios (BettyCrocker, Pillsbury o Tablespoon) y habilitando 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 a los sitios de recetas. Otros ejemplos son las apps de boletos o pases de abordar que necesitan mantener la pantalla encendida hasta que se escanee el código de barras, las apps de estilo quiosco que mantienen la pantalla encendida de forma continua o las apps de presentación basadas en la Web que evitan que la pantalla entre en modo de suspensión durante una presentación.
Hemos recopilado todo lo que necesitas saber sobre la API de Wake Lock en un artículo completo en este mismo sitio. ¡Disfruta la lectura y la cocina!