Beim Kochen mit einem mobilen Gerät ist nichts schlimmer, als dass sich der Bildschirm mitten in einem Rezeptschritt ausschaltet. Erfahren Sie, wie die Küchenseite von BettyCrocker.com die Wake Lock-API verwendet hat, um dies zu verhindern.
Aktualisiert
Betty Crocker ist seit fast einem Jahrhundert Amerikas Quelle für modernen Kochunterricht und vertrauenswürdige Rezeptentwicklung. 1997 gestartet, seine Website BettyCrocker.com
Heute werden monatlich mehr als 12 Millionen Besucher empfangen. Nach ihnen implementierte die Wake Lock API, es ist
Indikatoren von
Kaufversuch
waren ungefähr 300% höher für Wake-Lock-Benutzer im Vergleich zu allen Benutzern.
Die pensionierten iOS- und Android-Apps
Freigegeben an viel Fanfare Im Jahr 2014 hat Betty Crocker kürzlich ihre Apps aus dem Apple App Store und dem Google Play Store abgerufen, nachdem sie ihre Prioritäten aufgehoben hatten. Betty Crockers Team hat es lange Zeit vorgezogen, der mobilen Website neue Funktionen hinzuzufügen, anstatt den iOS / Android-Apps. Die technische Plattform, auf der die iOS / Android-Anwendungen erstellt wurden, war veraltet und das Unternehmen verfügte nicht über die Ressourcen, um zukünftige Updates und Wartungen der Anwendungen zu unterstützen. Die Webanwendung war auch objektiv viel verkehrsreicher, moderner und leichter zu verbessern.
IOS / Android Apps hatten eine Killer-Feature, die seine Benutzer jedoch liebten:
Millennial Cooking Pro Tipp: Die @BettyCrocker Die mobile App wird nicht gedimmt oder stürzt ab, wenn Sie einem Rezept folgen. - -@ AvaBeilke
Der 80% von Menschen kocht mit einem Gerät in der Küche, aber Dimmen und Bildschirmsperre sind ein Problem. Was hat getan @BettyCrocker machen? Ihre App wurde aktualisiert, sodass sie NICHT abgeblendet ist, wenn Benutzer ein Rezept verwenden. - -@Katie_Tweedy_
Bringen Sie die Killer-Funktion mit der Wake Lock-API ins Web
Wenn Sie mit einem Gerät kochen, gibt es nichts Frustrierenderes, als den Bildschirm mit schmutzigen Händen oder sogar der Nase berühren zu müssen, wenn sich der Bildschirm ausschaltet. Betty Crocker fragte sich, wie sie die Hauptfunktion ihrer iOS / Android-Apps auf die Web-App übertragen könnten. Dann fanden sie es heraus
Fugu-Projekt und die Wake Lock API.
Die Wake Lock-API bietet eine Möglichkeit, zu verhindern, dass das Gerät den Bildschirm dimmt oder sperrt. Diese Fähigkeit ermöglicht neue Erfahrungen, für die bisher eine iOS / Android-Anwendung erforderlich war. Die Wake Lock-API reduziert den Bedarf an Raubkopien und potenziell stromhungrigen Lösungen.
Fordern Sie eine Aktivierungssperre an
Um eine Aktivierungssperre anzufordern, müssen Sie anrufen navigator.wakeLock.request () Methode, die a zurückgibt WakeLockSentinel Objekt. Sie werden dieses Objekt als verwenden
Sentinel-Wert. Der Browser kann die Anforderung aus verschiedenen Gründen ablehnen (z. B. weil der Akku zu schwach ist). Daher empfiehlt es sich, den Anruf in a zu verpacken versuche ... zu fangen Aussage.
Aktivieren Sie eine Aktivierungssperre
Sie benötigen auch eine Möglichkeit, eine Aktivierungssperre aufzuheben, die durch Aufrufen erreicht wird Veröffentlichung () Methode von WakeLockSentinel Objekt. Wenn Sie die Aktivierungssperre nach Ablauf einer bestimmten Zeit automatisch aufheben möchten, können Sie sie verwenden window.setTimeout () anrufen Veröffentlichung (), wie im folgenden Beispiel gezeigt.
Lassen wakeLock = Null;
const requestWakeLock = asynchron () => {
try {
wakeLock = erwarten Navigator.wakeLock.request('Bildschirm');
wakeLock.addEventListener('release', () => {
console.Log('Wake Lock was released');
});
console.Log('Wake Lock is active');
} catch (err) {
console.Error(`${err.Süßkartoffel}, ${err.Botschaft}`);
}
};
erwarten requestWakeLock();
Fenster.setTimeout(() => {
wakeLock.release();
wakeLock = Null;
}, 5000);
Die Umsetzung
Mit der neuen Web-App sollten Benutzer in der Lage sein, problemlos durch ein Rezept zu navigieren, Schritte auszuführen und sogar wegzugehen, ohne den Bildschirm zu sperren. Um dieses Ziel zu erreichen, baute das Team zunächst einen schnellen Front-End-Prototyp als Proof of Concept und zum Sammeln von UX-Informationen.
Nachdem sich der Prototyp als nützlich erwiesen hatte, entwarfen sie eine
Vue.js Komponente
das könnte mit all deinen Marken geteilt werden (Bettycrocker,
Pillsburyy Esslöffel). Obwohl nur Betty Crocker über iOS- und Android-Apps verfügte, verfügen alle drei Websites über eine gemeinsame Codebasis, sodass sie die Komponente einmal und dann überall bereitstellen konnten, wie in den folgenden Screenshots gezeigt.
Bei der Entwicklung der Komponente auf der Grundlage des modernisierten Rahmens des neuen Standorts lag ein starker Fokus auf dem
ViewModel MVVM-Musterschicht. Das Team programmierte auch im Hinblick auf die Interoperabilität, um Funktionen in neuen und älteren Site-Frameworks zu ermöglichen.
Um die Sichtbarkeit und Benutzerfreundlichkeit zu verfolgen, integrierte Betty Crocker die analytische Verfolgung wichtiger Ereignisse in den Aktivierungssperr-Lebenszyklus. Das Team verwendete die Rollenverwaltung, um die Aktivierungssperrkomponente für die anfängliche Produktionsbereitstellung an einem einzelnen Standort bereitzustellen, und stellte die Funktion nach Überwachung des Seitenstatus und der Verwendung für die übrigen Standorte bereit. Sie überwachen weiterhin Analysedaten basierend auf der Verwendung dieser Komponente.
Aus Sicherheitsgründen für Benutzer erstellte das Team eine erzwungene Zeitüberschreitung, um die Aktivierungssperre nach einer Stunde Inaktivität zu deaktivieren. Die endgültige Implementierung, für die sie sich entschieden hatten, war kurzfristig ein Kippschalter auf allen Rezeptseiten ihrer Websites. Auf lange Sicht sehen sie eine überarbeitete Rezeptseitenansicht.
Der Wake-Lock-Container
var wakeLockControl = () => {
Rückkehr importieren( './wakeLock');
};Export Standard {
components: {
wakeLockControl: wakeLockControl,
},
Daten() {
Rückkehr {
config: {},
wakeLockComponent: '',
};
},
methods: {
init: Funktion(config) {
Este.config = config || {};
wenn ('wakeLock' im Navigator && 'request' im Navigator.wakeLock) {
Este.wakeLockComponent = 'wakeLockControl';
} else {
console.Log('Browser not supported');
}
},
},
};
Die Aktivierungssperrkomponente
<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');
this.$_handleAbortTimer();
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;
this.$_handleAbortTimer();
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 (this.timerId !== 0) {
clearTimeout(this.timerId);
this.timerId = 0;
}
if (this.isChecked) {
this.timerId = setTimeout(
this.$_releaseWakeLock,
this.settingsInternal.timeoutDurationMs,
);
}
},
$_handleVisibilityChange: function() {
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 an allen drei Standorten implementiert und lieferte hervorragende Ergebnisse. Im Zeitraum vom 10. Dezember 2019 bis zum 10. Januar 2020 meldete BettyCrocker.com die folgenden Kennzahlen:
- Von allen Betty Crocker-Benutzern mit einem Wake Lock API-kompatiblen Browser hat der 3.5% die Funktion sofort aktiviert und sie zu einer der Top 5-Aktionen gemacht.
- Die Sitzungsdauer für Benutzer, die die Aktivierungssperre aktiviert haben, war 3,1-mal länger als für Benutzer, die dies nicht getan haben.
- Die Absprungrate für Benutzer, die die Aktivierungssperre aktiviert haben, war 50% niedriger als für Benutzer, die die Aktivierungssperre nicht verwendet haben.
- Die Kaufabsichtsindikatoren waren für Wake-Lock-Benutzer im Vergleich zu allen Benutzern um ca. 300% höher.
3.1×
Längere Sitzungsdauer
300%
Höhere Kaufabsichtsindikatoren
Schlussfolgerungen
Betty Crocker hat mit der Wake Lock API fantastische Ergebnisse erzielt. Sie können die Funktion selbst testen, indem Sie auf einer ihrer Websites nach Ihrem Lieblingsrezept suchen (Bettycrocker,
Pillsburyoder Esslöffel) und aktivieren die Verhindern Sie, dass der Bildschirm beim Kochen dunkel wird Hebel.
Wake Lock-Anwendungsfälle hören nicht an Rezeptstellen auf. Andere Beispiele sind Bordkarten- oder Ticketanwendungen, bei denen der Bildschirm eingeschaltet bleiben muss, bis der Barcode gescannt wurde, Anwendungen im Kiosk-Stil, bei denen der Bildschirm kontinuierlich eingeschaltet bleibt, oder webbasierte Präsentationsanwendungen, die verhindern, dass der Bildschirm während einer Präsentation inaktiv wird.
In einem umfassenden Artikel auf dieser Website haben wir alles zusammengestellt, was Sie über die Wake Lock-API wissen müssen. Viel Spaß beim Lesen und viel Spaß beim Kochen!
Vielen Dank
das Person, die Teig knetet Foto mit freundlicher Genehmigung von
Julian Hochgesang
im Unsplash.
