Depuis près d'un siècle, Betty Crocker est la référence américaine en matière de conseils de cuisine moderne et de développement de recettes fiables. Lancé en 1997, le site BettyCrocker.com reçoit aujourd'hui plus de 12 millions de visiteurs par mois. Après avoir implémenté l'API Wake Lock, les indicateurs d'intention d'achat ont augmenté d'environ 300 % pour les utilisateurs de Wake Lock par rapport à tous les utilisateurs.
Anciennes applications iOS et Android
Lancées en 2014 avec beaucoup d'enthousiasme, les applications Betty Crocker ont récemment été retirées de l'App Store d'Apple et du Google Play Store après avoir été dépriorisées. Depuis longtemps, l'équipe Betty Crocker préfère ajouter de nouvelles fonctionnalités au site mobile plutôt qu'aux applications iOS/Android. La plate-forme technique sur laquelle les applications iOS/Android ont été créées était obsolète, et l'entreprise ne disposait pas des ressources nécessaires pour mettre à jour et gérer les applications à l'avenir. L'application Web était également objectivement beaucoup plus importante en termes de trafic, plus moderne et plus facile à améliorer.
Cependant, les applications iOS/Android disposaient d'une fonctionnalité phare que leurs utilisateurs appréciaient beaucoup :
Conseil de pro pour les millennials : l'application mobile @BettyCrocker ne s'assombrit pas et ne se verrouille pas lorsque vous suivez une recette. — @AvaBeilke
80 % des personnes cuisinent avec un appareil dans la cuisine, mais la mise en veille et le verrouillage de l'écran posent problème. Qu'a fait @BettyCrocker ? L'application n'est plus assombrie lorsque les utilisateurs consultent une recette. — @KatieTweedy
Apporter la fonctionnalité phare au Web avec l'API Wake Lock
Lorsque vous cuisinez avec un appareil, il n'y a rien de plus frustrant que de devoir toucher l'écran avec les mains sales ou même avec le nez lorsqu'il s'éteint. Betty Crocker s'est demandé comment porter la fonctionnalité phare de ses applications iOS/Android sur l'application Web. C'est alors qu'elle a découvert le projet Fugu et l'API Wake Lock.
L'API Wake Lock permet d'empêcher l'appareil de réduire la luminosité ou de verrouiller l'écran. Cette fonctionnalité permet de créer de nouvelles expériences qui, jusqu'à présent, nécessitaient une application iOS/Android. L'API Wake Lock réduit le besoin de solutions de contournement complexes et potentiellement gourmandes en énergie.
Demande d'un wakelock
Pour demander un verrouillage de réveil, vous devez appeler la méthode navigator.wakeLock.request() qui renvoie un objet WakeLockSentinel. Vous utiliserez cet objet comme valeur sentinelle.
Le navigateur peut refuser la requête pour diverses raisons (par exemple, parce que la batterie est trop faible). Il est donc recommandé d'encapsuler l'appel dans une instruction try…catch.
Libérer un wakelock
Vous avez également besoin d'un moyen de libérer un verrouillage de réveil, ce qui est possible en appelant la méthode release() de l'objet WakeLockSentinel.
Si vous souhaitez libérer automatiquement le verrouillage de réveil après un certain temps, vous pouvez utiliser window.setTimeout() pour appeler release(), comme indiqué dans l'exemple ci-dessous.
// 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);
L'implémentation
Grâce à la nouvelle application Web, les utilisateurs devraient pouvoir parcourir facilement une recette, suivre les étapes et même s'éloigner sans que l'écran ne se verrouille. Pour atteindre cet objectif, l'équipe a d'abord créé un prototype de frontend rapide comme preuve de concept et pour recueillir des commentaires sur l'UX.
Une fois le prototype jugé utile, ils ont conçu un composant Vue.js qui pouvait être partagé entre toutes leurs marques (BettyCrocker, Pillsbury et Tablespoon). Même si seule Betty Crocker disposait d'applications iOS et Android, les trois sites ont une base de code partagée. Ils ont donc pu implémenter le composant une seule fois et le déployer partout, comme le montrent les captures d'écran ci-dessous.
Lors du développement du composant basé sur le framework modernisé du nouveau site, l'accent a été mis sur la couche ViewModel du modèle MVVM.
L'équipe a également programmé l'interopérabilité pour activer les fonctionnalités sur les anciens et les nouveaux frameworks du site.
Pour suivre la visibilité et la facilité d'utilisation, Betty Crocker a intégré le suivi des données analytiques pour les événements clés du cycle de vie du verrouillage de l'écran. L'équipe a utilisé la gestion des fonctionnalités pour déployer le composant de verrouillage de l'activation sur un seul site pour le déploiement initial en production, puis a déployé la fonctionnalité sur le reste des sites après avoir surveillé l'utilisation et l'état des pages. Ils continuent de surveiller les données analytiques en fonction de l'utilisation de ce composant.
Pour éviter tout problème aux utilisateurs, l'équipe a créé un délai d'inactivité forcé pour désactiver le verrouillage de l'écran après une heure d'inactivité. L'implémentation finale qu'ils ont choisie était, à court terme, un bouton bascule sur toutes les pages de recettes de leurs sites. À long terme, ils envisagent de remanier la page de visualisation des recettes.
Conteneur de wakelock
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');
}
},
},
};
Composant Wakelock
<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>
Résultats
Le composant Vue.js a été déployé sur les trois sites et a donné d'excellents résultats. Au cours de la période allant du 10 décembre 2019 au 10 janvier 2020, BettyCrocker.com a enregistré les métriques suivantes :
- Parmi tous les utilisateurs de Betty Crocker disposant d'un navigateur compatible avec l'API Wake Lock, 3,5 % d'entre eux ont activé la fonctionnalité immédiatement, ce qui en fait l'une des cinq actions les plus populaires.
- La durée de la session pour les utilisateurs ayant activé le verrouillage de l'écran était 3,1 fois plus longue que pour ceux qui ne l'avaient pas activé.
- Le taux de rebond des utilisateurs ayant activé le verrouillage de l'écran était 50 % inférieur à celui des utilisateurs n'ayant pas activé cette fonctionnalité.
- Les indicateurs d'intention d'achat étaient environ 300 % plus élevés pour les utilisateurs de wake lock que pour tous les utilisateurs.
3.1×
Durée de session plus longue
50 %
Diminution du taux de rebond
300%
Indicateurs d'intention d'achat plus élevée
Conclusions
Betty Crocker a obtenu des résultats fantastiques grâce à l'API Wake Lock. Pour tester cette fonctionnalité, recherchez votre recette préférée sur l'un de leurs sites (BettyCrocker, Pillsbury ou Tablespoon), puis activez l'option Empêcher l'écran de s'assombrir pendant la cuisson.
Les cas d'utilisation des verrous de réveil ne se limitent pas aux sites de recettes. Par exemple, les applications de cartes d'embarquement ou de billets qui doivent maintenir l'écran allumé jusqu'à ce que le code-barres soit scanné, les applications de type borne interactive qui maintiennent l'écran allumé en permanence ou les applications de présentation Web qui empêchent l'écran de se mettre en veille pendant une présentation.
Nous avons compilé tout ce que vous devez savoir sur l'API Wake Lock dans un article complet sur ce même site. Bonne lecture et bonne cuisine !