Od niemal wieku Betty Crocker jest w Ameryce źródłem nowoczesnych instrukcji gotowania i sprawdzonych przepisów. Uruchomiona w 1997 r. strona BettyCrocker.com odnotowuje obecnie ponad 12 mln wizyt miesięcznie. Po wdrożeniu interfejsu Wake Lock API wskaźniki zamiaru zakupu były o około 300% wyższe w przypadku użytkowników korzystających z tego interfejsu niż w przypadku wszystkich użytkowników.
Wycofane aplikacje na iOS i Androida
W 2014 r. aplikacje Betty Crocker zostały wydane z wielkim rozmachem. Niedawno zostały usunięte z Apple App Store i Google Play Store, ponieważ przestały być priorytetem. Od dłuższego czasu zespół Betty Crocker woli dodawać nowe funkcje do strony mobilnej zamiast do aplikacji na iOS i Androida. Platforma techniczna, na której utworzono aplikacje na iOS i Androida, była przestarzała, a firma nie miała zasobów, aby aktualizować i utrzymywać te aplikacje w przyszłości. Aplikacja internetowa miała też obiektywnie większy ruch, była bardziej nowoczesna i łatwiejsza do ulepszenia.
Aplikacje na iOS i Androida miały jednak świetną funkcję, którą użytkownicy bardzo lubili:
Wskazówka dla młodych kucharzy: aplikacja mobilna @BettyCrocker nie przyciemnia się ani nie blokuje, gdy korzystasz z przepisu. –@AvaBeilke
80% osób gotuje z urządzeniem w kuchni, ale problemem jest przyciemnianie i blokowanie ekranu. Co zrobił/a @BettyCrocker? zaktualizowali aplikację, aby nie przyciemniała ekranu, gdy użytkownicy korzystają z przepisu. —@KatieTweedy
Wprowadzanie kluczowej funkcji do internetu za pomocą interfejsu Wake Lock API
Podczas gotowania z użyciem urządzenia nie ma nic bardziej frustrującego niż konieczność dotykania ekranu brudnymi rękami lub nawet nosem, gdy ekran się wyłączy. Zespół Betty Crocker zastanawiał się, jak przenieść kluczową funkcję aplikacji na iOS i Androida do aplikacji internetowej. Wtedy dowiedział się o Projekcie Fugu i interfejsie Wake Lock API.
Interfejs Wake Lock API umożliwia zapobieganie przyciemnianiu lub blokowaniu ekranu urządzenia. Ta funkcja umożliwia korzystanie z nowych funkcji, które do tej pory wymagały aplikacji na iOS lub Androida. Interfejs Wake Lock API zmniejsza potrzebę stosowania nieeleganckich i potencjalnie energochłonnych obejść.
Wysyłanie prośby o blokadę uśpienia
Aby poprosić o blokadę wybudzania, musisz wywołać metodę navigator.wakeLock.request(), która zwraca obiekt WakeLockSentinel. Użyjesz tego obiektu jako wartości wartowniczej.
Przeglądarka może odrzucić żądanie z różnych powodów (np. z powodu zbyt niskiego poziomu baterii), dlatego warto umieścić wywołanie w instrukcji try…catch.
Zwalnianie blokady uśpienia
Musisz też mieć możliwość zwalniania blokady wybudzania, co osiąga się przez wywołanie metody release() obiektu WakeLockSentinel.
Jeśli chcesz automatycznie zwolnić blokadę wybudzania po upływie określonego czasu, możesz użyć window.setTimeout(), aby wywołać release(), jak pokazano w przykładzie poniżej.
// 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);
Wdrożenie
Nowa aplikacja internetowa powinna umożliwiać użytkownikom łatwe poruszanie się po przepisie, wykonywanie poszczególnych kroków, a nawet odejście od urządzenia bez blokowania ekranu. Aby osiągnąć ten cel, zespół najpierw stworzył szybki prototyp interfejsu jako model koncepcyjny i aby zebrać opinie na temat UX.
Po tym, jak prototyp okazał się przydatny, zespół zaprojektował komponent Vue.js, który można było udostępniać wszystkim markom (BettyCrocker, Pillsbury i Tablespoon). Mimo że tylko Betty Crocker miała aplikacje na iOS i Androida, wszystkie 3 witryny miały wspólną bazę kodu, dzięki czemu mogły wdrożyć komponent raz i rozmieścić go wszędzie, jak pokazano na zrzutach ekranu poniżej.
Podczas tworzenia komponentu na podstawie zmodernizowanych ram nowej witryny duży nacisk położono na ViewModel warstwę wzorca MVVM.
Zespół programistów zadbał też o interoperacyjność, aby umożliwić działanie funkcji w starszych i nowych strukturach witryny.
Aby śledzić widoczność i użyteczność, Betty Crocker zintegrowała śledzenie analityczne podstawowych zdarzeń w cyklu życia blokady wybudzania. Zespół wykorzystał zarządzanie funkcjami, aby wdrożyć komponent blokady wybudzania w jednej witrynie na potrzeby wstępnego wdrożenia produkcyjnego, a następnie wdrożył tę funkcję w pozostałych witrynach po monitorowaniu wykorzystania i stanu strony. Nadal monitorują dane analityczne na podstawie korzystania z tego komponentu.
Aby zapewnić bezpieczeństwo użytkownikom, zespół utworzył wymuszone przekroczenie limitu czasu, które wyłącza blokadę wybudzania po godzinie bezczynności. Ostatecznie zdecydowali się na krótkoterminowe rozwiązanie w postaci przełącznika na wszystkich stronach z przepisami w swoich witrynach. W dłuższej perspektywie planują wprowadzić nowy widok strony z przepisem.
Kontener blokady wybudzania
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');
}
},
},
};
Komponent blokady wybudzania
<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>
Wyniki
Komponent Vue.js został wdrożony we wszystkich 3 witrynach i przyniósł świetne wyniki. W okresie od 10 grudnia 2019 r. do 10 stycznia 2020 r. witryna BettyCrocker.com odnotowała te dane:
- Spośród wszystkich użytkowników Betty Crocker, którzy korzystali z przeglądarki zgodnej z interfejsem Wake Lock API, 3,5% osób od razu włączyło tę funkcję, co sprawiło, że znalazła się ona w pierwszej piątce najczęściej wykonywanych działań.
- Sesja użytkowników, którzy włączyli blokadę wybudzania, była 3,1 raza dłuższa niż sesja użytkowników, którzy tego nie zrobili.
- Współczynnik odrzuceń w przypadku użytkowników, którzy włączyli blokadę wybudzania, był o 50% niższy niż w przypadku użytkowników, którzy nie korzystali z tej funkcji.
- Wskaźniki zamiaru zakupu były o około 300% wyższe w przypadku użytkowników blokady wybudzania niż w przypadku wszystkich użytkowników.
3,1×
Dłuższy czas trwania sesji
50%
Obniżanie współczynnika odrzuceń
300%
Wskaźniki większego zamiaru zakupu
Podsumowanie
Firma Betty Crocker osiągnęła fantastyczne wyniki dzięki interfejsowi Wake Lock API. Możesz przetestować tę funkcję, wyszukując ulubiony przepis w dowolnej z tych witryn (BettyCrocker, Pillsbury lub Tablespoon) i włączając przełącznik Zapobiegaj wygaszaniu ekranu podczas gotowania.
Przypadki użycia blokad wybudzania nie ograniczają się do witryn z przepisami. Inne przykłady to aplikacje z kartami pokładowymi lub biletami, które muszą utrzymywać włączony ekran, dopóki nie zostanie zeskanowany kod kreskowy, aplikacje w stylu kiosku, które utrzymują włączony ekran przez cały czas, lub aplikacje do prezentacji internetowych, które zapobiegają uśpieniu ekranu podczas prezentacji.
W tym artykule znajdziesz wszystko, co musisz wiedzieć o interfejsie Wake Lock API. Miłej lektury i udanego gotowania!