Nie ma nic gorszego podczas gotowania na urządzeniu mobilnym niż wyłączenie ekranu w trakcie przepisu. Dowiedz się, jak strona kulinarna BettyCrocker.com wykorzystała interfejs Wake Lock API, aby temu zapobiec.
Od prawie 100 lat firma Betty Crocker jest w Stanach Zjednoczonych źródłem nowoczesnych instrukcji gotowania i sprawdzonych przepisów. Uruchomiona w 1997 r. witryna BettyCrocker.com ma obecnie ponad 12 milionów użytkowników miesięcznie. Po zaimplementowaniu interfejsu Wake Lock API wskaźniki zamiaru zakupu były o około 300% wyższe w przypadku użytkowników z blokadą uśpienia w porównaniu z pozostałymi użytkownikami.
wycofane aplikacje na iOS i Androida;
W 2014 roku aplikacje zostały wydane z wielkim hukiem, ale niedawno firma Betty Crocker wycofała je ze sklepów Apple App Store i Google Play Store, ponieważ straciły one na znaczeniu. Przez długi czas zespół Betty Crocker wolał dodawać nowe funkcje do witryny mobilnej niż do aplikacji na iOS lub Androida. Platforma techniczna, na której zostały utworzone aplikacje na iOS i Androida, była już nieaktualna, a firma nie miała zasobów, aby w dalszym ciągu aktualizować i utrzymywać aplikacje. Pod względem ruchu aplikacja była też bardziej nowoczesna i łatwiejsza do ulepszenia pod względem ruchu.
Aplikacje na iOS i Androida miały jednak jedną niesamowitą funkcję, którą użytkownicy bardzo polubili:
Wskazówka dla milenialsów: aplikacja mobilna @BettyCrocker nie przyciemnia się ani nie blokuje podczas gotowania według przepisu. –@AvaBeilke
80% osób gotuje w kuchni z urządzeniem, ale przyciemnianie i blokowanie ekranu stanowi problem. Co zrobił @BettyCrocker? Zaktualizowana aplikacja, która NIE przyciemnia ekranu, gdy użytkownicy korzystają z przepisu. – @KatieTweedy
Wprowadzanie w sieci funkcji otwierającej nowe możliwości dzięki interfejsowi Wake Lock API
Podczas gotowania na urządzeniu nic nie jest bardziej frustrujące niż dotykanie ekranu chaotycznymi rękami albo nawet nosem, gdy ekran się wyłącza. Betty Crocker zastanowiła się, jak przenieść do aplikacji internetowej aplikację internetową. Właśnie wtedy dowiedziała się o Project 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 możliwości, które do tej pory wymagały aplikacji na iOS lub Androida. Interfejs Wake Lock API ogranicza potrzebę stosowania niestandardowych rozwiązań i potencjalnie energochłonnych obejść.
Przesyłanie prośby o blokadę uśpienia
Aby zażądać blokady uśpienia, musisz wywołać metodę navigator.wakeLock.request()
, która zwraca obiekt WakeLockSentinel
. Tego obiektu będziesz używać jako wartości wartej uwagi.
Przeglądarka może odrzucić żądanie z różnych powodów (np. gdy poziom naładowania baterii jest zbyt niski), dlatego zalecamy umieszczenie wywołania w instrukcji try…catch
.
Zwolnienie blokady uśpienia
Musisz też mieć możliwość zwolnienia blokady aktywacji, co osiąga się przez wywołanie metody release()
obiektu WakeLockSentinel
.
Jeśli chcesz automatycznie zwolnić blokadę 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);
Implementacja
Dzięki nowej aplikacji internetowej użytkownicy powinni mieć możliwość łatwego poruszania się po przepisie, wykonywania kroków, a nawet opuszczania aplikacji bez blokowania ekranu. Aby to osiągnąć, zespół najpierw utworzył szybki prototyp interfejsu jako model koncepcyjny i narzędzia do zbierania opinii na temat UX.
Gdy okazało się, że prototyp jest przydatny, firma zaprojektowała komponent Vue.js, który można było udostępnić wszystkim markom (BettyCrocker, Pillsbury i Tablespoon). Chociaż tylko Betty Crocker miała aplikacje na iOS i Androida, wszystkie 3 strony korzystały z podstawy kodu, więc można było wdrożyć komponent raz i w ten sposób udostępnić go wszędzie.
Podczas tworzenia komponentu na podstawie zmodernizowanego frameworku nowej witryny szczególny nacisk położono na warstwę ViewModel
w schemacie MVVM.
Zespół zaprogramował też rozwiązania z myślą o współdziałaniu, aby umożliwić działanie funkcji w starszych i nowych strukturach witryny.
Aby śledzić widoczność i użyteczność, firma Betty Crocker zintegrowała śledzenie analityczne w przypadku kluczowych zdarzeń w cyklu życia blokady ekranu. Zespół wykorzystał funkcję zarządzania, aby wdrożyć komponent blokady wybudzania w jednej witrynie na potrzeby wstępnego wdrożenia w wersji produkcyjnej, a potem wdrożył tę funkcję w pozostałych witrynach po zweryfikowaniu wykorzystania i stanu stron. Nadal będą one monitorować dane analityczne na podstawie użycia tego komponentu.
Jako zabezpieczenie dla użytkowników zespół wprowadził wymuszony limit czasu, aby wyłączyć blokadę po upływie godziny braku aktywności. Ostatecznie zdecydowali się na zastosowanie na krótki czas przełącznika na wszystkich stronach z przepisami w swoich witrynach. W długofalowej perspektywie planujemy odświeżenie 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 uśpienia
<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ł znakomite efekty. W okresie od 10 grudnia 2019 r. do 10 stycznia 2020 r. strona BettyCrocker.com odnotowała te dane:
- Spośród wszystkich użytkowników Betty Crocker, którzy korzystają z przeglądarki zgodnej z interfejsem Wake Lock API, 3,5% z nich od razu włączyło tę funkcję, co czyni ją jedną z 5 najpopularniejszych czynności.
- Czas trwania sesji użytkowników, którzy włączyli blokadę aktywacji, był 3,1 raza dłuższy niż w przypadku użytkowników, którzy tego nie zrobili.
- Wskaźnik współczynnika odrzuceń w przypadku użytkowników, którzy włączyli funkcję blokady ekranu, był o 50% niższy niż w przypadku użytkowników, którzy z niej nie korzystali.
- Wskaźniki zamiaru dokonania zakupu były o około 300% wyższe w przypadku użytkowników, którzy korzystali z blokady ekranu, niż w przypadku wszystkich użytkowników.
3.1×
Dłuższy czas trwania sesji
50%
Niższy współczynnik odrzuceń
300%
Wskaźniki większego zamiaru zakupu
Podsumowanie
Betty Crocker uzyskała świetne wyniki dzięki interfejsowi Wake Lock API. Możesz przetestować tę funkcję samodzielnie, wyszukując ulubiony przepis na dowolnej stronie (BettyCrocker, Pillsbury lub Tablespoon) i włączając przełącznik Nie ściemniaj ekranu podczas gotowania.
Blokady aktywacji nie ograniczają się do witryn z przepisami. Inne przykłady to aplikacje kart pokładowych i biletów, które muszą mieć ekran włączony do momentu zeskanowania kodu kreskowego, aplikacje w stylu kiosku, które podtrzymują ekran przez cały czas, czy internetowe aplikacje do prezentacji, które uniemożliwiają wygaszanie ekranu podczas prezentacji.
W tym artykule na tej stronie znajdziesz wszystko, co musisz wiedzieć o Wake Lock API. Miłej lektury i smażenia!
Podziękowania
Zdjęcie osoby ugniatającej ciasto udostępnione przez Juliana Hochgesanga na Unsplash.