Rien n'est pire quand on cuisine sur son appareil mobile que si son écran 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 que cela ne se produise.
Depuis près d'un siècle, Betty Crocker est la source américaine d'enseignement de la cuisine moderne et un développement de recettes fiable. Créé en 1997, le site BettyCrocker.com qui reçoit aujourd'hui plus de 12 millions de visiteurs par mois. Après avoir implémenté l'API Wake Lock, ses indicateurs de intention d'achat étaient environ 300% plus élevées pour les utilisateurs de wakelocks que pour tous les utilisateurs.
Applications iOS et Android supprimées
Sorti en 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 abaissé leur priorité. L'équipe de Betty Crocker préfère ajouter de nouvelles fonctionnalités sur son site mobile depuis longtemps au lieu des applications iOS/Android. La plate-forme technique sur laquelle les applications iOS/Android ont été créées était obsolète, et que l'entreprise ne disposait pas des ressources nécessaires pour prendre en charge la mise à jour et la maintenance des applications à l'avenir. L'application Web était aussi objectivement beaucoup plus importante en termes de trafic, plus modernes et plus faciles à améliorer.
Cependant, les applications iOS/Android avaient une fonctionnalité principale que les utilisateurs appréciaient particulièrement:
Conseil de pro de la cuisine pour les millenials: l'application mobile @BettyCrocker ne s’assombrit pas ou ne se verrouille pas lorsque vous suivez une recette. – @AvaBeilke
80% des personnes cuisinent avec un appareil en cuisine, mais la diminution de la luminosité et le verrouillage de l’écran sont un problème. Qu'a fait @BettyCrocker ? L'application a été mise à jour pour ne pas s'assombrir lorsque les utilisateurs sont dans une recette. – @KatieTweedy
La fonctionnalité essentielle sur le Web avec l'API Wake Lock
Quand on cuisine avec son appareil, il n'y a rien de plus frustrant que de toucher l'écran avec les mains en désordre ou même avec le nez lorsqu'il s'éteint. Betty Crocker s'est demandé comment elle pouvait transférer la fonctionnalité tueuse de ses applications iOS/Android à l'application Web. C’est à ce moment-là qu’ils ont appris Project Fugu et API Wake Lock
L'API Wake Lock permet d'empêcher l'appareil de la diminution de la luminosité ou du verrouillage de l'écran. Cette fonctionnalité offre 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 hackantes 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 en tant que
sentinel.
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 aussi besoin d'un moyen
de déverrouiller un wakelock,
ce qui est obtenu en appelant la méthode release()
de l'objet WakeLockSentinel
.
Si vous souhaitez déverrouiller automatiquement le wakelock au bout d'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 devraient pouvoir naviguer facilement dans une recette, effectuer des étapes, et même s'en aller sans le verrouillage de l'écran. Pour atteindre cet objectif, l'équipe a d'abord construit un prototype rapide de front-end comme preuve de concept et pour recueillir des commentaires sur l'UX.
Après que le prototype s'est avéré utile, ils ont conçu un Composant Vue.js qu'elle peut partager entre toutes ses marques (BettyCrocker, Pillsbury et Tablespoon). Même si seule Betty Crocker avait des applications iOS et Android, les trois sites ont un code base partagé, Ils ont donc pu implémenter le composant une fois et le déployer partout, comme illustré dans les captures d'écran ci-dessous.
<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">Pour développer le composant en s'appuyant sur la structure modernisée du nouveau site,
nous avons mis l'accent sur
Couche ViewModel
du modèle MVVM
L'équipe a aussi programmé
un programme dans un souci d'interopérabilité
pour activer des fonctionnalités sur les cadres anciens et nouveaux du site.
Pour suivre la visibilité et la facilité d'utilisation, Betty Crocker a intégré le suivi analytique pour les événements de base dans le cycle de vie des wakelocks. L'équipe a utilisé la gestion des caractéristiques pour déployer le composant wakelock sur un seul site pour le déploiement initial en production, puis déployé la fonctionnalité sur le reste des sites après avoir surveillé l'utilisation et l'état de la page. Il continue de surveiller les données d'analyse en fonction de l'utilisation de ce composant.
Pour assurer la sécurité des 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 qu'ils ont choisie a été à court terme d'activer un interrupteur sur toutes les pages de recettes de ses sites. À long terme, ils envisagent une vue de page de recette repensée.
Conteneur du 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 enregistré les métriques suivantes:
- De tous les utilisateurs de Betty Crocker dont le navigateur est compatible avec l'API Wake Lock, 3,5% d'entre eux l'ont activée immédiatement, ce qui en fait l'une des cinq actions les plus populaires.
- 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 a diminué de 50 % que pour ceux qui n'utilisent pas la fonction wakelock.
- Les indicateurs d'intention d'achat étaient environ 300% plus élevés pour les utilisateurs de wakelocks que pour l'ensemble des utilisateurs.
3,1×
Durée de session plus longue
50 %
Réduction du taux de rebond
300%
Indicateurs d'intention d'achat plus élevés
Conclusions
Betty Crocker a obtenu des résultats impressionnants avec l'API Wake Lock. Vous pouvez tester vous-même cette fonctionnalité en recherchant votre recette préférée sur l'un de leurs sites. (BettyCrocker, Pillsbury ou Tablespoon) et activez le bouton 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. Autres exemples : cartes d'embarquement ou applications de billetterie qui doivent laisser l'écran allumé tant que le code-barres n'a pas été scanné, des applications de type kiosque qui maintiennent l'écran allumé en permanence, ou des applications de présentation Web qui empêchent l'écran de passer 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 d'une personne en train de pétrir de la pâte, avec l'aimable autorisation de Julian Hochgesang dans Unsplash.