Beim Kochen mit einem Mobilgerät ist nichts schlimmer, als sich mitten in einem Rezeptschritt das Display ausschaltet. Erfahren Sie, wie die Kochwebsite BettyCrocker.com die Wake Lock API verwendet hat, um dies zu verhindern.
Die eingestellten iOS- und Android-Apps
Betty Crocker wurde 2014 für viel Fanfare veröffentlicht und hat ihre Apps vor Kurzem aus dem Apple App Store und dem Google Play Store entfernt, nachdem sie herabgestuft wurden. Schon seit Langem bevorzugt das Betty-Crocker-Team, der mobilen Website neue Funktionen statt iOS/Android-Apps hinzuzufügen. Die technische Plattform, auf der die iOS-/Android-Apps erstellt wurden, war veraltet und das Unternehmen verfügte nicht über die Ressourcen, um die Apps in Zukunft zu aktualisieren und zu warten. Die Webanwendung war auch objektiv viel größer verkehrsbezogen, moderner und einfacher zu optimieren.
Die iOS- und Android-Apps verfügten jedoch über eine Top-Funktion, die bei den Nutzern sehr gut ankam:
Profitipp fürs Kochen der Millennials: Die mobile @BettyCrocker-App wird nicht gedimmt oder gesperrt, wenn du einem Rezept nachgehst. – @AvaBeilke
80% der Menschen kochen mit einem Gerät in der Küche, aber das Dimmen und Sperren des Bildschirms ist ein Problem. Was hat @BettyCrocker gemacht? Die App wurde so aktualisiert, dass sie NICHT gedimmt wird, wenn Nutzer sich in einem Rezept befinden. – @KatieTweedy
Die beeindruckende Funktion im Web mit der Wake Lock API verfügbar machen
Beim Kochen mit einem Gerät ist nichts frustrierender, als den Bildschirm mit chaotischen Händen oder sogar mit der Nase zu berühren, wenn der Bildschirm abgeschaltet wird. Betty Crocker fragte sich, wie sie die beste Funktion ihrer iOS-/Android-Apps in die Web-App übertragen kann. Zu diesem Zeitpunkt erfuhren sie von Project Fugu und der Wake Lock API.
Die Wake Lock API bietet eine Möglichkeit, um zu verhindern, dass das Gerät den Bildschirm abdunkelt oder sperren kann. Diese Funktion ermöglicht neue Funktionen, für die bisher eine iOS/Android-App erforderlich war. Die Wake Lock API reduziert die Notwendigkeit für Hacking- und potenziell energieintensive Problemumgehungen.
Wakelock anfordern
Um einen Wakelock anzufordern, müssen Sie die Methode navigator.wakeLock.request() aufrufen, die ein WakeLockSentinel-Objekt zurückgibt. Dieses Objekt wird als Sentinel-Wert verwendet.
Der Browser kann die Anfrage aus verschiedenen Gründen ablehnen, z. B. weil der Akkustand zu niedrig ist. Daher empfiehlt es sich, den Aufruf in eine try…catch-Anweisung zu verpacken.
Wakelock freigeben
Sie benötigen auch eine Möglichkeit, einen Wakelock freizugeben. Dazu rufen Sie die Methode release() des WakeLockSentinel-Objekts auf.
Wenn der Wakelock nach einer bestimmten Zeit automatisch freigegeben werden soll, können Sie release() wie im folgenden Beispiel mit window.setTimeout() aufrufen.
// 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);
Die Implementierung
Mit der neuen Web-App sollten Nutzer in der Lage sein, einfach durch ein Rezept zu navigieren, Schritte abzuschließen und sogar ohne Displaysperre die Seite zu verlassen. Um dieses Ziel zu erreichen, erstellte das Team zuerst einen schnellen Frontend-Prototyp als Proof of Concept und um UX-Eingaben zu sammeln.
Nachdem sich der Prototyp als nützlich erwiesen hatte, wurde eine Vue.js-Komponente entwickelt, die von allen Marken (BettyCrocker, Pillsbury und Tablespoon) gemeinsam genutzt werden kann. Obwohl nur Betty Crocker iOS- und Android-Apps hatte, haben die drei Websites eine gemeinsame Codebasis, sodass sie die Komponente einmal implementieren und überall bereitstellen konnten, wie in den folgenden Screenshots gezeigt.
Bei der Entwicklung der Komponente auf der Grundlage des modernisierten Frameworks der neuen Website wurde der Schwerpunkt auf die ViewModel-Ebene des MVVM-Musters gelegt.
Das Team konzentrierte sich auch auf die Interoperabilität, um die Funktionen für alte und neue Frameworks der Website zu ermöglichen.
Betty Crocker hat das Analyse-Tracking für Kernereignisse im Wakelock-Lebenszyklus integriert, um Sichtbarkeit und Nutzerfreundlichkeit zu verfolgen. Das Team stellte mithilfe der Feature-Verwaltung die Wakelock-Komponente auf einer einzelnen Website für die erste Produktionseinführung bereit. Anschließend stellte es die Funktion auf den übrigen Websites bereit, nachdem die Nutzung und der Seitenzustand überwacht worden waren. Es werden weiterhin Analysedaten auf Grundlage der Nutzung dieser Komponente überwacht.
Zur Absicherung für Nutzer hat das Team ein erzwungenes Zeitlimit erstellt, um den Wakelock nach einer Stunde Inaktivität zu deaktivieren. Die letzte Implementierung war kurzzeitig eine Ein/Aus-Schaltfläche für alle Rezeptseiten auf den Websites. Langfristig soll die Seite mit den Rezepten überarbeitet werden.
Der Wakelock-Container
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');
}
},
},
};
Die Wakelock-Komponente
<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>
Ergebnisse
Die Vue.js-Komponente wurde auf allen drei Websites eingesetzt und hat hervorragende Ergebnisse geliefert. Im Zeitraum vom 10. Dezember 2019 bis zum 10. Januar 2020 meldete BettyCrocker.com die folgenden Messwerte:
- Von allen Betty Crocker-Nutzern mit einem Browser, der mit der Wake Lock API kompatibel ist, haben 3,5% von ihnen die Funktion sofort aktiviert, was sie zu einer Top-5-Aktion machte.
- Die Sitzungsdauer war für Nutzer, die den Wakelock aktiviert haben, 3,1-mal länger als für Nutzer, die dies nicht getan haben.
- Die Absprungrate bei Nutzern, die den Wakelock aktiviert hatten, war um 50% niedriger als bei Nutzern, die den Wakelock nicht verwendeten.
- Die Indikatoren für Kaufabsicht waren bei Wakelock-Nutzern um etwa 300% höher als bei allen Nutzern.
3,1×
Längere Sitzungsdauer
50 %
Niedrigere Absprungrate
300%
Höhere Indikatoren für die Kaufabsicht
Ergebnisse
Betty Crocker hat mit der Wake Lock API fantastische Ergebnisse erzielt. Sie können die Funktion selbst testen, indem Sie auf einer der Websites nach Ihrem Lieblingsrezept suchen (BettyCrocker, Pillsbury oder Tablespoon) und die Option Beim Kochen verhindern, dass das Display dunkel wird.
Anwendungsfälle für Wakelocks enden nicht bei Rezeptwebsites. Weitere Beispiele sind Bordkarten- oder Ticket-Apps, die den Bildschirm eingeschaltet lassen müssen, bis der Barcode gescannt wurde, Kiosk-Apps, die den Bildschirm kontinuierlich eingeschaltet lassen, oder webbasierte Präsentations-Apps, die verhindern, dass der Bildschirm während einer Präsentation in den Ruhemodus wechselt.
Wir haben alles, was du über die Wake Lock API wissen musst in einem umfassenden Artikel auf genau dieser Website zusammengestellt. Viel Spaß beim Lesen und viel Spaß beim Kochen!
Danksagungen
Das Foto Person, die Teig knetet, mit freundlicher Genehmigung von Julian Hochgesang auf Unsplash