Beim Kochen mit einem Mobilgerät wird nichts schlimmer, als wenn sich das Display mitten in einem Rezeptschritt ausschaltet. Hier erfahren Sie, wie die Kochwebsite BettyCrocker.com mithilfe der Wake Lock API dieses Problem verhindert hat.
Die eingestellten iOS- und Android-Apps
Betty Crocker, die 2014 mit viel Tamtam eingeführt wurde, hat ihre Apps vor Kurzem aus dem Apple App Store und dem Google Play Store entfernt, nachdem sie nicht mehr priorisiert wurden. Lange Zeit hat das Betty Crocker-Team neue Funktionen lieber der mobilen Website als den iOS-/Android-Apps hinzugefügt. Die technische Plattform, auf der die iOS-/Android-Apps erstellt wurden, war veraltet und das Unternehmen hatte nicht die Ressourcen, um die Apps in Zukunft zu aktualisieren und zu verwalten. Die Web-App hatte objektiv gesehen auch viel mehr Zugriffe, war moderner und einfacher zu optimieren.
Die iOS-/Android-Apps hatten jedoch eine Killerfunktion, die bei den Nutzern sehr beliebt war:
Profi-Tipp für Millennials: Die mobile App von @BettyCrocker wird nicht gedimmt oder gesperrt, wenn Sie ein Rezept befolgen. –@AvaBeilke
80% der Nutzer kochen mit einem Gerät in der Küche, aber das Dimmen und Sperren des Displays ist ein Problem. Was hat @BettyCrocker getan? Die App wurde so aktualisiert, dass sie NICHT gedimmt wird, wenn sich Nutzer in einem Rezept befinden. –@KatieTweedy
Die Killerfunktion mit der Wake Lock API ins Web bringen
Beim Kochen mit einem Gerät ist es besonders frustrierend, wenn das Display ausgeschaltet ist und man es mit schmutzigen Händen oder sogar mit der Nase berühren muss. Betty Crocker fragte sich, wie sie die Killerfunktion ihrer iOS-/Android-Apps auf die Webanwendung übertragen könnte. Dabei erfuhr sie von Project Fugu und der Wake Lock API.
Mit der Wake Lock API können Sie verhindern, dass das Gerät den Bildschirm dimmt oder sperrt. Diese Funktion ermöglicht neue Funktionen, für die bisher eine iOS-/Android-App erforderlich war. Mit der Wake Lock API müssen weniger komplizierte und potenziell energieintensive Umgehungen verwendet werden.
Wakelock anfordern
Wenn Sie eine Wakelock anfordern möchten, müssen Sie die navigator.wakeLock.request()-Methode aufrufen, die ein WakeLockSentinel-Objekt zurückgibt. Sie verwenden dieses Objekt als Grenzwert.
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 einzubetten.
Wakelock freigeben
Sie müssen außerdem die Methode release() des Objekts WakeLockSentinel aufrufen, um einen Wakelock freizugeben.
Wenn Sie die Sperre nach Ablauf einer bestimmten Zeit automatisch aufheben möchten, können Sie window.setTimeout() verwenden, um release() aufzurufen, wie im folgenden Beispiel gezeigt.
// 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);
Implementierung
Mit der neuen Webanwendung sollten Nutzer einfach durch ein Rezept navigieren, Schritte ausführen und sogar weggehen können, ohne dass der Bildschirm gesperrt wird. Um dieses Ziel zu erreichen, erstellte das Team zuerst einen schnellen Front-End-Prototyp als Proof of Concept und um UX-Feedback zu erhalten.
Nachdem sich der Prototyp als nützlich erwiesen hatte, entwarf das Team eine Vue.js-Komponente, die für alle Marken (BettyCrocker, Pillsbury und Tablespoon) verwendet werden konnte. Obwohl nur Betty Crocker iOS- und Android-Apps hatte, haben die drei Websites eine gemeinsame Codebasis. So konnte die Komponente einmal implementiert und überall bereitgestellt werden, wie in den folgenden Screenshots zu sehen ist.
Bei der Entwicklung der Komponente auf Grundlage des modernisierten Frameworks der neuen Website wurde ein starker Fokus auf die ViewModel-Ebene des MVVM-Musters gelegt.
Bei der Programmgestaltung wurde außerdem auf Interoperabilität geachtet, um Funktionen für alte und neue Frameworks der Website zu aktivieren.
Um die Sichtbarkeit und Nutzerfreundlichkeit im Blick zu behalten, hat Betty Crocker Analyse-Tracking für die wichtigsten Ereignisse im Wakelock-Lebenszyklus integriert. Das Team nutzte die Funktion zum Feature-Management, um die Wakelock-Komponente für das erste Produktions-Roll-out auf einer einzelnen Website bereitzustellen. Nachdem die Nutzung und der Seitenstatus überwacht wurden, wurde die Funktion auf den restlichen Websites bereitgestellt. Sie überwachen weiterhin Analysedaten basierend auf der Nutzung dieser Komponente.
Als Sicherheitsmaßnahme für Nutzer hat das Team ein erzwungenes Zeitlimit festgelegt, um die Sperre nach einer Stunde Inaktivität zu deaktivieren. Die endgültige Implementierung, für die sie sich entschieden haben, war kurzfristig ein Ein-/Aus-Schalter auf allen Rezeptseiten ihrer Websites. Langfristig soll die Rezeptseite ü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');
}
},
},
};
Komponente „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>
Ergebnisse
Die Vue.js-Komponente wurde auf allen drei Websites bereitgestellt und hat hervorragende Ergebnisse erzielt. Im Zeitraum vom 10. Dezember 2019 bis zum 10. Januar 2020 wurden für BettyCrocker.com die folgenden Messwerte erfasst:
- Von allen Betty Crocker-Nutzern mit einem Browser, der mit der Wake Lock API kompatibel ist, haben 3,5% die Funktion sofort aktiviert.Damit war sie eine der fünf häufigsten Aktionen.
- Die Sitzungsdauer von Nutzern, die die Aktivierung des Ruhezustands aktiviert hatten, war 3,1-mal länger als die von Nutzern, die dies nicht getan hatten.
- Die Ausstiegsrate bei Nutzern, die die Sperre aktiviert hatten, war 50% niedriger als bei Nutzern, die die Funktion nicht nutzten.
- Die Indikatoren für die Kaufabsicht waren bei Nutzern mit aktiviertem Ruhemodus etwa 300% höher als bei allen Nutzern.
3,1×
Längere Sitzungsdauer
50 %
Niedrigere Absprungrate
300 %
Höhere Kaufabsicht
Schlussfolgerungen
Betty Crocker konnte mit der Wake Lock API fantastische Ergebnisse erzielen. Sie können die Funktion selbst testen, indem Sie auf einer ihrer Websites (BettyCrocker, Pillsbury oder Tablespoon) nach Ihrem Lieblingsrezept suchen und die Ein/Aus-Schaltfläche Verhindern, dass das Display beim Kochen dunkel wird aktivieren.
Anwendungsfälle für Wakelocks enden nicht bei Rezeptwebsites. Weitere Beispiele sind Bordkarten- oder Ticket-Apps, die den Bildschirm so lange eingeschaltet lassen müssen, bis der Barcode gescannt wurde, Kiosk-Apps, die den Bildschirm kontinuierlich eingeschaltet lassen, oder webbasierte Präsentations-Apps, die den Ruhemodus während einer Präsentation verhindern.
In einem umfassenden Artikel auf dieser Website haben wir alles Wissenswerte zur Wake Lock API zusammengestellt. Viel Spaß beim Lesen und Kochen!
Danksagungen
Das Foto der Person, die Teig knetet, stammt von Julian Hochgesang auf Unsplash.