Nie ma nic gorszego niż wyłączenie ekranu w trakcie gotowania. Dowiedz się, jak strona kulinarna BettyCrocker.com wykorzystała interfejs Wake Lock API, aby temu zapobiec.
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. Aplikacja internetowa miała też obiektywnie większą liczbę wizyt, była bardziej nowoczesna i łatwiejsza do ulepszania.
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 dla nich 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 tak frustrujące, jak dotykanie ekranu brudnymi rękami lub nawet nosem, gdy ekran jest wyłączony. Betty Crocker zastanawiała się, jak przenieść najlepszą funkcję swoich aplikacji na iOS/Androida do aplikacji internetowej. Wtedy dowiedziała 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 możliwości, które do tej pory wymagały aplikacji na iOS lub Androida. Interfejs Wake Lock API ogranicza potrzebę stosowania obejść i potencjalnie energochłonnych obejść.
Przesyłanie prośby o blokadę uśpienia
Aby zażądać blokady aktywacji, wywołaj metodę navigator.wakeLock.request(), która zwraca obiekt WakeLockSentinel. Użyjesz tego obiektu jako wartości sterującej.
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 element 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.
Programiści zadbali też o interoperacyjność, aby umożliwić korzystanie z funkcji w starszych i nowych frameworkach 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 ich witrynach. W długofalowej perspektywie planujemy odświeżenie strony z przepisami.
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ł niższy o 50% 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%
Obniż współczynnik odrzuceń
300%
Wzrost wskaźników zamiaru zakupu
Podsumowanie
Betty Crocker uzyskała świetne wyniki dzięki interfejsowi Wake Lock API. Możesz przetestować tę funkcję, 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 do obsługi kart pokładowych lub biletów, które muszą utrzymywać ekran włączony do momentu zeskanowania kodu kreskowego, aplikacje w stylu kiosku, które utrzymują ekran włączony przez cały czas, a także aplikacje do prezentacji internetowych, które nie pozwalają ekranowi przejść w stan uśpienia 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.