Es gibt nichts Schlimmeres, als wenn das Display Ihres Mobilgeräts mitten in einem Rezeptschritt ausgeschaltet wird. 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 erweitern.
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 im Web
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
Außerdem benötigen Sie eine Möglichkeit, eine Wakelock aufzuheben. Dazu rufen Sie die release()-Methode des WakeLockSentinel-Objekts auf.
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. Auch wenn nur Betty Crocker iOS- und Android-Apps hatte, teilen sich 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 basierend auf dem modernisierten Framework der neuen Website wurde ein starker Fokus auf die ViewModel-Ebene des MVVM-Musters gelegt.
Das Team hat auch die Interoperabilität berücksichtigt, um Funktionen in alten und neuen Frameworks der Website zu ermöglichen.
Um die Sichtbarkeit und Nutzerfreundlichkeit im Blick zu behalten, hat Betty Crocker Analyse-Tracking für wichtige Ereignisse im Lebenszyklus der Sperre für die Bildschirmaktivität 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 es eine überarbeitete Rezeptansicht geben.
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 gehört sie zu den Top 5-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
Ergebnisse
Betty Crocker konnte mit der Wake Lock API fantastische Ergebnisse erzielen. Sie können die Funktion selbst testen, indem Sie auf einer der Websites (BettyCrocker, Pillsbury oder Tablespoon) nach Ihrem Lieblingsrezept suchen und die Option Display bleibt beim Kochen an aktivieren.
Anwendungsfälle für Wakelocks sind nicht auf Rezeptwebsites beschränkt. Weitere Beispiele sind Bordkarten- oder Ticket-Apps, bei denen der Bildschirm eingeschaltet bleiben muss, bis der Barcode gescannt wurde, Kioskauflagen, bei denen der Bildschirm dauerhaft eingeschaltet bleibt, oder webbasierte Präsentations-Apps, die verhindern, dass der Bildschirm während einer Präsentation in den Ruhemodus wechselt.
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.