Nada es peor cuando se cocina con un dispositivo móvil que su pantalla se apaga en medio de un paso de receta. Descubra cómo el sitio de cocina BettyCrocker.com utilizó la API de Wake Lock para evitar que esto suceda.
Actualizado
Durante casi un siglo, Betty Crocker ha sido la fuente estadounidense de instrucción de cocina moderna y desarrollo de recetas confiables. Lanzado en 1997, su sitio BettyCrocker.com
hoy recibe más de 12 millones de visitantes al mes. Después de ellos implementó la API de Wake Lock, su
indicadores de
intento de compra
fueron aproximadamente un 300% más altos para los usuarios de wake lock en comparación con todos los usuarios.
Las aplicaciones retiradas de iOS y Android
Liberado a mucha fanfarria En 2014, Betty Crocker recientemente sacó sus aplicaciones de Apple App Store y Google Play Store después de haber sido despriorizadas. Durante mucho tiempo, el equipo de Betty Crocker ha preferido agregar nuevas funciones al sitio móvil en lugar de las aplicaciones de iOS / Android. La plataforma técnica en la que se crearon las aplicaciones de iOS / Android estaba desactualizada y la empresa no tenía los recursos para respaldar la actualización y el mantenimiento de las aplicaciones en el futuro. La aplicación web también era objetivamente mucho más grande en cuanto a tráfico, más moderna y más fácil de mejorar.
Las aplicaciones de iOS / Android tenían una característica asesina, sin embargo, que a sus usuarios les encantó:
Consejo profesional de cocina millennial: el @BettyCrocker La aplicación móvil no se atenúa ni se bloquea cuando sigue 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. Que hizo @BettyCrocker ¿hacer? Se actualizó su aplicación para que NO se atenúe cuando los usuarios estén en una receta. –@Katie_Tweedy_
Llevando la característica asesina a la web con la API de Wake Lock
Al cocinar con un dispositivo, no hay nada más frustrante que tener que tocar la pantalla con las manos sucias o incluso la nariz cuando la pantalla se apaga. Betty Crocker se preguntó cómo podían transferir la característica principal de sus aplicaciones iOS / Android a la aplicación web. Fue entonces cuando se enteraron de
Proyecto 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 aplicación iOS / Android. La API Wake Lock reduce la necesidad de soluciones piratas y potencialmente hambrientas de energía.
Solicitar un bloqueo de activación
Para solicitar un bloqueo de activación, debe llamar al navigator.wakeLock.request() método que devuelve un WakeLockSentinel objeto. Utilizará este objeto como
valor centinela. El navegador puede rechazar la solicitud por varias razones (por ejemplo, porque la batería está demasiado baja), por lo que es una buena práctica envolver la llamada en un try…catch declaración.
Liberar un bloqueo de activación
También necesita una forma de liberar un bloqueo de activación, que se logra llamando al release() método del WakeLockSentinel objeto. Si desea liberar automáticamente el bloqueo de activación después de que haya pasado un cierto período de tiempo, puede usar window.setTimeout() llamar release(), como se muestra en el ejemplo siguiente.
let wakeLock = null;
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}`);
}
};
await requestWakeLock();
window.setTimeout(() => {
wakeLock.release();
wakeLock = null;
}, 5000);
La implementación
Con la nueva aplicación web, los usuarios deben poder navegar fácilmente a través de una receta, completar los pasos e incluso alejarse sin el bloqueo de la pantalla. Para lograr este objetivo, el equipo primero construyó un prototipo rápido de front-end como prueba de concepto y para recopilar información de UX.
Después de que el prototipo resultó útil, diseñaron un
Componente vue.js
que podría compartirse con todas sus marcas (BettyCrocker,
Pillsburyy Cucharada). Aunque solo Betty Crocker tenía aplicaciones de 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 capturas de pantalla a continuación.
Al desarrollar el componente basado en el marco modernizado del nuevo sitio, hubo un fuerte enfoque en la
ViewModel capa del patrón MVVM. El equipo también programó teniendo en cuenta la interoperabilidad para habilitar la funcionalidad en los marcos heredados y nuevos del sitio.
Para realizar un seguimiento de la visibilidad y la usabilidad, Betty Crocker integró el seguimiento analítico de los eventos principales en el ciclo de vida del bloqueo de activación. El equipo utilizó la gestión de funciones para implementar el componente de bloqueo de activación en un solo sitio para la implementación de producción inicial y luego implementó la función en el resto de los sitios después de monitorear el uso y el estado de la página. Continúan monitoreando los datos analíticos en función del uso de este componente.
Como medida de seguridad para los usuarios, el equipo creó un tiempo de espera forzado para desactivar el bloqueo de activación después de una hora de inactividad. La implementación final que decidieron fue, a corto plazo, un interruptor de palanca en todas las páginas de recetas en sus sitios. A largo plazo, visualizan una vista de página de recetas renovada.
El contenedor de wake lock
var wakeLockControl = () => {
return import( './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');
this.$_handleAbortTimer();
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;
this.$_handleAbortTimer();
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 (this.timerId !== 0) {
clearTimeout(this.timerId);
this.timerId = 0;
}
if (this.isChecked) {
this.timerId = setTimeout(
this.$_releaseWakeLock,
this.settingsInternal.timeoutDurationMs,
);
}
},
$_handleVisibilityChange: function() {
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 arrojó 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, convirtiéndola 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 más larga que para los usuarios que no lo hicieron.
- La tasa de rebote para los usuarios que habilitaron el bloqueo de activación fue un 50% más baja que para aquellos que no utilizan 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 wake lock en comparación con todos los usuarios.
3.1×
Mayor duración de la sesión
300%
Indicadores de intención de compra más altos
Conclusiones
Betty Crocker ha obtenido resultados fantásticos con la API de Wake Lock. Puede probar la función usted mismo buscando su receta favorita en cualquiera de sus sitios (BettyCrocker,
Pillsburyo Cucharada) y habilitando el Evite que la pantalla se oscurezca mientras cocina palanca.
Los casos de uso de los wake locks no se detienen en los sitios de recetas. Otros ejemplos son las aplicaciones de tarjetas de embarque o boletos que necesitan mantener la pantalla encendida hasta que se haya escaneado el código de barras, las aplicaciones de estilo quiosco que mantienen la pantalla encendida continuamente o las aplicaciones de presentación basadas en la web que evitan que la pantalla se quede inactiva durante una presentación.
Hemos recopilado todo lo que necesita saber sobre la API de Wake Lock en un artículo completo en este mismo sitio. ¡Feliz lectura y feliz cocina!
Agradecimientos
los persona amasando masa foto cortesía de
Julian Hochgesang
en Unsplash.
