На протяжении почти столетия компания Betty Crocker является для Америки источником современных кулинарных инструкций и проверенных рецептов. Запущенный в 1997 году, их сайт BettyCrocker.com сегодня посещают более 12 миллионов человек в месяц. После внедрения API Wake Lock показатели намерения совершить покупку у пользователей Wake Lock выросли примерно на 300% по сравнению со всеми пользователями.
Устаревшие приложения для iOS и Android
Выпущенные с большой помпой в 2014 году, приложения Betty Crocker недавно были удалены из Apple App Store и Google Play Store после того, как их приоритет был снижен. Долгое время команда Betty Crocker предпочитала добавлять новые функции на мобильный сайт, а не в приложения для iOS/Android. Техническая платформа, на которой были созданы приложения для iOS/Android, устарела, и у компании не было ресурсов для поддержки и дальнейшего обслуживания приложений. Веб-приложение также объективно имело гораздо больший трафик, было более современным и его было проще улучшать.
Однако у приложений для iOS/Android была одна потрясающая функция , которая очень нравилась пользователям:
Совет от профессионала кулинарии для миллениалов: мобильное приложение @BettyCrocker не затемняется и не блокируется, когда вы следуете рецепту. — @AvaBeilke
80% людей готовят на кухне с помощью электронных устройств, но затемнение и блокировка экрана — это проблема. Что же сделала @BettyCrocker ? Обновила приложение, чтобы оно НЕ затемняло экран, когда пользователь находится в рецепте. — @Katie Tweedy
Внедряем эту убойную функцию в веб-среду с помощью Wake Lock API.
При приготовлении пищи с помощью гаджета нет ничего более неприятного, чем прикасаться к экрану грязными руками или даже носом, когда экран выключается. Компания Betty Crocker задалась вопросом, как перенести эту уникальную функцию своих приложений для iOS/Android в веб-приложение. Именно тогда они узнали о проекте Fugu и API Wake Lock .
API Wake Lock предоставляет способ предотвратить затемнение или блокировку экрана устройства. Эта возможность открывает новые возможности, которые до сих пор требовали наличия приложения для iOS/Android. API Wake Lock снижает необходимость в неоптимальных и потенциально энергозатратных обходных путях.
Запрос на блокировку пробуждения
Для запроса блокировки пробуждения необходимо вызвать метод navigator.wakeLock.request() , который возвращает объект WakeLockSentinel . Этот объект будет использоваться в качестве значения-сторожа . Браузер может отклонить запрос по различным причинам (например, из-за низкого заряда батареи), поэтому рекомендуется обернуть вызов в блок try…catch .
Снятие блокировки пробуждения
Вам также потребуется способ снять блокировку пробуждения, что достигается вызовом метода release() объекта WakeLockSentinel . Если вы хотите автоматически снять блокировку пробуждения по истечении определенного периода времени, вы можете использовать window.setTimeout() для вызова release() , как показано в примере ниже.
// 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);
Реализация
Новое веб-приложение должно позволять пользователям легко перемещаться по рецепту, выполнять шаги и даже отходить от экрана, не опасаясь его блокировки. Для достижения этой цели команда сначала создала быстрый прототип интерфейса в качестве подтверждения концепции и для сбора отзывов пользователей.
После того, как прототип оказался полезным, они разработали компонент Vue.js , который можно было использовать на всех их брендах ( Betty Crocker , Pillsbury и Tablespoon ). Хотя приложения для iOS и Android были только у Betty Crocker, все три сайта имеют общую кодовую базу, поэтому они смогли реализовать компонент один раз и развернуть его везде, как показано на скриншотах ниже.
При разработке компонента на основе модернизированной структуры нового сайта особое внимание уделялось слою ViewModel в рамках паттерна MVVM . Команда также учитывала совместимость, чтобы обеспечить функциональность как на устаревших, так и на новых платформах сайта.
Для отслеживания видимости и удобства использования Betty Crocker интегрировала аналитическое отслеживание ключевых событий в жизненном цикле блокировки экрана. Команда использовала управление функциями для развертывания компонента блокировки экрана на одном сайте для первоначального запуска в рабочую среду, а затем развернула эту функцию на остальных сайтах после мониторинга использования и состояния страниц. Они продолжают отслеживать аналитические данные на основе использования этого компонента.
В качестве меры предосторожности для пользователей команда разработала механизм принудительного отключения блокировки пробуждения через час бездействия. В качестве окончательного решения они остановились на краткосрочной перспективе в виде переключателя на всех страницах рецептов на своих сайтах. В долгосрочной перспективе они планируют обновить внешний вид страниц рецептов.
Контейнер блокировки пробуждения
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');
}
},
},
};
Компонент блокировки пробуждения
<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>
Результаты
Компонент Vue.js был развернут на всех трех сайтах и показал отличные результаты. В период с 10 декабря 2019 года по 10 января 2020 года BettyCrocker.com сообщила о следующих показателях:
- Среди всех пользователей Betty Crocker, имеющих браузер, совместимый с API Wake Lock, 3,5% сразу же включили эту функцию, что делает её одной из 5 самых популярных функций.
- Продолжительность сеанса для пользователей, включивших блокировку пробуждения, была в 3,1 раза больше, чем для пользователей, которые ее не включили.
- Показатель отказов для пользователей, включивших блокировку пробуждения, был на 50% ниже, чем для тех, кто не использовал эту функцию.
- Показатели намерения совершить покупку были примерно на 300% выше у пользователей, использующих функцию блокировки экрана, по сравнению со всеми остальными пользователями.
3.1 ×
Более длительная продолжительность сеанса
50 %
Более низкий показатель отказов
300 %
Более высокие показатели намерения совершить покупку
Выводы
Компания Betty Crocker добилась фантастических результатов, используя API Wake Lock. Вы можете протестировать эту функцию самостоятельно, найдя свой любимый рецепт на любом из их сайтов ( BettyCrocker , Pillsbury или Tablespoon ) и включив опцию « Предотвратить затемнение экрана во время приготовления ».
Сферы применения блокировки экрана при пробуждении не ограничиваются сайтами с рецептами. Другие примеры включают приложения для посадочных талонов или билетов, которым необходимо поддерживать экран включенным до сканирования штрих-кода, приложения киосков, которые постоянно держат экран включенным, или веб-приложения для презентаций, которые предотвращают переход экрана в спящий режим во время презентации.
Мы собрали всю необходимую информацию об API Wake Lock в подробной статье на этом сайте. Приятного чтения и удачного приготовления!