Es gibt nichts Schlimmeres, als wenn beim Kochen mit einem Mobilgerät das Display mitten in einem Rezeptschritt ausgeschaltet wird. Hier erfahren Sie, wie die Kochwebsite BettyCrocker.com die Wake Lock API verwendet hat, um dies zu verhindern.
Die eingestellten iOS- und Android-Apps
Die Betty Crocker-Apps wurden 2014 mit viel Tamtam veröffentlicht, aber vor Kurzem aus dem Apple App Store und dem Google Play Store entfernt, nachdem sie nicht mehr so wichtig waren. Das Betty Crocker-Team hat lange Zeit lieber neue Funktionen auf der mobilen Website als in 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 warten. Die Web-App hatte auch objektiv gesehen viel mehr Zugriffe, war moderner und ließ sich leichter erweitern.
Die iOS-/Android-Apps hatten jedoch eine Killerfunktion, die bei den Nutzern sehr beliebt war:
Profi-Tipp für Millennials: Die mobile App @BettyCrocker wird beim Kochen nicht gedimmt oder gesperrt. –@AvaBeilke
80% der Menschen kochen mit einem Gerät in der Küche, aber das Dimmen und Sperren des Displays ist ein Problem. Was hat @BettyCrocker gemacht? Die App wurde so aktualisiert, dass das Display nicht gedimmt wird, wenn Nutzer ein Rezept aufrufen. – @KatieTweedy
Mit der Wake Lock API die Killerfunktion ins Web bringen
Beim Kochen mit einem Gerät ist es besonders ärgerlich, wenn man das Display mit schmutzigen Händen oder sogar mit der Nase berühren muss, weil es sich ausgeschaltet hat. Betty Crocker hat sich gefragt, wie sie die Killerfunktion ihrer iOS-/Android-Apps in die Web-App übertragen können. Dabei haben sie Project Fugu und die Wake Lock API kennengelernt.
Die Wake Lock API bietet eine Möglichkeit, zu verhindern, dass das Gerät den Bildschirm dimmt oder sperrt. Diese Funktion ermöglicht neue Anwendungsfälle, für die bisher eine iOS-/Android-App erforderlich war. Die Wake Lock API macht umständliche und potenziell stromfressende Workarounds überflüssig.
Wakelock anfordern
Wenn Sie ein Wake Lock anfordern möchten, müssen Sie die Methode navigator.wakeLock.request() aufrufen, die ein WakeLockSentinel-Objekt zurückgibt. Sie verwenden dieses Objekt als Sentinel-Wert.
Der Browser kann die Anfrage aus verschiedenen Gründen ablehnen, z. B. weil der Akku zu schwach ist. Es empfiehlt sich daher, den Aufruf in eine try…catch-Anweisung einzuschließen.
Wakelock freigeben
Außerdem benötigen Sie eine Möglichkeit, eine Wake Lock freizugeben. Dazu rufen Sie die release()-Methode des WakeLockSentinel-Objekts auf.
Wenn Sie das Wake Lock nach einem bestimmten Zeitraum automatisch freigeben möchten, können Sie window.setTimeout() verwenden, um release() aufzurufen, wie im Beispiel unten 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);
Die Implementierung
Mit der neuen Web-App sollen Nutzer einfach durch ein Rezept navigieren, Schritte ausführen und sogar den Bildschirm entsperrt lassen können. Um dieses Ziel zu erreichen, entwickelte 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, entwickelten sie eine Vue.js-Komponente, die für alle ihre Marken (BettyCrocker, Pillsbury und Tablespoon) verwendet werden konnte. Obwohl nur Betty Crocker iOS- und Android-Apps hatte, haben die drei Websites eine gemeinsame Codebasis. Die Komponente konnte also einmal implementiert und überall bereitgestellt werden, wie in den Screenshots unten zu sehen ist.
Bei der Entwicklung der Komponente auf Grundlage des modernisierten Frameworks der neuen Website lag der Schwerpunkt auf der ViewModel-Ebene des MVVM-Musters.
Das Team hat auch auf Interoperabilität geachtet, um Funktionen auf Legacy- und neuen Frameworks der Website zu ermöglichen.
Um die Sichtbarkeit und Nutzerfreundlichkeit im Blick zu behalten, hat Betty Crocker die Analyseerfassung für wichtige Ereignisse im Wake Lock-Lebenszyklus integriert. Das Team nutzte die Funktion zur Verwaltung von Funktionen, um die Wake Lock-Komponente für die erste Produktionsbereitstellung auf einer einzelnen Website bereitzustellen. Nachdem die Nutzung und der Zustand der Seite beobachtet 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 erstellt, um die Aktivierungssperre 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 möchten sie die Rezeptseite überarbeiten.
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 bereitgestellt und hat hervorragende Ergebnisse erzielt. Im Zeitraum vom 10. Dezember 2019 bis zum 10. Januar 2020 wurden auf 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 fünf wichtigsten Aktionen.
- Die Sitzungsdauer für Nutzer, die die Wake Lock API aktiviert haben, war 3,1-mal länger als für Nutzer, die sie nicht aktiviert haben.
- Die Absprungrate für Nutzer, die die Funktion zur Aktivierungssperre aktiviert haben, war 50% niedriger als für Nutzer, die sie nicht verwendet haben.
- Die Indikatoren für die Kaufabsicht waren bei Nutzern mit Wake Lock etwa 300% höher als bei allen Nutzern.
3.1×
Längere Sitzungsdauer
50 %
Geringere Absprungrate
300%
Indikatoren für höhere Kaufabsicht
Zusammenfassung
Betty Crocker hat mit der Wake Lock API hervorragende Ergebnisse erzielt. Sie können die Funktion selbst testen, indem Sie auf einer der Websites (BettyCrocker, Pillsbury oder Tablespoon) nach Ihrem Lieblingsrezept suchen und die Ein/Aus-Schaltfläche Verhindern, dass der Bildschirm beim Kochen dunkel wird aktivieren.
Anwendungsfälle für Wake Locks beschränken sich nicht auf Rezeptwebsites. Weitere Beispiele sind Apps für Bordkarten oder Tickets, bei denen der Bildschirm eingeschaltet bleiben muss, bis der Barcode gescannt wurde, Kiosk-Apps, 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.
Wir haben alles, was Sie über die Wake Lock API wissen müssen, in einem umfassenden Artikel auf dieser Website zusammengestellt. Viel Spaß beim Lesen und Kochen!
Danksagungen
Das Foto von der Person, die Teig knetet, wurde mit freundlicher Genehmigung von Julian Hochgesang auf Unsplash zur Verfügung gestellt.