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.
Updated
For nearly a century, Betty Crocker has been America's source for modern cooking instruction and trusted recipe development. Launched in 1997, its site BettyCrocker.com
today it receives more than 12 million visitors a month. After them implemented the Wake Lock API, its
indicators of
purchase attempt
were approximately 300% higher for wake lock users compared to all users.
The retired iOS and Android apps
Released to much fanfare En 2014, Betty Crocker recientemente sacó sus aplicaciones de Apple App Store and 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 traffic, más moderna y más fácil de mejorar.
IOS / Android apps had a killer feature, however, that its users loved:
Consejo profesional de cocina millennial: the @BettyCrocker The mobile app does not dim or crash when you follow a recipe. -@AvaBeilke
El 80% de las persons cocinan con un dispositivo en la cocina, pero la atenuación y el bloqueo de la pantalla son un problema. Que hizo @BettyCrocker do? Updated your app so it is NOT grayed out when users are on a recipe. -@Katie_Tweedy_
Bringing the killer feature to the web with the Wake Lock API
When cooking with a device, there is nothing more frustrating than having to touch the screen with dirty hands or even your nose when the screen turns off. Betty Crocker wondered how they could transfer the main feature of their iOS / Android apps to the web app. That's when they found out
Fugu project and the Wake Lock API.
The Wake Lock API provides a way to prevent the device from dimming or locking the screen. This ability enables new experiences that, until now, required an iOS / Android application. The Wake Lock API reduces the need for pirated and potentially power hungry solutions.
Request an activation lock
To request an activation lock, you must call navigator.wakeLock.request () method that returns a WakeLockSentinel object. You will use this object as
sentinel value. El browser 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 statement.
Release an activation lock
You also need a way to release an activation lock, which is accomplished by calling release () method of WakeLockSentinel object. If you want to automatically release the activation lock after a certain period of time has passed, you can use window.setTimeout () to call release (), as shown in the following example.
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.yam}, ${err.message}`);
}
};
await requestWakeLock();
window.setTimeout(() => {
wakeLock.release();
wakeLock = null;
}, 5000);
The implementation
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 target, el equipo primero construyó un prototipo rápido de front-end como prueba de concepto y para recopilar información de UX.
After the prototype proved useful, they designed a
Vue.js component
that could be shared with all your brands (Bettycrocker,
Pillsburyand Tablespoon). Although only Betty Crocker had iOS and Android apps, all three sites have a shared code base, so they were able to deploy the component once and then deploy it everywhere, as shown in the screenshots below.
In developing the component based on the modernized framework of the new site, there was a strong focus on the
ViewModel MVVM pattern layer. The team also programmed with interoperability in mind to enable functionality in new and legacy site frameworks.
To track visibility and usability, Betty Crocker integrated analytical tracking of major events in the Activation Lock lifecycle. The team used Role Management to deploy the Activation Lock component to a single site for the initial production deployment and then rolled out the feature to the rest of the sites after monitoring page status and usage. They continue to monitor analytical data based on the use of this component.
As a security measure for users, the team created a forced time-out to deactivate Activation Lock after one hour of inactivity. The final implementation they decided on was, in the short term, a toggle switch on all the recipe pages on their sites. In the long run, they see a revamped recipe page view.
The wake lock container
var wakeLockControl = () => {
return import( './wakeLock');
};export default {
components: {
wakeLockControl: wakeLockControl,
},
data() {
return {
config: {},
wakeLockComponent: '',
};
},
methods: {
init: function(config) {
Este.config = config || {};
if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
Este.wakeLockComponent = 'wakeLockControl';
} else {
console.log('Browser not supported');
}
},
},
};
The Activation Lock Component
<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>
Results
The Vue.js component was implemented on all three sites and it yielded excellent results. During the period from December 10, 2019 to January 10, 2020, BettyCrocker.com reported the following metrics:
- Out of all Betty Crocker users with a Wake Lock API compliant browser, the 3.5% enabled the feature immediately, making it a top 5 action.
- The session duration for users who enabled Activation Lock was 3.1 times longer than for users who did not.
- The bounce rate 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.
- Purchase intent indicators were approximately 300% higher for wake lock users compared to all users.
3.1×
Longer session duration
300%
Higher purchase intention indicators
Conclusions
Betty Crocker has had fantastic results with the Wake Lock API. You can test the feature yourself by searching for your favorite recipe on any of their sites (Bettycrocker,
Pillsburyor Tablespoon) and enabling the Prevent the screen from going dark while cooking lever.
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 bars, 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.
We have compiled everything you need to know about the Wake Lock API in a comprehensive article on this very site. Happy reading and happy cooking!
Thanks
the person kneading dough photo courtesy of
Julian Hochgesang
in Unsplash.
