Quand on cuisine avec un appareil mobile, rien n'est pire que l'écran qui s'éteint au milieu d'une étape de recette. Découvrez comment le site de cuisine BettyCrocker.com a utilisé l'API Wake Lock pour éviter cela.
Applications iOS et Android supprimées
Sorti en grande fanfare en 2014, Betty Crocker a récemment retiré ses applications de l'App Store d'Apple et du Google Play Store après avoir perdu leur priorité. Depuis longtemps, l'équipe de Betty Crocker a préféré ajouter de nouvelles fonctionnalités au site mobile plutôt que les applications iOS/Android. La plate-forme technique sur laquelle les applications iOS/Android étaient créées était obsolète, et l'entreprise n'avait pas les ressources nécessaires pour mettre à jour et gérer les applications à l'avenir. L'application Web était également objectivement plus importante en termes de trafic, plus moderne et plus facile à améliorer.
Les applications iOS/Android avaient cependant une fonctionnalité géniale que les utilisateurs appréciaient:
Conseil de pro en cuisine des millennials: l'application mobile @BettyCrocker ne s'assombrit ou ne se verrouille pas lorsque vous suivez une recette. @AvaBeilke
80% des utilisateurs cuisinent avec un appareil, mais la diminution de la luminosité et le verrouillage de l'écran posent problème. Qu'a fait @BettyCrocker ? Mise à jour de l'application pour ne PAS baisser la luminosité lorsque les utilisateurs sont dans une recette. – @KatieTweedy
Intégrer la fonctionnalité tueuse sur le Web avec l'API Wake Lock
Lorsque vous cuisinez avec un appareil, rien de plus frustrant que de devoir toucher l'écran avec les mains désordonnées ou même le nez quand celui-ci s'éteint. Betty Crocker s'est demandé comment elle pouvait transférer la fonctionnalité tueuse de ses applications iOS/Android sur l'application Web. C'est à ce moment-là qu'elle a découvert Project Fugu et l'API Wake Lock.
L'API Wake Lock permet d'empêcher l'appareil de s'assombrir ou de verrouiller l'écran. Cette fonctionnalité permet d'offrir de nouvelles expériences qui, jusqu'à présent, nécessitaient une application iOS/Android. L'API Wake Lock réduit la nécessité de recourir à des solutions piratées et potentiellement gourmandes en énergie.
Demander un wakelock
Pour demander un wakelock, 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 wakelock en appelant la méthode release() de l'objet WakeLockSentinel.
Si vous souhaitez libérer automatiquement le wakelock après un certain temps, vous pouvez utiliser window.setTimeout() pour appeler release(), comme illustré 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
Avec la nouvelle application Web, les utilisateurs doivent pouvoir naviguer facilement dans une recette, suivre des étapes complètes et même partir sans verrouillage de l'écran. Pour atteindre cet objectif, l'équipe a d'abord créé un prototype rapide d'interface en tant que démonstration de faisabilité et afin de recueillir des commentaires sur l'expérience utilisateur.
Une fois que le prototype s'est avéré utile, l'équipe a conçu un composant Vue.js pouvant être partagé par toutes ses marques (BettyCrocker, Pillsbury et Tablespoon). Bien que seule Betty Crocker possédait des applications iOS et Android, les trois sites ont un code base partagé. Ils ont donc pu implémenter le composant une seule fois et le déployer partout, comme illustré dans 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 dans les frameworks anciens et nouveaux du site.
Pour suivre la visibilité et la facilité d'utilisation, Betty Crocker a intégré un suivi analytique pour les événements principaux dans le cycle de vie des wakelocks. L'équipe a utilisé la gestion des fonctionnalités pour déployer le composant wakelock sur un seul site en vue du 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 de la page. Elle continue à surveiller les données d'analyse en fonction de l'utilisation de ce composant.
Afin de garantir une sécurité infaillible pour les utilisateurs, l'équipe a créé un délai d'inactivité forcé pour désactiver le wakelock après une heure d'inactivité. La dernière implémentation adoptée consistait à court terme à activer/désactiver toutes les pages de recettes de leurs sites. À long terme, elle envisage une nouvelle vue de la page de recette.
Le 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. Entre le 10 décembre 2019 et le 10 janvier 2020, BettyCrocker.com a fourni les métriques suivantes:
- Parmi tous les utilisateurs de Betty Crocker dont le navigateur est compatible avec l'API Wake Lock, 3,5% d'entre eux ont activé cette fonctionnalité immédiatement, ce qui en fait l'une des cinq actions les plus fréquentes.
- La durée de session pour les utilisateurs ayant activé le wakelock était 3,1 fois plus longue que pour les autres.
- Le taux de rebond pour les utilisateurs ayant activé le wakelock était inférieur de 50% à celui de ceux qui n'utilisaient pas la fonctionnalité de wakelock.
- Les indicateurs d'intention d'achat étaient environ 300% plus élevés pour les utilisateurs de wakelocks que pour tous les utilisateurs.
3,1×
Session plus longue
50%
de diminution du taux de rebond
300%
Indicateurs d'intention d'achat plus élevés
Conclusions
Betty Crocker a obtenu d'excellents résultats avec l'API Wake Lock. Vous pouvez tester cette fonctionnalité vous-même en recherchant votre recette préférée sur l'un de leurs sites (BettyCrocker, Pillsbury ou Tablespoon) et en activant l'option Empêcher l'écran de s'assombrir pendant que vous cuisinez.
Les cas d'utilisation des wakelocks ne s'arrêtent pas aux sites de recettes. Il peut également s'agir d'applications de carte d'embarquement ou de billetterie qui doivent garder l'écran allumé jusqu'à ce que le code-barres ait été scanné, d'applications de type kiosque qui maintiennent l'écran allumé en continu, ou d'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 site. Bonne lecture et bonne cuisine !
Remerciements
Photo montrant une personne qui pétrit de la pâte, fournie par Julian Hochgesang sur Unsplash.