Beim Kochen mit einem Mobilgerät ist nichts schlimmer als das Display, das sich abschaltet. in der Mitte eines Rezeptschritts. Erfahren Sie, wie die Kochwebsite BettyCrocker.com die Wake Lock API verwendet hat, um dies zu verhindern.
Die eingestellten iOS- und Android-Apps
2014 in vielen Fanfare veröffentlicht, Betty Crocker hat ihre Apps vor Kurzem aus dem Apple App Store und dem Google Play Store entfernt. nachdem ihnen ihre Priorität herabgestuft wurde. Schon seit Langem bevorzugt das Team von Betty Crocker der mobilen Website neue Funktionen. statt der iOS-/Android-Apps. Die technische Plattform, auf der die iOS-/Android-Apps erstellt wurden, war veraltet. und das Unternehmen hatte nicht die nötigen Ressourcen, um die zukünftige Aktualisierung und Wartung der Anwendungen zu unterstützen. Die Webanwendung war auch objektiver gesprochener, moderner und leichter zu optimieren.
Die iOS- und Android-Apps boten jedoch eine Killerfunktion, die bei den Nutzern gut ankam:
Profitipp für Millennials: die mobile @BettyCrocker App wird nicht abgedunkelt oder gesperrt, wenn Sie ein Rezept nachkochen. – @AvaBeilke
80% der Menschen kochen mit einem Gerät in der Küche, aber das Dimmen und Sperren des Bildschirms ist problematisch. Was hat @BettyCrocker getan? Die App wurde so aktualisiert, dass sie NICHT gedimmt wird, wenn Nutzer ein Rezept geöffnet haben. – @KatieTweedy
Das ultimative Feature mit der Wake Lock API im Web
Beim Kochen mit einem Gerät gibt es nichts Ärgerliches mehr. als das Display mit unruhigen Händen oder sogar mit der Nase berühren, wenn es sich ausschaltet. Betty Crocker fragte sich, wie sie die Top-Funktion ihrer iOS- und Android-Apps portieren könnte. in der Web-App. Hier erfuhr sie von Projekt Fugu und die Wake Lock API
Mit der Wake Lock API lässt sich verhindern, dass das Gerät durch Dimmen oder Sperren des Bildschirms. Diese Funktion ermöglicht neue Möglichkeiten, für die bisher eine iOS- oder Android-App erforderlich war. Die Wake Lock API reduziert die Notwendigkeit von funktionsgefährdenden und potenziell energiehungrigen Behelfslösungen.
Wakelock anfordern
Zum Anfordern eines Wakelocks musst du die Methode navigator.wakeLock.request() aufrufen
das 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 Akkustand zu niedrig ist),
Daher empfiehlt es sich, den Aufruf in eine try…catch-Anweisung zu umschließen.
Wakelock freigeben
Sie müssen auch einen Wakelock
freigeben können,
Dazu wird die Methode release() des Objekts WakeLockSentinel aufgerufen.
Wenn Sie den Wakelock nach einer bestimmten Zeit automatisch freigeben möchten, gehen Sie so vor:
Sie können 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);
Die Implementierung
Mit der neuen Webanwendung sollten Nutzende einfach durch ein Rezept navigieren, alle Schritte ausführen und sogar ohne Displaysperre weggehen. Um dieses Ziel zu erreichen, erstellte das Team zunächst einen schnellen Frontend-Prototyp als Proof of Concept und um UX-Beitrag zu sammeln.
Nachdem sich der Prototyp als nützlich erwiesen hatte, wurde ein Vue.js-Komponente die für alle Marken genutzt werden können (BettyCrocker, Pillsbury und Tablespoon). Obwohl nur Betty Crocker iOS- und Android-Apps hatte, die drei Websites eine gemeinsame Codebasis haben, Die Komponente wurde einmal implementiert und überall bereitgestellt. wie in den Screenshots unten gezeigt.
<ph type="x-smartling-placeholder">
Bei der Entwicklung der Komponente
auf dem modernisierten Framework der Website
konzentrierten wir uns vor allem
ViewModel-Ebene des MVVM-Musters.
Bei der Programmgestaltung stand auch die Interoperabilität im Vordergrund.
um Funktionen für alte und neue Frameworks der Website zu aktivieren.
Betty Crocker integrierte Analyse-Tracking, um Sichtbarkeit und Nutzerfreundlichkeit für Kernereignisse im Wakelock-Lebenszyklus. Das Team nutzte Feature Management, um die Wakelock-Komponente bereitzustellen. für den ersten Produktions-Rollout auf eine einzige Website, Anschließend wurde die Funktion nach Überwachung der Nutzung und des Zustands der Seite auf den restlichen Websites bereitgestellt. Es überwacht weiterhin Analysedaten basierend auf der Nutzung dieser Komponente.
Um die Nutzer abzusichern, hat das Team eine erzwungene Zeitüberschreitung um den Wakelock nach einer Stunde Inaktivität zu deaktivieren. Die endgültige Implementierung, kurzfristig eine Ein/Aus-Schaltfläche für alle Rezeptseiten auf ihren Websites. Langfristig möchte er eine überarbeitete Rezeptseitenansicht sehen.
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 implementiert und lieferte hervorragende Ergebnisse. Vom 10. Dezember 2019 bis zum 10. Januar 2020 BettyCrocker.com meldete die folgenden Messwerte:
- Von allen Betty Crocker-Nutzern, die einen Browser haben, der mit der Wake Lock API kompatibel ist, 3,5% davon haben die Funktion sofort aktiviert, was sie zu einer Top-5-Aktion macht.
- Die Sitzungsdauer für Nutzer, die den Wakelock aktiviert haben, war 3,1-mal länger als bei Nutzenden, die dies nicht getan haben.
- Die Absprungrate bei Nutzern, die den Wakelock aktiviert haben, war um 50% niedriger. als für diejenigen, die die Wakelock-Funktion nicht nutzen.
- Die Indikatoren für die Kaufabsicht waren bei Wakelock-Nutzern um 300% höher als bei allen Nutzern.
3,1×
Längere Sitzungsdauer
50 %
Niedrigere Absprungrate
300%
Höhere Kaufabsichten
Ergebnisse
Betty Crocker hat mit der Wake Lock API fantastische Ergebnisse erzielt. Du kannst die Funktion selbst testen, indem du auf einer ihrer Websites nach deinem Lieblingsrezept suchst (BettyCrocker, Pillsbury oder Tablespoon). und aktivieren Sie die Ein/Aus-Schaltfläche Verhindern, dass das Display während des Kochens dunkel wird.
Anwendungsfälle für Wakelocks sind nicht auf Rezeptseiten beschränkt. Andere Beispiele sind Bordkarten- oder Ticket-Apps, bei denen der Bildschirm eingeschaltet bleiben muss bis der Barcode gescannt wurde, Kiosk-Apps, die den Bildschirm kontinuierlich eingeschaltet lassen, oder webbasierten Präsentations-Apps, die verhindern, dass der Bildschirm während der Präsentation in den Ruhezustand wechselt.
Wir haben alles Wissenswerte über die Wake Lock API zusammengestellt. in einem umfassenden Artikel auf dieser Website. Viel Spaß beim Lesen und viel Spaß beim Kochen!
Danksagungen
Foto der Person, die Teig knetet, mit freundlicher Genehmigung von Julian Hochgesang bei Unsplash