Gotowanie na urządzeniu mobilnym nie jest gorsze niż wyłączenie ekranu w trakcie podawania przepisu. Dowiedz się, jak witryna kulinarna BettyCrocker.com wykorzystała interfejs Wake Lock API, by temu zapobiec.
Wycofane aplikacje na iOS i Androida
Wydana dużej porcji fanów w 2014 r. Betty Crocker została niedawno wycofana ze sklepu Apple App Store i Sklepu Google Play, gdy już go obniżyła. Od dawna zespół Betty Crocker woli dodawać nowe funkcje do witryny mobilnej zamiast aplikacji na iOS i Androida. Platforma techniczna, na której zostały utworzone aplikacje na iOS lub Androida, była przestarzała, a firma nie miała zasobów, by aktualizować i utrzymywać aplikacje w przyszłości. Aplikacja internetowa pod względem natężenia ruchu stała się też bardziej nowoczesna i łatwiejsza w obsłudze.
Aplikacje na iOS i Androida miały jednak jedną niezwykłą funkcję, która podobała się użytkownikom:
Wskazówka od milenialsów: aplikacja mobilna @BettyCrocker nie przyciemnia się ani nie blokuje, gdy postępujesz zgodnie z przepisem. – @AvaBeilke
80% osób gotuje na urządzeniu w kuchni, ale przyciemnianie i blokowanie ekranu to problem. Co zrobiła @BettyCrocker? Zaktualizowano aplikację tak, aby NIE przyciemniała się, gdy użytkownicy korzystają z przepisu. – @KatieTweedy
Świetne funkcje dostępne w internecie dzięki interfejsowi Wake Lock API
Podczas gotowania z urządzeniem nie ma nic bardziej frustrującego niż dotknięcie ekranu brudnymi rękami lub nawet nosem, gdy ekran się wyłącza. Betty Crocker zastanawiała się, jak przenieść najlepszą funkcję swoich aplikacji na iOS/Androida do aplikacji internetowej. I to właśnie wtedy dowiedziały się o Project Fugu i Wake Lock API.
Interfejs Wake Lock API uniemożliwia wygaszanie lub zablokowanie ekranu przez urządzenie. Umożliwia to tworzenie nowych rozwiązań, które do tej pory wymagały aplikacji na iOS i Androida. Interfejs Wake Lock API ogranicza konieczność stosowania skomplikowanych i potencjalnie głodnych energii rozwiązań.
Wysyłam prośbę o blokadę uśpienia
Aby zażądać blokady uśpienia, musisz wywołać metodę navigator.wakeLock.request(), która zwraca obiekt WakeLockSentinel. Użyjesz tego obiektu jako wartości istotnej.
Przeglądarka może odrzucić żądanie z różnych powodów (np. z powodu zbyt słabej baterii), więc warto umieścić wywołanie instrukcji try…catch.
Zwalnianie blokady uśpienia
Potrzebujesz też sposobu na odblokowanie blokady uśpienia, którą można osiągnąć przez wywołanie metody release() obiektu WakeLockSentinel.
Jeśli chcesz automatycznie wyłączyć blokadę uśpienia po upływie określonego czasu, możesz wywołać release() za pomocą polecenia window.setTimeout(), jak pokazano w poniższym przykładzie.
// 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 przeglądanie przepisu i wykonywanie poszczególnych czynności, a nawet wyjście bez blokady ekranu. Aby osiągnąć ten cel, zespół na początku stworzył prototyp szybkiego interfejsu, aby jako dowód koncepcyjny i zebrać opinie na temat wygody użytkowników.
Gdy 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, te 3 witryny mają wspólną bazę kodu, więc mogły wdrożyć komponent raz i wdrożyć go wszędzie, jak widać na poniższych zrzutach ekranu.
Tworząc komponent na podstawie zmodernizowanej platformy nowej witryny, koncentrowaliśmy się na warstwie ViewModel wzorca MVVM.
Zespół zaprogramował też działania pod kątem interoperacyjności, aby umożliwić działanie funkcji w starszych i nowych platformach witryny.
Aby śledzić widoczność i łatwość obsługi, Betty Crocker zintegrowała śledzenie statystyk dotyczących głównych zdarzeń w cyklu życia blokady uśpienia. Zespół wykorzystał zarządzanie funkcjami do wdrożenia komponentu blokady uśpienia 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 będą monitorować dane analityczne na podstawie wykorzystania tego komponentu.
Aby to uniemożliwić użytkownikom, zespół ustawił wymuszony limit czasu wyłączenia blokady uśpienia po godzinie braku aktywności. Ostateczną wdrożeniem, który postanowili, była krótkoterminowa zmiana na wszystkich stronach z przepisami w ich witrynach. W perspektywie długoterminowej zakłada ona odświeżoną stronę z przepisami.
Kontener blokady uśpienia
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ł doskonałe wyniki. W okresie od 10 grudnia 2019 r. do 10 stycznia 2020 r. BettyCrocker.com zaraportowała następujące dane:
- Spośród wszystkich użytkowników Betty Crocker, którzy mają przeglądarkę zgodną z interfejsem Wake Lock API, 3,5% z nich natychmiast włączyło tę funkcję, co oznacza, że jest to najlepsze 5 działań.
- W przypadku użytkowników z włączoną blokadą wybudzania czas trwania sesji był 3,1 raza dłuższy niż w przypadku użytkowników, którzy tego nie zrobili.
- W przypadku użytkowników, którzy włączyli blokadę uśpienia, współczynnik odrzuceń był o 50% niższy niż w przypadku użytkowników, którzy nie korzystali z tej funkcji.
- Wskaźniki zamiaru zakupu były około 300% wyższe w przypadku użytkowników korzystających z blokady uśpienia w porównaniu z pozostałymi użytkownikami.
3,1×
Dłuższy czas trwania sesji
50%
Niższy współczynnik odrzuceń
300%
Wyższe wskaźniki skłonności do zakupu
Podsumowanie
Betty Crocker osiągnęła fantastyczne wyniki dzięki zastosowaniu interfejsu Wake Lock API. Aby przetestować tę funkcję, możesz samodzielnie wyszukać przepis na dowolnej stronie (BettyCrocker, Pillsbury lub Tablespoon) i włączyć przełącznik Zapobiegaj przyciemnieniu ekranu podczas gotowania.
Przypadki użycia blokad uśpienia nie obejmują stron z przepisami. Inne przykłady to aplikacje do obsługi kart pokładowych i biletów, które muszą pozostawać włączony ekran do momentu zeskanowania kodu kreskowego, aplikacje w stylu kiosku, które nieprzerwanie wyświetlają ekran, lub internetowe aplikacje do prezentacji, które uniemożliwiają uśpienie ekranu podczas prezentacji.
W obszernym artykule na tej stronie zebraliśmy wszystko, co musisz wiedzieć o interfejsie Wake Lock API. Pozdrawiamy
Podziękowania
Zdjęcie osoby ugniającej ciasto dzięki uprzejmości Juliana Hochgesanga w filmie Unsplash.